如果jqgrid中的每一行都被隐藏，则在jqgrid中隐藏分组标题 [英] Hide Grouping Heading in jqgrid if every row inside it is hidden
本文介绍了如果jqgrid中的每一行都被隐藏，则在jqgrid中隐藏分组标题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是此问题的延续奥列格回答了.
我有2个配置文件.
我比较它们的相等性，因此，我有两个选择，如图所示(单选按钮) a.查看所有记录，b.查看差异
I compare them for equality, and so I have two options as shown in the image (radio buttons) a. View All Records, b. View Differences
选项a.
网格显示所有行，唯一的变化是不相等的值(在JSON中用isEqual=false标识)的颜色不同.
option a.
The grid displays all the rows, only change is that the values which are not equal (identified by isEqual=false in JSON) they are in different color.
在选项b中.
如果相应的行不相等(在JSON中用isEqual=false标识)，则网格中的行颜色将更改，并且不显示相等的行(在JSON中用isEqual=true标识)(因为这是选项b.查看差异.因此，在某些配置(json)中，产品(分组)具有所有相等的行(即isEqual=true)，在该行下所有行均被隐藏，我想如果该行内的所有行都被隐藏，那么分组也将不可见.
if the corresponding rows are not equal (identified by isEqual=false in JSON) then row color in the grid is changed and the equal (identified by isEqual=true in JSON) row values are not displayed (since this is option b. View Differences. So now in some configuration (json) the Product (grouping) has all the rows equal (i.e., isEqual=true) under which all the rows are hidden, I want if all the rows inside the row is hidden then the Grouping also should not be visible.
例如:如果Product分组隐藏了所有行，那么即使Product分组也应隐藏
eg: if Product grouping has all the rows hidden then even the Product grouping should be hidden
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'});
推荐答案
我建议您对loadComplete处理程序内部枚举网格行的方式进行一些更改.我建议以
I suggest that you change a little the way in which the grid rows are enumerated inside of the loadComplete handler. I suggest to enumerate all grid rows in the way described here.
具有"jqgfirstrow"类的行将仅用于设置列的宽度.应该跳过它.
The row having 'jqgfirstrow' class will be used only to set the width of the column. It should be skipped.
具有'jqgroup'类的行是分组行.行的ID将由网格ID(<table>元素的ID)，文本"ghead_"和网格参数groupingView.sortnames[0]中的索引来解释，这些参数代表组的已排序名称.
The rows having 'jqgroup' class are the grouping rows. The ids of the rows will be construed from the grid id (the id of the <table> element), the text 'ghead_' and the index in the grid parameter groupingView.sortnames[0] which represent the sorted names of the groups.
典型的数据行是具有"jqgrow"类的网格行.您应该检查行数据的isEqual属性，然后隐藏或突出显示行.
The typical data rows are the grid rows having the class 'jqgrow'. You should examine the isEqual property of the row data and either hide or highlight the rows.
您会在此处找到演示，该演示显示了以下结果:
You will find the demo here which shows the following results:
我在下面另外填充的loadComplete处理程序的新版本代码
The code of new version of the loadComplete handler I fill additionally below
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();
}
}
我还建议您使用我在 查看全文
