在外部Javascript中使用JQGrid的表

Question

我有以下代码用于支付商品。 喜欢 ：-

function DisplayNewList()
{

                $("#list").jqGrid({
                    datatype: 'json',

                    url: 'Service.svc/json/getIngredients/',

                    mtype: 'GET',


                    colNames: ['Ingredents', 'Value'],
                    colModel: [
                        { name: 'Ingredents', index: 'Ingredents', width: 100 },
                        { name: 'value' }


                    ]
                });



}

我用了上面的jqgrid。 但是不能将表放在适当的位置，也不能在其上显示任何数据。

我在页面底部得到2个单元格（表格标题）。 不在我指定的框内。

“列表”是表ID，在.aspx文件中。 上面的代码在外部Java脚本文件中。

你能告诉我在哪里放置jqgrid。 以及如何在这里使用它。

现在得到这样的表：

对于getIngredients，我有这样的服务：-IService：

[OperationContract]
         [WebInvoke(Method = "GET",
          UriTemplate = "json/getIngredients",
          ResponseFormat = WebMessageFormat.Json,
          BodyStyle = WebMessageBodyStyle.Wrapped)]
         [return: MessageParameter(Name = "Status")]
         List<ItemList> GetIngredients;

谢谢。

Answer 1

您应该将空表<table id="list"></table>放在HTML片段内。 您应该通过使用$("#list").jqGrid({...});将空表转换为网格$("#list").jqGrid({...}); 在<table>已经放置在页面上之后 。

更新 ：您有从url: kimsHost + 'Service.svc/json/getIngredients/'加载数据的问题。 我建议您执行以下操作：

1. 添加loadError回调。 有关详细信息，请参见答案 。
2. 添加以下选项/回调：

ajaxGridOptions: { contentType: "application/json" },
serializeRowData: function (data) {
    return JSON.stringify(data);
},
gridview: true,
autoencode: true

3. 我建议您考虑使用loadonce: true选项。 如果服务器返回所有数据并且未实现服务器端的分页，排序和过滤/搜索，则应使用它。
4. 我建议从colModel删除不需要的index属性，并确认sortname: 'Timestamp'是您真正需要的选项。 您应该删除尾随,在结束colModel 。 语法...},]在JavaScript中错误。 大多数现代的Web浏览器都将忽略该错误，但是某些Web浏览器（例如IE8）会发现该问题很严重。 最好修复JavaScript代码的语法。