jqGrid 和 JSON 阅读器

Question

我对 jQuery 还很陌生，刚开始使用 jqGrid。我查看了 jqGrid 文档，以弄清楚如何在我的网格中以 JSON 格式显示我收到的一些数据，但无济于事。当我创建网格时，它会显示正确的标题、寻呼机信息等，并通过 Firebug 显示，我可以看到 JSON 数据的请求和响应。下面的 jsonReader 是我尝试过的众多方法之一，在函数回调中，我可以记录我收到的特定值，这样我就知道我正在获取数据。

将下面指定的 JSON 加载到 jqGrid 中的正确方法是什么？

以下是相关代码：

HTML：

<div id="dataInfo">
    <table id="dataTable"></table>
    <div id="dataTablePager"></div>
</div>

JS

jQuery("#dataTable").jqGrid({
              url: 'http://<snip>',
              mtype: 'GET',
              datatype: 'json',
              jsonReader: {
                  root: 'ipResponses',
                  id: 'startIP',
                  repeatitems: false,
                  page:  function(obj) { return 1; },
                  total: function(obj) { return 1; },
                  records: function(obj) { return obj.ipInfo.ipResponses.length; },
                  userdata: "userData"
              },
              colNames: ['StartIP', 'EndIP'],
              colModel: [
                  {
                      name: 'startIP',
                      index: 'startIP',
                      width: 55
                  }, 
                  {
                      name: 'endIP',
                      index: 'endIP',
                      width: 55
                  }
              ],
              pager: '#dataTablePager',
              rowNum: 8,
              rowList: [25,50,100],
              sortname: 'startIP',
              sortorder: 'asc',
              viewrecords: true,
              caption: 'Data',
              pgtext:"Page {0}"
          });

JSON

{
    "ipInfo": { 
        "queryStartIP": "4.4.4.0", 
        "queryEndIP": "4.4.4.256", 
        "ipResponses": [
            { "startIP": "4.4.4.1", "endIP": "4.4.4.5"},
            { "startIP": "4.4.4.10", "endIP": "4.4.4.15"}
        ]
    }
}

Answer 1

您的主要问题是 jsonReader 中的一些小变化。例如可以是

jsonReader: {
    root: 'ipInfo.ipResponses',
    id: 'startIP',
    repeatitems: false,
    page:  function(obj) { return 1; },
    total: function(obj) { return 1; },
    records: function(obj) { return obj.ipInfo.ipResponses.length; },
}

您可以在http://www.ok-soft-gmbh.com/jqGrid/ipInfo.htm 下看到带有一些外观变化的相同 jqGrid。