jQuery jqGrid 和 JSON 阅读器

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3622928/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 15:45:35  来源:igfitidea点击:

jqGrid and JSON reader

jqueryjsonjqgrid

提问by RC.

I'm fairly new to jQuery and just started working with jqGrid. I've looked over the jqGrid docs in order to figure out how to display some data I'm receiving back in JSON format within my grid to no avail. When I create the grid, it displays with the correct headers, pager info, etc and via Firebug and I can see the request and response of the JSON data. The jsonReader below is one of many I've tried and in the function callbacks I can log the specific values I'm receiving back so I know I'm getting the data.

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

What is the proper way for me to get the JSON specified below loaded into the jqGrid?

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

Here's the relevant code:

这是相关的代码:

HTML:

HTML:

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

JS

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

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"}
        ]
    }
}

回答by Oleg

Your main problem is some small changes in the jsonReader. It can be for example

您的主要问题是 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; },
}

The same jqGrid with some cosmetic changes you can see live under http://www.ok-soft-gmbh.com/jqGrid/ipInfo.htm.

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