У меня большой набор данных, возвращаемый в формате 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
является нулем или не является объектом.
Полный код определения 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});
});
UPDATE
$(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});
});