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，其中包含一些外观更改。

jqGrid和JSON阅读器

1 个答案: