Скрыть заголовок группировки в jqgrid, если каждая строка внутри него скрыта - PullRequest
Новая
       0

Скрыть заголовок группировки в jqgrid, если каждая строка внутри него скрыта

1 голос
/ 04 августа 2011

Это продолжение на этот вопрос , на который Олег ответил.

enter image description here

У меня 2 файла конфигурации.

Я сравниваюих для равенства, и поэтому у меня есть два варианта, как показано на рисунке (переключатели) a.Просмотреть все записи, б.Просмотр различий

опция a. Сетка отображает все строки, единственное изменение состоит в том, что значения, которые не равны (обозначены isEqual=false в JSON), находятся в разныхcolor.

В опции b.

, если соответствующие строки не равны (обозначены isEqual=false в JSON), тогда цвет строки в сетке изменяется иРавные (обозначенные isEqual=true в JSON) значения строк не отображаются (так как это опция б. Просмотр различий . Так что теперь в некоторой конфигурации (json) Product (группировка)имеет все строки, равные (т. е. isEqual=true), под которыми скрыты все строки, я хочу, чтобы, если все строки внутри строки были скрыты, то группировка также не должна быть видимой.

например: если в группе Product все строки скрыты, то даже группа Product должна быть скрыта

небольшая часть Json 

{
"response": [
{
  "id": "1",
  "elementName": "A",
  "category": "System",
  "subCategory": "Environment",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "firstValue": "5242880",
      "secondValue": "5242880"
    }
  ]
},

{
  "id": "23",
  "elementName": "TERM",
  "category": "System",
  "subCategory": "Environment",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "firstValue": "xterm",
      "secondValue": "xterm"
    }
  ]
},

{
  "id": "33",
  "elementName": "bitmode",
  "category": "Product",
  "subCategory": "Product",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "bitmode",
      "firstValue": "file: cannot open /home/asimon/java/AIXJAVA/java/bin/libssaiok.so\u000a",
      "secondValue": "file: cannot open /home/asimon/java/AIXJAVA/java/bin/libssaiok.so\u000a"
    }
  ]
},

{
  "id": "36",
  "elementName": "coredump - hard",
  "category": "System",
  "subCategory": "Userlimit",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "hard",
      "firstValue": "unlimited ",
      "secondValue": "unlimited "
    }
  ]
},
{
  "id": "37",
  "elementName": "coredump - soft",
  "category": "System",
  "subCategory": "Userlimit",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "soft",
      "firstValue": "unlimited ",
      "secondValue": "unlimited "
    }
  ]
},
{
  "id": "38",
  "elementName": "cpuspeed",
  "category": "System",
  "subCategory": "System",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "cpuspeed",
      "firstValue": " 4204 \u000a",
      "secondValue": " 4204 \u000a"
    }
  ]
},
{
  "id": "39",
  "elementName": "data - hard",
  "category": "System",
  "subCategory": "Userlimit",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "hard",
      "firstValue": "unlimited ",
      "secondValue": "unlimited "
    }
  ]
},
{
  "id": "40",
  "elementName": "data - soft",
  "category": "System",
  "subCategory": "Userlimit",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "soft",
      "firstValue": "unlimited ",
      "secondValue": "unlimited "
    }
  ]
}
{
  "id": "46",
  "elementName": "machine",
  "category": "System",
  "subCategory": "System",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "machine",
      "firstValue": "000CE082D900\u000a",
      "secondValue": "000CE082D900\u000a"
    }
  ]
},
{
  "id": "47",
  "elementName": "maxfilesperproc",
  "category": "System",
  "subCategory": "Kernel Parameters",
  "isEqual": false,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "maxfilesperproc",
      "firstValue": " 8192\u000a",
      "secondValue": " 2000\u000a"
    }
  ]
},
{
  "id": "48",
  "elementName": "maxthreadsperproc",
  "category": "System",
  "subCategory": "Kernel Parameters",
  "isEqual": false,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "maxthreadsperproc"
    }
  ]
},
{
  "id": "49",
  "elementName": "memory - hard",
  "category": "System",
  "subCategory": "Userlimit",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "hard",
      "firstValue": "unlimited ",
      "secondValue": "unlimited "
    }
  ]
},
{
  "id": "50",
  "elementName": "memory - soft",
  "category": "System",
  "subCategory": "Userlimit",
  "isEqual": false,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "soft",
      "firstValue": "32768 ",
      "secondValue": "unlimited "
    }
  ]
},
{
  "id": "51",
  "elementName": "mempagesize",
  "category": "System",
  "subCategory": "Kernel Parameters",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "mempagesize",
      "firstValue": "4096\u000a",
      "secondValue": "4096\u000a"
    }
  ]
},
{
  "id": "52",
  "elementName": "nofiles - hard",
  "category": "System",
  "subCategory": "Userlimit",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "hard",
      "firstValue": "unlimited ",
      "secondValue": "unlimited "
    }
  ]
},
{
  "id": "53",
  "elementName": "nofiles - soft",
  "category": "System",
  "subCategory": "Userlimit",
  "isEqual": false,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "soft",
      "firstValue": "8192 ",
      "secondValue": "2000 "
    }
  ]
},
{
  "id": "54",
  "elementName": "numberofcpu",
  "category": "System",
  "subCategory": "System",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "numberofcpu",
      "firstValue": " 2\u000a",
      "secondValue": " 2\u000a"
    }
  ]
},
{
  "id": "55",
  "elementName": "osname",
  "category": "System",
  "subCategory": "System",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "osname",
      "firstValue": "AIX\u000a",
      "secondValue": "AIX\u000a"
    }
  ]
},
{
  "id": "56",
  "elementName": "release",
  "category": "System",
  "subCategory": "System",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "release",
      "firstValue": "1\u000a",
      "secondValue": "1\u000a"
    }
  ]
}

],
"xls_path": "\\csm\\files\\comparefiles\\compare_output.xls"
}

код 

$('#compareContent').empty();
        $('<div id="compareParentDiv" width="100%">'+
          '<table id="list2" cellspacing="0" cellpadding="0"></table>'+
                '<div id="gridpager3"></div></div>')
        .appendTo('#compareContent');

        $("#compareParentDiv").hide();

        var gridDiff = $("#list2");
        gridDiff.jqGrid({
            datastr: compareData,
            datatype: "jsonstring",
            colNames: ['KeyName', 'SubCategory', starheader, header1,'isEqual'],
            colModel: [
                { name: 'elementName', index: 'elementName', key: true, width: 120 },
                { name: 'subCategory', index: 'subCategory', width: 1 },
                { name: 'firstValue', index: 'firstValue', width: 310, jsonmap:'attribute.0.firstValue' },
                { name: 'secondValue', index: 'secondValue', width: 310,jsonmap:'attribute.0.secondValue' },
                { name: 'isEqual', index: 'isEqual', width: 1,hidden:true}
            ],
            pager: '#gridpager3',
            rowNum:50,
            scrollOffset:1,
            //viewrecords: true,
            jsonReader: {
                repeatitems: false,
                page: function(){return 1;},
                root: "response"
            },
            //rownumbers: true,

            height: '320',
            autowidth:true,
            grouping: true,

            groupingView: {
                groupField: ['subCategory'],
                groupOrder: ['desc'],
                groupDataSorted : true,
                groupColumnShow: [false],
                //groupCollapse: true,
                groupText: ['<b>{0}</b>']

            },

            loadComplete: function() {
                if (this.p.datatype !== 'local') {
                    setTimeout(function () {
                       gridDiff.trigger('reloadGrid');
                   }, 0);
                } else {
                    $("#compareParentDiv").show();
                }

                var i, names=this.p.groupingView.sortnames[0], l = names.length;
                 data = this.p.data, rows = this.rows, item;

                for (i=0;i<l;i++) {
                    if ($.inArray(names[i],grouping) >= 0) {
                        $(this).jqGrid('groupingToggle',this.id+"ghead_"+i);

                        $(rows.namedItem(this.id+"ghead_"+i)).find("span.ui-icon").click(function(){
                            var len = data.length, iRow;
                            for (iRow=0;iRow<len;iRow++) {
                                item = data[iRow];
                                if (item.isEqual) {
                                    $(rows.namedItem(item._id_)).hide();
                                }
                            }
                        });

                    } else {
                        // hide the grouping row
                        $('#'+this.id+"ghead_"+i).hide();
                    }
                    //console.info($('#'+this.id+"ghead_"+i));
                }

                /*var i, names=this.p.groupingView.sortnames[0], l = names.length,
                data = this.p.data, rows = this.rows, item;
                for (i=0;i<l;i++) {
                    if (names[i]==='Environment') {
                        $(this).jqGrid('groupingToggle',this.id+"ghead_"+i);
                        $(rows.namedItem(this.id+"ghead_"+i)).find("span.ui-icon").click(function(){
                            var len = data.length, iRow;
                            for (iRow=0;iRow<len;iRow++) {
                                item = data[iRow];
                                if (item.isEqual) {
                                    $(rows.namedItem(item._id_)).hide();
                                }
                            }
                        });
                    } else {
                        // hide the grouping row
                        $('#'+this.id+"ghead_"+i).hide();
                    }
                }*/

                var i, names=this.p.groupingView.sortnames[0], l = names.length,
                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"
                            });
                    } else {
                        $(rows.namedItem(item._id_)).hide();
                    }
                }
            }
        });
        gridDiff.jqGrid('navGrid', '#gridpager3', { add: false, edit: false, del: false, search: false, refresh: false });
        gridDiff.jqGrid('navButtonAdd',"#gridpager3",{caption:"Toggle",title:"Toggle Search Toolbar", buttonicon :'ui-icon-pin-s',
            onClickButton:function(){
                gridDiff[0].toggleToolbar();
            } 
        });
        gridDiff.jqGrid('navButtonAdd',"#gridpager3",{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh',
            onClickButton:function(){
                gridDiff[0].clearToolbar();
            } 
        });
        gridDiff.jqGrid('filterToolbar',
                {stringResult: true, searchOnEnter: false, defaultSearch: 'cn'});

1 Ответ

2 голосов
/ 08 августа 2011

Я предлагаю вам немного изменить способ перечисления строк сетки внутри обработчика loadComplete. Я предлагаю перечислить все строки сетки способом, описанным здесь .

Строка с классом 'jqgfirstrow' будет использоваться только для установки ширины столбца. Это должно быть пропущено.

Строки, имеющие класс jqgroup, являются строками группировки. Идентификаторы строк будут получены из идентификатора сетки (идентификатор элемента <table>), текста 'ghead_' и индекса в параметре сетки groupingView.sortnames[0], которые представляют отсортированные имена групп.

Типичными строками данных являются строки сетки, имеющие класс 'jqgrow'. Вам следует проверить свойство isEqual данных строки и либо скрыть, либо выделить строки.

Здесь вы найдете демо , которое показывает следующие результаты:

enter image description here

Код новой версии обработчика loadComplete, который я заполняю дополнительно ниже 

loadComplete: function () {
    var p = this.p, data = p.data, indexes = p._index,
        names = p.groupingView.sortnames[0], iName, idParts,
        rows = this.rows, cRows = rows.length, iRow, $row, rowData,
        previousGrouppigRow = null, hasHighlitedItem = false,
        lastCollaped = false,
        onGroupingExpand = function () {
            var $curRow = $(this).closest("tr.jqgroup").next();
            while ($curRow.hasClass('jqgrow')) {
                rowData = data[indexes[$curRow[0].id]];
                if (rowData.isEqual) {
                    $curRow.hide();
                }
                $curRow = $curRow.next();
            }
        };

    if (this.p.datatype !== 'local') {
        // reload grid to sort it
        setTimeout(function () {
            gridDiff.trigger('reloadGrid');
        }, 0);
        return; //we need not do anything now
    } else {
        parentContainer.show();
    }

    for (iRow = 0; iRow < cRows; iRow += 1) {
        $row = $(rows[iRow]);
        if ($row.hasClass('jqgroup')) {
            $row.find("span.ui-icon").click(onGroupingExpand);
            idParts = $row[0].id.split('ghead_');
            iName = idParts[idParts.length-1];
            if ($.inArray(names[iName], grouping) >= 0) {
                // collape the grouping rows from the "grouping" array
                gridDiff.jqGrid('groupingToggle', $row[0].id);
                lastCollaped = true;
            }
            // the row is the group header
            if (previousGrouppigRow !== null && hasHighlitedItem === false) {
                // the previous group has no highlited items
                if (!lastCollaped) {
                    // collapse the group only if it is not already collaped
                    gridDiff.jqGrid('groupingToggle', previousGrouppigRow[0].id);
                }
                previousGrouppigRow.hide();
            }
            previousGrouppigRow = $row;
            hasHighlitedItem = false;
        } else if ($row.hasClass('jqgrow')) {
            rowData = data[indexes[$row[0].id]];
            if (!rowData.isEqual) {
                hasHighlitedItem = true;
                $row.css({
                    "background-color": "#FFE3EA",
                    "background-image": "none"
                });
            } else {
                $row.hide();
            }
        }
    }
    if (previousGrouppigRow !== null && hasHighlitedItem === false) {
        // the previous grout has no highlited items
        if (!lastCollaped) {
            gridDiff.jqGrid('groupingToggle', previousGrouppigRow[0].id);
        }
        previousGrouppigRow.hide();
    }
}

Я рекомендую вам дополнительно использовать рекомендацию, которую я описал в конце моего предыдущего ответа .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...