1

I can't quite get my JQGrid treegrid to expand correctly. Its is a hierarchical adjacency grid.

When I expand the root node, the subnodes expand and indent correctly but they arent placed directly under the node.

Is there something wrong with my json data? Id like to have nodes that are expandable appear first and leaf nodes appear below them.

Example is here: http://jsfiddle.net/yNw3C/3194/ (I've renamed all nodes bob, but the weird expanding behaviour can still be seen)

$(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; }
    }
});        

});
4

2 回答 2

3

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

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

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

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

于 2013-07-01T11:53:53.413 回答
0

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

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

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

于 2013-07-01T10:26:06.667 回答