jqGrid 树形网格，以编程方式展开节点

Question

我正在尝试 jqGrid 树网格功能。谁能解释为什么“expandNode”方法在此示例中不起作用？ （在 Chrome 和 JQ 1.4.2 下测试）。

注意 1：我无法使用任何展开或折叠方法来执行任何操作。它们更改图标的外观，但子行不会消失。如果我手动单击该图标，外观会发生变化并且子行会按预期隐藏。

注2：展开/折叠ROW和展开/折叠NODE有什么区别？

注 3：我在 jqGrid wiki 上找到了一些关于使用 setTimeOut 的条目，但我认为这是 与想要在初始加载时扩展所有内容有关。我想根据点击来完成此操作，如此处所示。

$(document).ready(function() {

    var table = $("<table id=treegrid></table>");

    $("body").append(table);

    grid = $("#treegrid");

    /* DIRECT COPY FROM SO http://stackoverflow.com/questions/6788727/jqgrid-tree-grid-with-local-data */
    var mydata = [
        { id:"1", name:"Cash",   num:"100", debit:"400.00",credit:"250.00", balance:"150.00", enbl:"1",
          level:"0", parent:"",  isLeaf:false, expanded:false, loaded:true },
        { id:"2", name:"Cash 1", num:"1",   debit:"300.00",credit:"200.00", balance:"100.00", enbl:"0",
          level:"1", parent:"1", isLeaf:false, expanded:false, loaded:true },
        { id:"3", name:"Sub Cash 1", num:"1",debit:"300.00",credit:"200.00", balance:"100.00", enbl:"1",
          level:"2", parent:"2", isLeaf:true,  expanded:false, loaded:true },
        { id:"4", name:"Cash 2", num:"2",debit:"100.00",credit:"50.00", balance:"50.00", enbl:"0",
          level:"1", parent:"1", isLeaf:true,  expanded:false, loaded:true },
        { id:"5", name:"Bank\'s", num:"200",debit:"1500.00",credit:"1000.00", balance:"500.00", enbl:"1",
          level:"0", parent:"",  isLeaf:false, expanded:true, loaded:true },
        { id:"6", name:"Bank 1", num:"1",debit:"500.00",credit:"0.00", balance:"500.00", enbl:"0",
          level:"1", parent:"5", isLeaf:true,  expanded:false, loaded:true },
        { id:"7", name:"Bank 2", num:"2",debit:"1000.00",credit:"1000.00", balance:"0.00", enbl:"1",
          level:"1", parent:"5", isLeaf:true,  expanded:false, loaded:true },
        { id:"8", name:"Fixed asset", num:"300",debit:"0.00",credit:"1000.00", balance:"-1000.00", enbl:"0",
          level:"0", parent:"",  isLeaf:true,  expanded:false, loaded:true }
        ],

    grid = $("#treegrid");

    grid.jqGrid({
        datatype: "jsonstring",
        datastr: mydata,
        colNames:["Id","Account","Acc Num","Debit","Credit","Balance","Enabled"],
        colModel:[
            {name:'id', index:'id', width:1, hidden:true, key:true},
            {name:'name', index:'name', width:180},
            {name:'num', index:'acc_num', width:80, align:"center"},
            {name:'debit', index:'debit', width:80, align:"right"},
            {name:'credit', index:'credit', width:80,align:"right"},
            {name:'balance', index:'balance', width:80,align:"right"},
            {name:'enbl', index:'enbl', width: 60, align:'center',
             formatter:'checkbox', editoptions:{value:'1:0'},
             formatoptions:{disabled:false}}
        ],
        height: 'auto',
        gridview: true,
        rowNum: 10000,
        sortname: 'id',
        treeGrid: true,
        treeGridModel: 'adjacency',
        treedatatype: "local",
        ExpandColumn: 'name',
        caption: "Demonstrate how to use Tree Grid for the Adjacency Set Model",
        jsonReader: {
            repeatitems: false,
            root: function (obj) { return obj; },
            page: function (obj) { return 1; },
            total: function (obj) { return 1; },
            records: function (obj) { return obj.length; }
        }
    });
    /* END DIRECT COPY */    

    var f = $("<button>ExpandCash</button>");

    $("body").append(f);

    // Test reloading and summarization changes
    f.bind("click",function() {
        var rec = $("#treegrid").getRowData("1");
        //console.log(JSON.stringify(rec));
        $("#treegrid").expandNode(rec);
        $("#treegrid").expandRow(rec);
    });

});

Answer 1

我能够通过使用以下代码瞄准根节点（然后是第二个标题；我的网格有 3 层深）来使其展开：

function Expand() {
   var rows = $("#treeGrid").jqGrid('getRootNodes');
   for (var i = 0; i < rows.length; i++){
        var childRows = $("#treeGrid").jqGrid('getNodeChildren', rows[i]);
        $("#treeGrid").jqGrid('expandNode', rows[i]);    
        $("#treeGrid").jqGrid('expandRow', rows[i]);
        for (var j = 0; j < childRows.length; j++) {
            $("#treeGrid").jqGrid('expandNode', childRows[j]);    
            $("#treeGrid").jqGrid('expandRow', childRows[j]);
        }
    }
}

放置在一个简单的单击函数中，这将展开所有节点。数据格式不重要，但我使用了 json 数据。嵌套“for”循环并不总是最好的方法，但我没有看到另一个适合我的解决方案；不过，除非您有大量嵌套节点，否则它应该不会太糟糕。

注意：此代码对树形网格的级别数敏感；您将需要额外的循环（或其他方法）超过 3 个级别（级别 0 = 根，级别 1 = 第一个标头，级别 2 = 叶），并且不需要 2 级树的内部循环