为什么我在jqgrid中的分组行为有所不同？

Question

继续previous example  我在json中获得了更多数据，因此启用了分页，但在进入下一页之前，在分组env（以前由 Oleg 进行的envVariable）中显示3 items和回到第一页后，它显示4 items，同时env分组转到第一行。在这里，我发布我的屏幕截图以及我的代码和json。

转到下一页（注意：env中的3项，也在底部）

点击下一页后，当我回到第一页时（注意：现在它是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;

什么是可能的解决方案？

Answer 1

如果在所有数据项中定义subCategory属性（用于分组），则不会出现所述问题。在前面的示例中，您使用了subCategory:"system"。如果将属性添加到所有未定义subCategory的项目，您将获得the following演示没有问题。