我希望将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应该能够读取您的数据。
您可以使用我建议使用here的jsonReader
(此方式也记录在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
作为两个网格具有不同实现的功能的情况下,可以解决此问题。