JQGrid treegrid 未按预期扩展

Question

我无法让我的 JQGrid treegrid 正确展开。它是一个分层的邻接网格。

当我展开根节点时，子节点会正确展开和缩进，但它们没有直接放在节点下方。

我的 json 数据有问题吗？我想让可扩展的节点首先出现，叶节点出现在它们下方。

示例在这里：http://jsfiddle.net/yNw3C/3194/（我已将所有节点重命名为 bob，但仍然可以看到奇怪的扩展行为）

$(function () {

    var mydata = [{"id":"5a1a9743-3e0f-11d3-941f-006008032006","name":"bob","level":1,"parent":"5a1a9742-3e0f-11d3-941f-006008032006","isLeaf":true,"expanded":false,"loaded":true},{"id":"9042ded8-09ee-46f9-beac-8746ed1cdd17","name":"bob","level":1,"parent":"5a1a9742-3e0f-11d3-941f-006008032006","isLeaf":true,"expanded":false,"loaded":true},{"id":"29846baa-ede0-4582-b9ed-39bcc486f2c2","name":"bob","level":1,"parent":"5a1a9742-3e0f-11d3-941f-006008032006","isLeaf":false,"expanded":false,"loaded":true},{"id":"39cc2783-811f-4885-9af6-d35b1a1385a2","name":"bob","level":1,"parent":"5a1a9742-3e0f-11d3-941f-006008032006","isLeaf":true,"expanded":false,"loaded":true},{"id":"3061ce07-bff6-4d9a-a84a-a8a7d47ebd7a","name":"bob","level":1,"parent":"5a1a9742-3e0f-11d3-941f-006008032006","isLeaf":true,"expanded":false,"loaded":true},{"id":"d1f870ed-bca6-4cc8-8b96-b19fa251c2f8","name":"bob","level":1,"parent":"5a1a9742-3e0f-11d3-941f-006008032006","isLeaf":true,"expanded":false,"loaded":true},{"id":"5a1a9742-3e0f-11d3-941f-006008032006","name":"bob","level":0,"parent":null,"isLeaf":false,"expanded":false,"loaded":true},{"id":"c80ca2d1-8210-4c11-8c6d-005c97fce9cb","name":"bob","level":1,"parent":"5a1a9742-3e0f-11d3-941f-006008032006","isLeaf":true,"expanded":false,"loaded":true},{"id":"d9dadce8-a9ce-4343-a8a0-b80844aa36ad","name":"bob","level":1,"parent":"5a1a9742-3e0f-11d3-941f-006008032006","isLeaf":true,"expanded":false,"loaded":true},{"id":"b3bc918c-4fa6-4470-afdd-d98e3586d434","name":"bob","level":1,"parent":"5a1a9742-3e0f-11d3-941f-006008032006","isLeaf":false,"expanded":false,"loaded":true},{"id":"466d78df-6f39-43ff-abfd-58e7bf91f8c8","name":"bob","level":1,"parent":"5a1a9742-3e0f-11d3-941f-006008032006","isLeaf":true,"expanded":false,"loaded":true},{"id":"be4c23b9-41a2-482f-a37a-33379ea03344","name":"bob","level":1,"parent":"5a1a9742-3e0f-11d3-941f-006008032006","isLeaf":true,"expanded":false,"loaded":true}];                


    $("#treegrid").jqGrid({
    datatype: "jsonstring",
        datastr: mydata,
    colNames: ["id", "partners"],
    colModel: [
                { name: 'id', index: 'id', hidden: true, key: true },
                { name: 'name', index: 'name', width: 500, sortable: false, classes: 'pointer' },                       
    ],
    height: 'auto',
    gridview: true,
    rowNum: 10000,
    sortname: 'name',
    treeGrid: true,
    treeGridModel: 'adjacency',           
    ExpandColumn: 'name',
    jsonReader: {
        repeatitems: false,
        root: function (obj) { return obj; },
        page: function (obj) { return 1; },
        total: function (obj) { return 1; },
        records: function (obj) { return obj.length; }
    }
});        

});

Answer 1

这只是jqGrid如何构建TreeGrid的一个小误解。您必须提供排序数据作为输入。 jqGrid 只是将所有行完全按照输入中的顺序放置到网格中。折叠的行将只是隐藏。如果用户展开节点，jqGrid 会显示所有以展开节点为父节点的行。

因此，要解决此问题，您必须使用输入数据，以便所有直接子级都应该跟随父级。可能您还需要包括不是叶子的第一个节点（具有isLeaf: false），然后是叶子的子节点（具有isLeaf: true）。此外，您应该按 sortname 选项（在您的情况下按 "name" 列）对所有节点进行排序。

顺便说一句，您可以从colModel 中删除id 列。 jqGrid默认使用输入数据的id属性作为rowid的输入（<tr>网格元素的id属性的值）。

查看更新演示http://jsfiddle.net/yNw3C/3204/

Answer 2

目前 jqGrid 只能处理从服务器返回的数据。

http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3atreegrid#options

创建一个返回 JSON 的简单网页。