algo similar a treegrid en jqGrid
Quiero expandir un árbol solo cuando sea necesario.
p.ej:OS Type
es un nodo hoja que no se expande, peroMemory
tiene subcategorías, por lo que se expande
Entonces, ¿qué debo usar para lograr algo similar, ya que en la subcuadrícula jqGrid cada fila tiene una expansión, que no quiero aquí
Mi código (tomado de tu ejemplo)
$('#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;
SisubCategory == envVariable debería mostrar un+
símbolo para expandir
Esto es lo que se me ocurrió hasta ahora, también miConfig1
yConfig2
columnas no vienen
En la imagen de arribaSSASERVERLOGSDIR
, SSABIN
ytusc.tusc-RUN
debería venir debajo deenvVariable
basado en la comprobación de subCategory == envVariable
envVariable
no tendrá ningunaConfig1
yConfig2
valore
Actualizad el color de la fila particular no cambia
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';
}
}
}
}
}