jqGrid不显示JSON数据

Question

我希望将jqGrid用于我正在处理的当前Web项目.问题是,我似乎无法通过网格显示JSON数据.这是网格的初始化代码:

$.fn.loadjqgrid = function(httpposturl){
        $(this).jqGrid({
            url: httpposturl,
            datatype: "json",
            mtype: "GET",
            colNames: ["Video Title", "Description", "Date Taken", "Date Uploaded"],
            colModel: [
               {name:"videoTitle", index:"videoTitle", width:150},
               {name:"videoDescription", index:"videoDescription", width:200},
               {name:"dateTaken", index:"dateTaken", width:150, sortable:true},
               {name:"dateUploaded", index:"dateUploaded", width:150, sortable:true}
            ],
            pager: "#gridpager",
            rowNum: 10,
            viewrecords: true,
            caption: "Video Grid"
        });
    };

Java servlet返回的JSON:

[{"dateTaken":"Wed Feb 16 00:00:00 UTC 2011","videoDescription":"This is a test","videoTitle":"Test Video","dateUploaded":""}]

JSON的格式化方式或网格初始化方式是否有问题？谢谢您的帮助!

Answer 1

为了获得服务器端数据过滤的优势,分页和排序jqGrid可以更好地处理包含有关当前页面的附加信息的数据(参见此处).如果您无法更改生成JSON数据的服务器端,则可以添加loadonce:true参数,然后在本地完成数据的过滤,分页和排序.但首先jqGrid应该能够读取您的数据.

你可以使用jsonReader我在这里建议的(这里也记录了这种方式):

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

使用里面的函数的jsonReader方式非常灵活,你几乎可以通过jqGrid读取任何JSON数据.

修改后,您的网格将显示数据:请参见此处.

留下一个小问题.jqGrid需要为每个网格行都有唯一的id.id将分配给每个<tr>元素.当前整数ids"1","2",...将用作ID,因为在您的JSON数据中找不到ID.例如,如果一列网格可以解释为id,则可以包含在jsonReader相应的属性中id:"videoTitle".如果您的数据确实没有ID,并且您计划将更多作为页面的一个网格,则可以收到ID冲突.在使用情况下id,两个网格具有不同实现的功能可以解决问题.