jqgrid-从一页移到另一页时出错 [英] jqgrid - error when moving from 1 page to another
问题描述
我有一个以JSON格式返回的大数据集，这样我得到3页，每页有5行.
I have a large data set coming back in JSON format such that I get 3 pages, each page has 5 rows.
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.
I'm looping through each row in JSON and checking for the "read" property. If it is true, then that row should have css text-decoration set to 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页时，我收到错误消息
When I navigate from page 1 to page 2 OR from page 2 to page 3, I get the error message
mypage.outerwrapper
为null或不是对象.
is null or not an object.
完整的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});
});
推荐答案
如果不使用loadonce: true使用datatype: "json"，则url: "jqgrid.json"应该*动态+生成请求的页面，并且服务器是负责数据的排序，分页和过滤.
If you use datatype: "json" without loadonce: true then the url: "jqgrid.json" should *dynamically+ generate the requested page and the server is responsible for sorting, paging and filtering of data.
如果您为每个Ajax加载 static JSON数据，例如，如果"jqgrid.json"只是一个文件，则应使用jqGrid的loadonce: true选项.在jqGrid仅加载数据一次的情况下，将其本地缓存在内部参数data和_index中.然后，由jqGrid在客户端本地进行数据的分页，排序和过滤.
If you load static JSON data per Ajax, for example if the "jqgrid.json" is just a file, then you should use loadonce: true option of jqGrid. In the case jqGrid with load the data only once and cache it locally in the internal parameters data and _index. Then paging, sorting and filtering of the data will be made by jqGrid locally on the client side.
更新:首次加载后，loadComplete回调的data参数的格式将被更改，并且其名称与 localReader .因此，您可以仅在loadComplete内部测试typeof data.mypage === "undefined".如果loadComplete已经与 local 数据一起使用，您将在网格中找到将显示在当前页面上的项目，作为数组data.rows的项目.因此，代码可能与以下内容有关:
UPDATED: After the first load the format of the data parameter of loadComplete callback will be changed and will have the names corresponds to localReader. So you can just test inside of loadComplete whether typeof data.mypage === "undefined". In the case the loadComplete works already with the local data and you will find the items the grid which will be displayed on the current page as the items of the array data.rows. So the code can be about the following:
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 :发布包含测试数据的完整代码后，所有内容将一目了然.如果您只是添加其他隐藏内容，如何从演示中看到列
UPDATED 2: After you posted full code with the test data everything will be clear. How you can see from the demo if you just add additional hidden column
{name:'read',hidden:true}
网格将正确显示数据.
我写过你之前，loadComplete中的当前代码无效.现在，我可以建议您可以做什么.您可以先添加隐藏的'read'列(请参见上文)，然后将cellattr属性添加到定义如下的'linkimg'列中
I wrote you before that the current code from loadComplete is not effective. Now I can give you the suggestion what you can do. You can first add the hidden 'read' column (see above) and additionally add cellattr property to the 'linkimg' column defined as following
cellattr: function (rowId, val, rawObject) {
return rawObject.read? ' style="text-decoration: underline;"' : '';
}
此后，您可以删除在loadComplete 中使用的完整代码.您如何从下一个演示中看到该方法的效果.该代码不仅会很清晰，而且可以更快地工作.
After that you can remove the full code which you use in loadComplete. How you can see from the next demo the approach works. The code will be not only clear, but it works much more quickly.
最后一句话:我在两个演示中都添加了参数gridview: true，它可以提高性能而对您的情况没有任何不利影响.我建议在所有网格中都包含该参数.
The last remark: I added in both demos the parameter gridview: true which improve the performance without any disadvantages in your case. I recommend include the parameter in all your grids.
这篇关于jqgrid-从一页移到另一页时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
