如果隐藏了jqgrid中的每一行，则在jqgrid中隐藏分组标题

这是Oleg回答的这个问题的延续。

我有2个配置文件。

我比较它们是否相等，所以我有两个选项，如图像（单选按钮） a所示。 查看所有记录，b。 查看差异

选项a。 网格显示所有行，只有更改的是不相等的值（由JSON中的isEqual=false标识）它们是不同的颜色。

在选项b中。

如果相应的行不相等（在JSON中由isEqual=false标识），则网格中的行颜色会发生变化，并且不会显示相等（由JSON中的isEqual=true标识）行值（因为这是选项b。查看差异所以现在在一些配置（json）中， Product （分组）的所有行都相等（即isEqual=true ），在这些行下隐藏了所有行，我想如果行中的所有行都被隐藏，那么Grouping也应该不可见。

例如 ：如果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(); $('
'+ ''+ '
') .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: ['{0}'] }, 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= 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'}); 

Answer 1

我建议您稍微更改一下在loadComplete处理程序中枚举网格行的方式。 我建议按照这里描述的方式枚举所有网格行。

具有’jqgfirstrow’类的行将仅用于设置列的宽度。 应该跳过它。

具有’jqgroup’类的行是分组行。 行的ID将根据网格id（

元素的id），文本’ghead_’和grid参数groupingView.sortnames[0]的索引来解释，这些索引表示组的排序名称。

典型的数据行是具有类’jqgrow’的网格行。 您应该检查行数据的isEqual属性，并隐藏或突出显示行。

您将在此处找到演示，其中显示以下结果：

我在下面另外填写了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(); } } 

我建议您另外使用我在上一个答案结尾处描述的建议。