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>

页面返回一个空网格，只有列标题，没有任何来自其他服务的数据

单击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

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

通常，RESTful服务的使用并不意味着您应该发布完整的纯数据。 jqGrid旨在支持使用大型数据集。因此在请求发送到服务器时，还有关于返回所需页面的其他参数。查看the answer更清楚地描述问题。

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

更新： Here您可以找到一个示例，说明如何修改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"
});

使用restx服务器从restful Web服务获取json数据时清空Jqgrid

1 个答案: