Question

我正在尝试使用jqGrid treegrid功能。任何人都可以解释为什么'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'循环并不总是最好的方法，但我没有看到另一个对我有用的解决方案;除非你有大量的嵌套节点，否则它应该不错。

注意：此代码对您的treegrid具有的级别数量敏感;你将需要额外的循环（或另一种方法）超过3个级别（级别0 =根，级别1 =第一个标题，级别2 =叶子），并且不需要2级树的内部循环

jqGrid treegrid，以编程方式展开节点

1 个答案: