如果隐藏其中的每一行，则在 jqgrid 中隐藏分组标题 [英] Hide Grouping Heading in jqgrid if every row inside it is hidden
本文介绍了如果隐藏其中的每一行，则在 jqgrid 中隐藏分组标题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是.
具有 'jqgfirstrow' 类的行将仅用于设置列的宽度.应该跳过它.
具有 'jqgroup' 类的行是分组行.行的 ID 将由网格 ID(<table> 元素的 ID)、文本ghead_"和网格参数 groupingView.sortnames[0] 表示组的排序名称.
典型的数据行是具有jqgrow"类的网格行.您应该检查行数据的 isEqual 属性并隐藏或突出显示这些行.
您将在.
This is a continuation to this question which Oleg has answered.
I have 2 configuration files.
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
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.
In option b.
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.
eg: if Product grouping has all the rows hidden then even the Product grouping should be hidden
small part of 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.sou000a",
"secondValue": "file: cannot open /home/asimon/java/AIXJAVA/java/bin/libssaiok.sou000a"
}
]
},
{
"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": "000CE082D900u000a",
"secondValue": "000CE082D900u000a"
}
]
},
{
"id": "47",
"elementName": "maxfilesperproc",
"category": "System",
"subCategory": "Kernel Parameters",
"isEqual": false,
"isPrasentinXml1": true,
"isPrasentinXml2": true,
"isPrasentinXml3": false,
"attribute": [
{
"name": "maxfilesperproc",
"firstValue": " 8192u000a",
"secondValue": " 2000u000a"
}
]
},
{
"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": "4096u000a",
"secondValue": "4096u000a"
}
]
},
{
"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": " 2u000a",
"secondValue": " 2u000a"
}
]
},
{
"id": "55",
"elementName": "osname",
"category": "System",
"subCategory": "System",
"isEqual": true,
"isPrasentinXml1": true,
"isPrasentinXml2": true,
"isPrasentinXml3": false,
"attribute": [
{
"name": "osname",
"firstValue": "AIXu000a",
"secondValue": "AIXu000a"
}
]
},
{
"id": "56",
"elementName": "release",
"category": "System",
"subCategory": "System",
"isEqual": true,
"isPrasentinXml1": true,
"isPrasentinXml2": true,
"isPrasentinXml3": false,
"attribute": [
{
"name": "release",
"firstValue": "1u000a",
"secondValue": "1u000a"
}
]
}
],
"xls_path": "\csm\files\comparefiles\compare_output.xls"
}
code
$('#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'});
解决方案
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.
The row having 'jqgfirstrow' class will be used only to set the width of the column. It should be skipped.
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.
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:
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();
}
}
I recommend you additionally to use the recommendation which I described at the end of my previous answer.
这篇关于如果隐藏其中的每一行，则在 jqgrid 中隐藏分组标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
