我只想在需要时扩展一棵树。
例如：OS Type是不扩展的叶节点，但是Memory具有子类别，因此可以扩展
所以我应该用什么来实现类似的效果，因为在jqGrid子网格中，每一行都有一个扩展，在这里我不希望这样
我的代码（摘自您的示例）
$('#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 });
我的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;
如果subCategory == envVariable，则应显示
+符号以展开这是我到目前为止想出的，我的
Config1和Config2列也没有出现在上图中，根据检查subCategory == envVariable，
SSASERVERLOGSDIR，SSABIN和tusc.tusc-RUN应该位于envVariable下envVariable将没有任何Config1和Config2值更新的特定行的颜色不变
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';
}
}
}
}
}
最佳答案
在我看来，您真正尝试实现的是按subCategory对数据进行分组。我严格建议您查看jqGrid的官方演示页面，以了解它可以实现的各种可能性。
您的代码还有一个更普遍的问题。您不能以name形式在index项内使用colModel和'attribute[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} Item(s)</b>']
}
设置
groupColumnShow: [false]隐藏分组中使用的subCategory列。如果要隐藏除“ envVariable”组之外的所有组上的分组标题，然后折叠“ envVariable”组，则可以按以下方式进行：
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();
}
}
}
毕竟，您将获得以下内容：
单击“ envVariable”组的分组标题中的“ +”图标后，将显示详细信息：
您将在here中找到相应的演示。我在
page: function() { return 1; }中还包括了jsonReader，以显示正确的页码。如果只想在分组标题中看到“ envVariable”文本，则应将
groupText: ['<b>{0} - {1} Item(s)</b>']替换为groupText: ['{0}']。关于javascript - 类似于jqGrid中的treegrid，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6662475/