我有一个以JSON格式返回的大型数据集，这样我就可以获得3个页面，每个页面有5行。
JSON
{
"mypage":{
"outerwrapper":{
"page":"1",
"total":"3",
"records":"15",
"innerwrapper":{
"rows":[
{
"id":"1",
"read": true,
"cells": [
{
"label":"linkimg",
"value": "Link-A",
"links": [
{
"name":"link1"
},
{
"name":"link2"
},
{
"name":"link3"
}
]
}
]
},
{
"id":"2",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-B",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"3",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-C",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"4",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-D",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"5",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-E",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"6",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-F",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"7",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-G",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"8",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-H",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"9",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-I",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"10",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-J",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"11",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-K",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"12",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-L",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"13",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-M",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"14",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-N",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"15",
"read": true,
"cells": [
{
"label":"linkimg",
"value": "Link-O",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
}
]
}
}
}
}
JQGrid定义
$("#myjqgrid").jqGrid({
url: "jqgrid.json",
datatype: "json",
contentType: "application/x-javascript; charset=utf-8",
colNames:['linkimg'],
colModel:[
{name:'linkimg',index:'linkimg', width:100, align:"center", resizable:false}
],
jsonReader: {
root: "mypage.outerwrapper.innerwrapper.rows",
repeatitems: false
},
rowNum:5,
rowList:[5,10,15],
pager: '#Pager',
sortname: 'id',
recordpos: 'left',
multiboxonly:true,
viewrecords: true,
sortorder: "desc",
multiselect: true,
width: "1406",
height: "100%",
scrolloffset: 0,
loadonce: true,
sortable: true,
sorttype: "text"
})
我正在尝试做什么
我循环遍历JSON中的每一行并检查"read"属性。如果是true，则该行应将css text-decoration设置为underline。
loadComplete: function(data){
var x, rowItem;
for (x = 0; x < data.mypage.outerwrapper.innerwrapper.rows.length; x++) {
rowItem = data.mypage.outerwrapper.innerwrapper.rows[x];
var rowItemRead = rowItem.read;
if(rowItemRead === true){
$("#" + rowItem.id + " > td").css({"text-decoration":"underline"});
}
}
}
以上代码正在运行，但问题是
当我从第1页导航到第2页或从第2页导航到第3页时，我收到错误消息
mypage.outerwrapper
为null或不是对象。
完整的JQGrid定义代码（使用jsonReader和loadComplete）
$(function (){
var getValueByName = function (cells, cellItem) {
var i, count = cells.length, item;
for (i = 0; i < count; i += 1) {
item = cells[i];
if (item.label === cellItem) {
return item.value;
}
}
return '';
};
$("#myjqgrid").jqGrid({
url: "jqgrid.json",
datatype: "json",
contentType: "application/x-javascript; charset=utf-8",
colNames:['linkimg'],
colModel:[
{name:'linkimg',index:'linkimg',jsonmap:function(obj){return getValueByName(obj.cells, "linkimg");}, width:50, align:"center", resizable:false},
],
jsonReader: {
root: "mypage.outerwrapper.innerwrapper.rows",
page: "mypage.outerwrapper.page",
total: "mypage.outerwrapper.total",
records: "mypage.outerwrapper.records",
repeatitems: false
},
rowNum:5,
rowList:[5,10,15],
pager: '#Pager',
recordpos: 'left',
multiboxonly:true,
viewrecords: true,
sortorder: "desc",
multiselect: true,
width: "1406",
height: "100%",
scrolloffset: 0,
loadonce: true,
sortable: true,
sorttype: "text",
cache: true,
loadComplete: function(data){
var x, items, idName, rowItem;
if (typeof data.mypage === "undefined") {
items = data.rows;
idName = '_id_';
}else{
items = data.mypage.outerwrapper.innerwrapper.rows;
idName = 'id';
}
for (x = 0; x < items.length; x++) {
rowItem = items[x];
var rowItemRead = rowItem.read;
if(rowItemRead === true){
$("#" + rowItem[idName] + " > td").css({"text-decoration":"underline"});
}
}
}
});
$("#myjqgrid").jqGrid('navGrid','#Pager',{add:false,del:false,edit:false,position:'right',minWidth:800,maxWidth:1405,minHeight:350,maxHeight:680});
});
更新
$(function (){
var getValueByName = function (cells, cellItem) {
var i, count = cells.length, item;
for (i = 0; i < count; i += 1) {
item = cells[i];
if (item.label === cellItem) {
return item.value;
}
}
return '';
};
var setCSS = function (rowId, val, rawObject){
return rawObject.read? ' style="text-decoration: underline;"' : '';
}
$("#myjqgrid").jqGrid({
url: "jqgrid.json",
datatype: "json",
contentType: "application/x-javascript; charset=utf-8",
colNames:['linkimg','read'],
colModel:[
{name:'linkimg',index:'linkimg',jsonmap:function(obj){return getValueByName(obj.cells, "linkimg");}, width:50, align:"center", resizable:false, cellattr:function(obj){return setCSS(rowId, val, rawObject);}},
{name:'read', hidden:true}
],
jsonReader: {
root: "mypage.outerwrapper.innerwrapper.rows",
page: "mypage.outerwrapper.page",
total: "mypage.outerwrapper.total",
records: "mypage.outerwrapper.records",
repeatitems: false
},
rowNum:5,
rowList:[5,10,15],
pager: '#Pager',
recordpos: 'left',
multiboxonly:true,
viewrecords: true,
sortorder: "desc",
multiselect: true,
width: "1406",
height: "100%",
scrolloffset: 0,
loadonce: true,
sortable: true,
sorttype: "text",
cache: true
});
$("#myjqgrid").jqGrid('navGrid','#Pager',{add:false,del:false,edit:false});
});
答案 0 :(得分：1)
如果您使用datatype: "json"而没有loadonce: true，那么url: "jqgrid.json"应*动态生成请求的网页，服务器负责排序，分页和过滤数据
如果您按Ajax加载静态 JSON数据，例如，如果“jqgrid.json”只是一个文件，那么您应该使用jqGrid的loadonce: true选项。在jqGrid的情况下，只加载数据一次并在内部参数data和_index中将其缓存。然后，jqGrid将在客户端本地进行数据的分页，排序和过滤。
更新：第一次加载后，data回调的loadComplete参数格式将被更改，其名称将对应于localReader。因此，您可以在loadComplete内部进行测试typeof data.mypage === "undefined"。如果loadComplete已经与本地数据一起使用，您将在当前页面上找到将作为数组data.rows的项目显示的网格项目。所以代码可以是以下内容：
loadComplete: function(data){
var x, rowItem, items, idName, l;
if (typeof data.mypage === "undefined") {
// load from the local data
items = data.rows;
idName = '_id_';
} else {
items = data.mypage.outerwrapper.innerwrapper.rows;
idName = 'id';
}
for (x = 0, l = items.length; x < l; x++) {
rowItem = items[x];
if(rowItem.read === true){
$("#" + rowItem[idName] + " > td").css({"text-decoration":"underline"});
}
}
}
更新2 ：使用测试数据发布完整代码后，一切都将清除。如果您只是添加其他隐藏列
，如何从the demo查看{name:'read',hidden:true}
网格将正确显示数据。
我之前写过loadComplete的当前代码无效。现在我可以给你建议你能做什么。您可以先添加隐藏的'read'列（参见上文），然后将cellattr属性添加到'linkimg'列定义如下
cellattr: function (rowId, val, rawObject) {
return rawObject.read? ' style="text-decoration: underline;"' : '';
}
在之后，您可以删除在loadComplete 中使用的完整代码。您如何看待next demo方法的工作原理。代码不仅清晰，而且工作速度更快。
最后一句话：我在两个演示中添加了参数gridview: true，它可以提高性能，而不会出现任何缺点。我建议在所有网格中包含参数。