我希望将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的格式或初始化网格的方式有问题吗?谢谢您的帮助!

最佳答案

为了具有服务器端数据过滤的优势,分页和排序jqGrid可以更好地与包含有关当前页面的其他信息的数据一起使用(请参见here)。如果您不能更改生成JSON数据的服务器端,则可以添加loadonce:true参数,然后将在本地完成数据的过滤,分页和排序。但是首先jqGrid应该能够读取您的数据。

您可以使用我建议使用herejsonReader(此方式也记录在here中):

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数据。

修改后,网格将显示数据:请参见here

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

10-05 20:56
查看更多