Продолжая с предыдущего примера Я получил еще несколько данных в свой json, поэтому разбиение на страницы включено, но в группе env
(ранее envVariable делал Олег ), прежде чем перейти кна следующей странице отображается 3 items
, а после возврата на 1-ю страницу отображается 4 items
, а также env
группировка перемещается в верхний ряд.Здесь я публикую свои снимки экрана, а также мой код и JSON.
перед переходом на следующую страницу (Примечание: 3 элемента в env, также внизу)
после перехода на следующую страницу,когда я возвращаюсь на 1-ю страницу (Примечание: теперь в env 4 элемента, а также вверху)
Мой код
$('#compareContent').empty();
$('<div id="compareParentDiv" width="100%">'+
'<table id="list2" cellspacing="0" cellpadding="0"></table>'+
'<div id="gridpager3"></div></div>')
.appendTo('#compareContent');
var gridDiff = $("#list2");
gridDiff.jqGrid({
datastr: myJson,
datatype: "jsonstring",
colNames: ['KeyName', 'SubCategory', starheader, header1,'isEqual'],
colModel: [
{ name: 'elementName', index: 'elementName', key: true, width: 220 },
{ name: 'subCategory', index: 'subCategory', width: 1 },
{ name: 'firstValue', index: 'firstValue', width: 300, jsonmap:'attribute.0.firstValue' },
{ name: 'secondValue', index: 'secondValue', width: 300,jsonmap:'attribute.0.secondValue' },
{ name: 'isEqual', index: 'isEqual', width: 1,hidden:true}
],
pager: '#gridpager3',
rowNum: 10,
scrollOffset:0,
viewrecords: true,
jsonReader: {
repeatitems: false,
page: function(){return 1;},
root: "response"
},
//rownumbers: true,
//multiselect: true,
//height: "320",
//autowidth:true,
height: '320',
autowidth:true,
grouping: true,
groupingView: {
groupField: ['subCategory'],
groupOrder: ['desc'],
groupDataSorted : true,
groupColumnShow: [false],
//groupCollapse: true,
groupText: ['<b>{0} - {1} Item(s)</b>']
},
loadComplete: function() {
var i, names=this.p.groupingView.sortnames[0], l = names.length;
for (i=0;i<l;i++) {
if (names[i]==='env') {
$(this).jqGrid('groupingToggle',this.id+"ghead_"+i);
} else {
// hide the grouping row
$('#'+this.id+"ghead_"+i).hide();
}
}
var i, l, data = this.p.data, rows = this.rows, item;
l = data.length;
for (i=0;i<l;i++) {
item = data[i];
if (!item.isEqual) {
$(rows.namedItem(item._id_))
.css({
"background-color": "#FFE3EA",
"background-image": "none"
});
}
}
}
});
gridDiff.jqGrid('navGrid', '#gridpager3', { add: false, edit: false, del: false, search: false, refresh: true });
мой Jsonобъект
var myJson={
"response": [
{
"id": "0",
"elementName": "osname",
"isEqual": true,
"isPrasentinXml1": true,
"isPrasentinXml2": true,
"attribute": [
{
"name": "osname",
"firstValue": "Linux\u000a",
"secondValue": "Linux\u000a"
}
]
},
{
"id": "1",
"elementName": "hostname",
"isEqual": false,
"isPrasentinXml1": true,
"isPrasentinXml2": true,
"attribute": [
{
"name": "hostname",
"firstValue": "estilo\u000a",
"secondValue": "buckeye\u000a"
}
]
},
{
"id": "2",
"elementName": "release",
"isEqual": false,
"isPrasentinXml1": true,
"isPrasentinXml2": true,
"attribute": [
{
"name": "release",
"firstValue": "1.6.18-128.el5\u000a",
"secondValue": "2.6.18-128.el5\u000a"
}
]
},
{
"id": "3",
"elementName": "version",
"isEqual": true,
"isPrasentinXml1": true,
"isPrasentinXml2": true,
"attribute": [
{
"name": "version",
"firstValue": "Red Hat Enterprise Linux Server release 5.3 (Tikanga)\u000a",
"secondValue": "Red Hat Enterprise Linux Server release 5.3 (Tikanga)\u000a"
}
]
},
{
"id": "8",
"elementName": "maxfilesperproc",
"isEqual": true,
"isPrasentinXml1": true,
"isPrasentinXml2": true,
"attribute": [
{
"name": "maxfilesperproc",
"firstValue": "32\u000a",
"secondValue": "32\u000a"
}
]
},
{
"id": "9",
"elementName": "maxthreadsperproc",
"isEqual": true,
"isPrasentinXml1": true,
"isPrasentinXml2": true,
"attribute": [
{
"name": "maxthreadsperproc",
"firstValue": "2000000\u000a",
"secondValue": "2000000\u000a"
}
]
},
{
"id": "10",
"elementName": "mempagesize",
"isEqual": true,
"isPrasentinXml1": true,
"isPrasentinXml2": true,
"attribute": [
{
"name": "mempagesize",
"firstValue": "4096\u000a",
"secondValue": "4096\u000a"
}
]
},
{
"id": "11",
"elementName": "TERM",
"subCategory": "env",
"isEqual": true,
"isPrasentinXml1": true,
"isPrasentinXml2": true,
"attribute": [
{
"firstValue": "xterm",
"secondValue": "xterm"
}
]
},
{
"id": "12",
"elementName": "SSANUL",
"subCategory": "env",
"isEqual": true,
"isPrasentinXml1": true,
"isPrasentinXml2": true,
"attribute": [
{
"firstValue": "/dev/null",
"secondValue": "/dev/null"
}
]
},
{
"id": "13",
"elementName": "SSA_LIHOST",
"subCategory": "env",
"isEqual": false,
"isPrasentinXml1": true,
"isPrasentinXml2": true,
"attribute": [
{
"firstValue": "estilo:45682",
"secondValue": "buckeye:45682"
}
]
},
{
"id": "14",
"elementName": "SSH_CLIENT",
"subCategory": "env",
"isEqual": false,
"isPrasentinXml1": true,
"isPrasentinXml2": true,
"attribute": [
{
"firstValue": "11.65.6.131 2138 22",
"secondValue": "10.65.6.131 2138 22"
}
]
}
]
},grid3;
Что может быть возможным решением?