jqGrid中类似于treegrid的东西 [英] something similar to treegrid in jqGrid
问题描述
我希望仅在需要时才扩展树.
eg: OS Type 是叶节点，它不展开，但Memory 有子类别，所以它展开
那么我应该用什么来实现类似的东西，因为在 jqGrid 子网格中每一行都有一个扩展，我不希望在这里
我的代码(取自您的示例)
$('#compareContent').empty();$('我的 JSON
var myJson={回复": [{id":m1"，子类别":系统"，"elementName": "osname",属性": [{"id":"m1_s1",名称":操作系统名称"，"firstValue": "Linux
","secondValue": "HP-US1000
"}],isEqual":假，isPrasentinXml1":假，isPrasentinXml2":假},{id":m2"，子类别":系统"，"elementName": "主机名",属性": [{"id":"m2_s1",名称":主机名"，"firstValue": "estilo
","secondValue": "奔驰
"}],isEqual":假，isPrasentinXml1":假，isPrasentinXml2":假},{id":m3"，"subCategory":"envVariable","elementName": "SSASERVERLOGSDIR",属性": [{"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":真，isPrasentinXml1":假，isPrasentinXml2":假},{id":m4"，"subCategory":"envVariable","elementName": "SSABIN",属性": [{"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":真，isPrasentinXml1":假，isPrasentinXml2":假},{id":m5"，"subCategory":"envVariable","elementName": "tusc.tusc-RUN",属性": [{"id":"m5_s1",名称":信息"，firstValue":解压缩"},{"id":"m5_s2",名称":名称"，firstValue":tusc.tusc-RUN"},{"id":"m5_s3",名称":版本"，第一个值":#"}],isEqual":假，isPrasentinXml1":是的，isPrasentinXml2":假}]}，网格2；
如果 subCategory == envVariable 它应该显示一个 + 符号来展开
这是我到现在为止的想法，我的 Config1 和 Config2 列也没有出现
在上图中SSASERVERLOGSDIR、SSABIN和tusc.tusc-RUN应该在envVariable下检查 subCategory==envVariable
envVariable 不会有任何 Config1 和 Config2 值
更新特定行的颜色不会改变
loadComplete: function() {var i, names=this.p.groupingView.sortnames[0], l = names.length;对于 (i=0;i 0) {//$(row).hasClass('jqgrow')if(row.cells[iCol].title=="false")//这里我识别isEqual的值{if ($.inArray('myAltRowClass', className.split(' ')) === -1) {row.className = className + 'myAltRowClass';}}}}}
解决方案 在我看来，您真正尝试实现的是按 subCategory 对数据进行分组.我强烈建议您查看 jqGrid 的官方演示页面，了解它可以实现的不同可能性.
您的代码还有一个更普遍的问题.您在 colModel 项目中使用 name 和 index 属性，格式为 'attribute[0].firstValue'不允许.name 属性，如果是本地数据，还有 index 属性，不能包含任何特殊字符.您需要读取 JSON 数据是使用额外的 jsonmap 属性:
{ name: 'firstValue', index: 'firstValue', width: 350, jsonmap:'attribute.0.firstValue' },{名称:'secondValue'，索引:'secondValue'，宽度:350，jsonmap:'attribute.0.secondValue'}
此外，您应该再定义一列，用于对数据进行分组:
{ 名称:'subCategory'，索引:'subCategory' }
要使用分组，您应该在 jqGrid 定义中添加以下选项:
分组:真，分组视图:{groupField: ['subCategory'],groupOrder: ['desc'],groupDataSorted:真，groupColumnShow:[假]，groupText:['<b>{0} - {1} 个项目</b>']}
设置groupColumnShow: [false]隐藏分组中使用的subCategory列.
如果您想在除envVariable"组之外的所有组上隐藏分组标题并折叠envVariable"组，您可以通过以下方式执行此操作:
loadComplete: function() {var i, names=this.p.groupingView.sortnames[0], l = names.length;对于 (i=0;i
毕竟你将拥有以下内容:
单击envVariable"组的分组标题中的+"图标后，将显示详细信息:
您将在这里找到相应的演示.我包括 page: function() { return 1;jsonReader 中的 } 额外显示正确的页码.
如果您只想在分组标题中看到envVariable"文本，您应该替换 groupText: ['<b>{0} - {1} Item(s)</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
",
"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;
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屋！
查看全文
