使用Restx服务器从宁静的Web服务中获取JSON数据时为空Jqgrid

Question

我包括以下库文件：

<script src="JQuery/jquery-1.5.1.js" type="text/javascript"></script>
<script src="jQuery/src/i18n/grid.locale-en.js" type="text/javascript" charset="utf-8"> </script>
<script src="JQuery/jqgrid_demo38/js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<script src="JQuery/js/jquery.jqGrid.src.js" type="text/javascript"></script>

使用以下代码创建网格：

jQuery(document).ready(function(){
    jQuery("#list2").jqGrid({
        url: 'http://localhost:8001/resource/abc/entries',
        mtype: 'GET',
        datatype: "json",
        colNames: ['Trans ID', 'ACC ID', 'Day ID', 'Date', 'Balance'],
        colModel: [
            { name: 'Trans_ID', index: 'Trans_ID', width: 130 },
            { name: 'ACC_ID', index: 'ACC_ID', width: 100 },
            { name: 'Day_ID', index: 'Day_ID', width: 100 },
            { name: 'Summary_Date', index: 'Summary_Date', width: 90 },
            { name: 'Balance', index: 'Balance', width: 85 }
        ],
        width: 700,
        heigth: 200,
        imgpath: "jqgrid_demo38/themes/redmond/images",
        loadonce: true,
        rownumbers: true,
        rownumWidth: 40,
        gridview: true,
        multiselect: false,
        paging: true,
        pager: jQuery('#pager2'),
        rowNum: 20,
        rowList: [10, 30, 50],
        scrollOffset: 0,
        sortname: 'Summary_Date',
        sortorder: "desc",
        viewrecords: true,
        caption: "Demo"
    });
});

使用以下代码在HTML中定义网格

<table id="list2" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager2" class="scroll" style="text-align:center;"></div>

页面返回的空网格仅包含列标题，而没有来自REST服务的任何数据

单击Web服务链接时，它返回以下数据

[
    {
        "Trans_ID": 1,
        "ACC_ID": 1,
        "Day_ID": 1,
        "Summary_Date": "2011-05-08",
        "Balance": 100.0
    },
    {
        "Trans_ID": 2,
        "ACC_ID": 2,
        "Day_ID": 1,
        "Summary_Date": "2011-04-08",
        "Balance": 50.0
    }
]

Answer 1

您为网格生成错误的数据格式。 如果您无法在服务器端进行任何更改，则应添加jsonReader所述的 jsonReader 。

通常，使用RESTful服务并不意味着您应该发布完整的纯数据。 jqGrid旨在支持处理大型数据集。 因此，在发送到服务器的请求中，还有关于需要返回的页面的其他参数。 看一下描述问题的答案就更清楚了。

您使用的url: 'http://localhost:8001/resource/abc/entries'非常糟糕。 您应始终使用url url: '/resource/abc/entries'形式的url: '/resource/abc/entries'或任何其他没有主机名和端口号的形式。 由于安全原因，如果您尝试访问另一个站点或另一个端口，则ajax请求将被阻止 。 我建议您使用loadError处理程序查看您loadError错误。 在答案的“更新”部分，您将找到相应的代码，包括可以下载的演示项目。

更新： 在这里您可以找到一个示例，如何仅修改jqGrid的代码以显示服务器产生的数据：

$("#list2").jqGrid({
    datatype: 'json',
    url: 'user755360.json',
    colNames: ['Trans ID', 'ACC ID', 'Day ID', 'Date', 'Balance'],
    colModel: [
        { name: 'Trans_ID', index: 'Trans_ID', key:true, width: 130, sorttype:'int' },
        { name: 'ACC_ID', index: 'ACC_ID', width: 100, sorttype:'int' },
        { name: 'Day_ID', index: 'Day_ID', width: 100, sorttype:'int' },
        { name: 'Summary_Date', index: 'Summary_Date', width: 90, formatter:'date',
          sorttype:'date' },
        { name: 'Balance', index: 'Balance', width: 85, formatter:'number',
          sorttype:'number' }
    ],
    rowNum: 20,
    rowList: [10, 30, 50],
    gridview: true,
    pager: '#pager2',
    rownumbers: true,
    viewrecords: true,
    jsonReader : {repeatitems: false,
        root: function(obj) {
            return obj;
        },
        page: function (obj) { return 1; },
        total: function (obj) { return 1; },
        records: function (obj) { return obj.length; }
    },
    loadonce: true,
    sortname: 'Summary_Date',
    sortorder: "desc",
    height: "100%",
    caption: "Demo"
});