类似于jqGrid中的treegrid

我希望只在需要时才展开树。

例如： OS Type是一个叶子节点，它不会扩展，但Memory有子类别，因此它会扩展

那么我应该用什么来实现类似的东西，因为在jqGrid子网格中每一行都有一个扩展，我不想在这里

我的代码（取自你的例子）

 $('#compareContent').empty(); $('
'+ ''+ '
') .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("
"); $.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 = 'Some HTML text which corresponds the row with id='+row_id+'
'+ ''+ ''+ ''; $("#" + 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 ，我的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; 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 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'; } } } } } 

Answer 1

在我看来，您真正尝试实现的是通过subCategory对数据进行subCategory 。 我严格建议你查看jqGrid的官方演示页面，看看它可以有多种可能性。

您的代码还有一个更普遍的问题。 您可以在'attribute[0].firstValue'forms的colModel项目中使用name和index属性，这是不允许的。 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: ['{0} - {1} Item(s)'] } 

设置groupColumnShow: [false]隐藏分组中使用的subCategory列。

如果要在除“envVariable”组之外的所有组上隐藏分组标题并折叠“envVariable”组，则可以通过以下方式执行此操作：

 loadComplete: function() { var i, names=this.p.groupingView.sortnames[0], l = names.length; for (i=0;i 

毕竟你将拥有以下内容：

单击“envVariable”组的分组标题中的“+”图标后，将显示详细信息：

你会在这里找到相应的演示。 我包括page: function() { return 1; } 另外在jsonReader中显示正确的页码。

如果您只想在分组标题中看到“envVariable”文本，则应将groupText: ['{0} - {1} Item(s)'] groupText: ['{0}']为groupText: ['{0}'] 。