类似于jqGrid中的treegrid [英] something similar to treegrid in jqGrid
问题描述
我想有一个树，只有当它需要扩展。
例如： OS类型是不扩展的叶节点，但 / code>有子类别，因此它扩展
所以我应该使用什么来实现类似的东西，因为在jqGrid子网格中每行都有一个扩展， 't want here
/ p>
我的代码（取自您的示例）
$（' compareContent'）。empty（）;
$（'< div id =compareParentDivwidth =100％>'+
'< table id =list3cellspacing =0cellpadding =0> < / table>'+
'< div id =gridpager3>< / div>< / div>'）
.appendTo（'＃compareContent'）;
var grid2 = $（＃list3）;
grid2.jqGrid（{
datastr：myJson，
datatype：jsonstring，
colNames：['KeyName'，'Config1'，'Config2']，
colModel：[
{name：'elementName'，index：'elementName'，key：true，width：70}，
{name：'attribute [0] .firstValue'，index： [0] .firstValue'，width：90}，
{name：'attribute.secondValue'，index：'attribute.secondValue'，width：100}
]，
pager： ＃gridpager3'，
rowNum：10，
viewrecords：true，
jsonReader：{
repeatitems：false，
root：response
}
// rownumbers：true，
// multiselect：true，
height：320，
autowidth：true，
subGrid：true，
subGridRowExpanded：function（subgrid_id，row_id）{
var subgrid_table_id，pager_id，iData = -1;
subgrid_table_id = subgrid_id +_ t;
pager_id =p _+ subgrid_table_id;
$（＃+ subgrid_id）.html（< table id ='+ subgrid_table_id +'style ='overflow-y：auto'class ='scroll'>< / table& div id ='+ pager_id +'class ='scroll'>< / div>）;
$ .each（myJSONObject.list，function（i，item）{
if（item.id === row_id）{
iData = i;
return false;
}
}）;
if（iData == -1）{
return; //没有子网格的数据
}
jQuery（＃+ subgrid_table_id）.jqGrid（{
datastr：myJSONObject.list [iData]，
datatype：'jsonstring' ，
colNames：['Name'，'Value1'，'Value2']，
colModel：[
{name：name，index：name，width：90}
{name：firstValue，index：firstValue，width：100}，
{name：secondValue，index：secondValue，width：100}
] b $ b rowNum：20，
pager：pager_id，
sortname：'name'，
sortorder：asc，
height：'auto'，
autowidth ：true，
jsonReader：{
repeatitems：false，
// page：function（）{return 1;}，
root：attribute
}
}）;
jQuery（＃+ subgrid_table_id）.jqGrid（'navGrid'，＃+ pager_id，{edit：false，add：false，del：false}
/ * var html ='< span>部分< b> HTML< / b>对应具有id =< i>'+ row_id +'< / i>< / span>< br />'+
'< a href =http：// stackoverflow .com / users / 315935 / oleg>'+
'< img src =http://stackoverflow.com/users/flair/315935.pngwidth =208height =58 '+
'alt =Oleg at Stack Overflow，Q& A for Professional and enthusiast programmers'+
'title =Oleg at Stack Overflow，Q& programmers>'+
'< / a>';
$（＃+ subgrid_id）.append（html）; * /
}，
loadComplete：function（）{
var pos = 0;
var envPos = 0;
var envHalt = 0;
$ .each（myJson.response，function（i，val）{
if（val.subCategory ===envVariable& envHalt === 0）
{
console.info（val.subCategory +，+ envPos）;
envHalt ++;
envPos = pos;
}
pos ++;
}
console.info（envPos）;
var grid = $（＃list3）;
var subGridCells = $（td.sgcollapsed，grid [0]）;
$ .each（subGridCells，function（i，value）{
if（i == envPos）{
}
else
{
$ value）.unbind（'click'）。html（''）;
}
}）;
}
}）;
grid2.jqGrid（'navGrid'，'＃gridpager3'，{add：false，edit：false，del：false，search：false，refresh：true}
我的JSON
var myJson = {
response：[
{
id：m1，
subCategory：system，
elementName：osname，
attribute：[
{
id：m1_s1，
name：osname，
firstValue：Linux\\\
，
secondValue：HP-US1000\\\
}
]，
isEqual：false，
isPrasentinXml1：false，
isPrasentinXml2：false
}，
{
id：m2，
subCategory： system，
elementName：hostname，
attribute：[
{
id：m2_s1，
name： hostname，
firstValue：estilo\\\
，
secondValue：benz\\\
}
]，
isEqual ：false，
isPrasentinXml1：false，
isPrasentinXml2：false
}，
{
id：m3，
subCategory：envVariable，
elementName：SSASERVERLOGSDIR，
attribute：[
{
id：m3_s1，
firstValue：/home/hqusers1/IIR_1152825121_estilo_9.0.1SP2_32/iirlog，
secondValue：/home/hqusers1/IIR_1152825121_estilo_9.0.1SP2_32/iirlog
}
]，
isEqual：true，
isPrasentinXml1：false，
isPrasentinXml2：false
}，
{
id：m4 ，
subCategory：envVariable，
elementName：SSABIN，
attribute：[
{
id：m4_s1 ，
firstValue：/home/hqusers1/IIR_1152825121_estilo_9.0.1SP2_32/bin，
secondValue：/home/hqusers1/IIR_1152825121_estilo_9.0.1SP2_32/bin
}
]，
isEqual：true，
isPrasentinXml1：false，
isPrasentinXml2：false
}，
{
id：m5，
subCategory：envVariable，
elementName：tusc.tusc-RUN，
attribute：[
{
id：m5_s1，
name：information，
firstValue：unzip
}，
{
id：m5_s2，
name：name，
firstValue：tusc.tusc-RUN
}，
{
id：m5_s3，
name：version，
firstValue：＃
}
]，
isEqual：false ，
isPrasentinXml1：true，
isPrasentinXml2：false
}
]
}，grid2;
如果 subCategory == envVariable ，它应显示 + 符号展开
这是我到现在为止，还有我的 Config1 和 Config2 列未出现
在上图中 SSASERVERLOGSDIR ， SSABIN subCategory == envVariable，c $ c>和 tusc.tusc-RUN 应该位于 envVariable
envVariable 不会有任何 Config1
loadComplete：function（）{
var i，names = this.p.groupingView.sortnames [0]，l =名称。长度;
for（i = 0; i
$（this）.jqGrid（'groupingToggle'， this.id +ghead _+ i）;
} else {
//隐藏分组行
$（'＃'+ this.id +ghead _+ i）.hide（）;
}
}
var getColumnIndexByName = function（grid，columnName）{
var cm = grid.jqGrid（'getGridParam'，'colModel'），i = 0，l = cm。
for（; i< l; i ++）{
if（cm [i] .name === columnName）{
return i; // return the index
}
}
return -1;
};
var iCol = getColumnIndexByName（$（this），'isEqual'），
cRows = this.rows.length，iRow，row，className
for（iRow = 0; iRow< cRows; iRow ++）{
row = this.rows [iRow];
className = row.className;
if（$ .inArray（'jqgrow'，className.split（''））> 0）{// $（row）.hasClass（'jqgrow'）
if row.cells [iCol] .title ==false）//这里识别isEqual的值
{
if（$ .inArray（'myAltRowClass'，className.split（''））== = -1）{
row.className = className +'myAltRowClass';
}
}
}
}
}
$ b $在我看来，你真正尝试实现的是通过 subCategory 分组数据 。我严格推荐你看看jqGrid的官方演示页面，看看它可能的不同的可能性。
你的代码有一个更一般的问题。您在 colModel 中使用名称和索引不允许使用'属性[0] .firstValue'的形式。 name 属性，如果本地数据也 index 属性，则不能包含任何特殊字符。您需要读取JSON数据的是使用额外的 jsonmap 属性：
{name：'firstValue'，index：'firstValue'，width：350，jsonmap：'attribute.0.firstValue'}，
{name：'secondValue'，index：'secondValue'，width：350 ，jsonmap：'attribute.0.secondValue'}
此外，您应该定义一个用于分组数据：
{name：'subCategory'，index：'subCategory'}
要使用分组，您应该在jqGrid定义中添加以下选项：
grouping：true，
groupingView：{
groupField：['subCategory']，
groupOrder：['desc']，
groupDataSorted ：true，
groupColumnShow：[false]，
groupText：['< b> {0} - {1}项目< / b>']
}
设置 groupColumnShow：[false] code> subCategory 在分组中使用的列。
如果要在除envVariable组之外的所有组上隐藏分组头和折叠envVariable组，您可以通过以下方式执行此操作：
loadComplete：function（）{
var i，names = this.p.groupingView.sortnames [0]，l = names.length;
for（i = 0; i
$（this）.jqGrid（'groupingToggle'， this.id +ghead _+ i）;
} else {
//隐藏分组行
$（'＃'+ this.id +ghead _+ i）.hide（）;
}
}
}
毕竟，以下内容：
>
点击envVariable组的分组标题中的+图标后，将显示详细信息：
相应的演示您会在这里找到这里。我包括 page：function（）{return 1; }
如果您想要使用此方法，请在 jsonReader 请仅在分组标头中查看envVariable文本，以替换 groupText：['< b> {0} - {1}项< / b>'] 到 groupText：['{0}'] 。
I want to have a tree expanded only when it is required.
eg: OS Type is a leaf node it does not expand, but Memory has sub categories so it expands
So what should I use to achieve something similar, since in jqGrid subgrid every row has an expansion, which I don't want here
My code (took from your example)
$('#compareContent').empty();
$('<div id="compareParentDiv" width="100%">'+
'<table id="list3" cellspacing="0" cellpadding="0"></table>'+
'<div id="gridpager3"></div></div>')
.appendTo('#compareContent');
var grid2 = $("#list3");
grid2.jqGrid({
datastr: myJson,
datatype: "jsonstring",
colNames: ['KeyName', 'Config1', 'Config2'],
colModel: [
{ name: 'elementName', index: 'elementName', key: true, width: 70 },
{ name: 'attribute[0].firstValue', index: 'attribute[0].firstValue', width: 90},
{ name: 'attribute.secondValue', index: 'attribute.secondValue', width: 100 }
],
pager: '#gridpager3',
rowNum: 10,
viewrecords: true,
jsonReader: {
repeatitems: false,
root: "response"
},
//rownumbers: true,
//multiselect: true,
height: "320",
autowidth:true,
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id, pager_id, iData = -1;
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' style='overflow-y:auto' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
$.each(myJSONObject.list,function(i,item){
if(item.id === row_id) {
iData = i;
return false;
}
});
if (iData == -1) {
return; // no data for the subgrid
}
jQuery("#"+subgrid_table_id).jqGrid({
datastr : myJSONObject.list[iData],
datatype: 'jsonstring',
colNames: ['Name','Value1','Value2'],
colModel: [
{name:"name",index:"name",width:90},
{name:"firstValue",index:"firstValue",width:100},
{name:"secondValue",index:"secondValue",width:100}
],
rowNum:20,
pager: pager_id,
sortname: 'name',
sortorder: "asc",
height: 'auto',
autowidth:true,
jsonReader: {
repeatitems: false,
//page: function() { return 1; },
root: "attribute"
}
});
jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false});
/*var html = '<span>Some <b>HTML</b> text which corresponds the row with id=<i>'+row_id+'</i></span><br/>'+
'<a href="http://stackoverflow.com/users/315935/oleg">'+
'<img src="http://stackoverflow.com/users/flair/315935.png" width="208" height="58" '+
'alt="profile for Oleg at Stack Overflow, Q&A for professional and enthusiast programmers"'+
' title="profile for Oleg at Stack Overflow, Q&A for professional and enthusiast programmers">'+
'</a>';
$("#" + subgrid_id).append(html);*/
},
loadComplete: function() {
var pos=0;
var envPos=0;
var envHalt=0;
$.each(myJson.response,function(i,val){
if(val.subCategory==="envVariable"&&envHalt===0)
{
console.info(val.subCategory+", "+envPos);
envHalt++;
envPos=pos;
}
pos++;
});
console.info(envPos);
var grid = $("#list3");
var subGridCells = $("td.sgcollapsed",grid[0]);
$.each(subGridCells,function(i,value){
if (i==envPos) {
}
else
{
$(value).unbind('click').html('');
}
});
}
});
grid2.jqGrid('navGrid', '#gridpager3', { add: false, edit: false, del: false, search: false, refresh: true });
My JSON
var myJson={
"response": [
{
"id":"m1",
"subCategory":"system",
"elementName": "osname",
"attribute": [
{
"id":"m1_s1",
"name": "osname",
"firstValue": "Linux\n",
"secondValue": "HP-US1000\n"
}
],
"isEqual": false,
"isPrasentinXml1": false,
"isPrasentinXml2": false
},
{
"id":"m2",
"subCategory":"system",
"elementName": "hostname",
"attribute": [
{
"id":"m2_s1",
"name": "hostname",
"firstValue": "estilo\n",
"secondValue": "benz\n"
}
],
"isEqual": false,
"isPrasentinXml1": false,
"isPrasentinXml2": false
},
{
"id":"m3",
"subCategory":"envVariable",
"elementName": "SSASERVERLOGSDIR",
"attribute": [
{
"id":"m3_s1",
"firstValue": "/home/hqusers1/IIR_1152825121_estilo_9.0.1SP2_32/iirlog",
"secondValue": "/home/hqusers1/IIR_1152825121_estilo_9.0.1SP2_32/iirlog"
}
],
"isEqual": true,
"isPrasentinXml1": false,
"isPrasentinXml2": false
},
{
"id":"m4",
"subCategory":"envVariable",
"elementName": "SSABIN",
"attribute": [
{
"id":"m4_s1",
"firstValue": "/home/hqusers1/IIR_1152825121_estilo_9.0.1SP2_32/bin",
"secondValue": "/home/hqusers1/IIR_1152825121_estilo_9.0.1SP2_32/bin"
}
],
"isEqual": true,
"isPrasentinXml1": false,
"isPrasentinXml2": false
},
{
"id":"m5",
"subCategory":"envVariable",
"elementName": "tusc.tusc-RUN",
"attribute": [
{
"id":"m5_s1",
"name": "information",
"firstValue": "unzip"
},
{
"id":"m5_s2",
"name": "name",
"firstValue": "tusc.tusc-RUN"
},
{
"id":"m5_s3",
"name": "version",
"firstValue": "#"
}
],
"isEqual": false,
"isPrasentinXml1": true,
"isPrasentinXml2": false
}
]
},grid2;
If subCategory == envVariable it should display a + symbol to expand
This is what I came up with till now, also my Config1 and Config2 columns are not coming
In the above image SSASERVERLOGSDIR, SSABIN and tusc.tusc-RUN should come under envVariable based on checking subCategory==envVariable
envVariable will not have any Config1 and Config2 values
Updated particular row's color does not change
loadComplete: function() {
var i, names=this.p.groupingView.sortnames[0], l = names.length;
for (i=0;i<l;i++) {
if (names[i]==='envVariable') {
$(this).jqGrid('groupingToggle',this.id+"ghead_"+i);
} else {
// hide the grouping row
$('#'+this.id+"ghead_"+i).hide();
}
}
var getColumnIndexByName = function(grid, columnName) {
var cm = grid.jqGrid('getGridParam','colModel'),i=0,l=cm.length;
for (; i<l; i++) {
if (cm[i].name===columnName) {
return i; // return the index
}
}
return -1;
};
var iCol = getColumnIndexByName($(this),'isEqual'),
cRows = this.rows.length, iRow, row, className;
for (iRow=0; iRow<cRows; iRow++) {
row = this.rows[iRow];
className = row.className;
if ($.inArray('jqgrow', className.split(' ')) > 0) { // $(row).hasClass('jqgrow')
if(row.cells[iCol].title=="false") //here i identify isEqual's value
{
if ($.inArray('myAltRowClass', className.split(' ')) === -1) {
row.className = className + ' myAltRowClass';
}
}
}
}
}
It seems to me, that what you really try to implement is grouping of the data by subCategory. I strictly recommend you to look at the official demo page of jqGrid to see different possibilities which it can.
Your code have one more general problem. You use name and index properties inside of colModel items in the form 'attribute[0].firstValue' which is not permitted. The name property and, in case of the local data also index property, can't contain any special characters. What you need to read your JSON data is to use additional jsonmap property:
{ name: 'firstValue', index: 'firstValue', width: 350, jsonmap:'attribute.0.firstValue' },
{ name: 'secondValue', index: 'secondValue', width: 350,jsonmap:'attribute.0.secondValue' }
Additionally you should define one more column which you will use for grouping of the data:
{ name: 'subCategory', index: 'subCategory' }
To use grouping you should add following options in the jqGrid definition:
grouping: true,
groupingView: {
groupField: ['subCategory'],
groupOrder: ['desc'],
groupDataSorted : true,
groupColumnShow: [false],
groupText: ['<b>{0} - {1} Item(s)</b>']
}
The setting groupColumnShow: [false] hide the subCategory column used in grouping.
If you want to hide the grouping header over all groups excepting the "envVariable" group and collapse "envVariable" group you can do this in the following way:
loadComplete: function() {
var i, names=this.p.groupingView.sortnames[0], l = names.length;
for (i=0;i<l;i++) {
if (names[i]==='envVariable') {
$(this).jqGrid('groupingToggle',this.id+"ghead_"+i);
} else {
// hide the grouping row
$('#'+this.id+"ghead_"+i).hide();
}
}
}
After all you will have the following:
After the click on the "+" icon in the grouping header of the "envVariable" group the details will be shown:
The corresponding demo you will find here. I included page: function() { return 1; } in the jsonReader additionally to show correct page number.
If you want to see only "envVariable" text in the grouping header you should replace groupText: ['<b>{0} - {1} Item(s)</b>'] to groupText: ['{0}'].
这篇关于类似于jqGrid中的treegrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
