javascript - 在外部 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 个单元格(表格标题)。不在我指定的框中。

'list' 是表 ID，它位于 .aspx 文件中。上述代码位于外部java脚本文件中。

你能告诉我jqgrid的放置位置吗？以及如何使用它在这里。

现在得到这样的表格:-

对于 getIngredients 我有这样的服务:-服务:

[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({...}); 将空表转换为网格在<table>之后已放置在页面上。

已更新:您在从 url: kimsHost + 'Service.svc/json/getIngredients/' 加载数据时遇到问题。我建议您执行以下操作:

1. 添加loadError打回来。请参阅the answer了解详情。
2. 添加以下选项/回调:

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

我建议您考虑使用 loadonce: true选项。如果服务器返回所有数据并且未实现服务器端分页、排序和过滤/搜索，您应该使用它。

我建议删除不需要的 index来自colModel的属性，验证sortname: 'Timestamp'是您真正需要的选项。您应该删除尾随 ,在 colModel 末尾。语法...},] JavaScript 中存在错误。大多数现代网络浏览器都会忽略该错误，但某些网络浏览器(例如 IE8)可能会发现该错误很严重。最好修复 JavaScript 代码的语法。