JQGrid treegrid没有像预期的那样扩展

Question

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

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

我的json数据有什么问题吗？我喜欢让可扩展的节点先出现，叶节点出现在它们下面。

例子是在这里：http://jsfiddle.net/yNw3C/3194/（我已经改名为所有节点鲍勃，但怪异的行为，不断扩大仍然可以看到）

$(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的输入（网格元素的id属性的值为<tr>）。

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

Answer 2

目前的jqGrid只能工作从服务器返回的数据。

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

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