jqGrid中类似于treegrid的东西

Question

我希望仅在需要时才扩展树。

例如：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';
                        }
                    }
                }
            }

        }

Answer 1

在我看来，您真正尝试实现的是按subCategory 对数据进行分组。我强烈建议您查看 jqGrid 的官方演示页面，了解它可以实现的不同可能性。

您的代码还有一个更普遍的问题。您在 colModel 项目内以 'attribute[0].firstValue' 的形式使用 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: ['<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。我在jsonReader 中添加了page: function() { return 1; } 以显示正确的页码。

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