Jqgrid TreeView 邻接

Question

我在 ma 应用程序中使用 Jqgrid 树 View 模型，我可以看到它显示错误，因为不支持对象或属性我已经包含了 grid.Treeview.js 和其他 Jqgrid 脚本文件。我不知道可能是什么问题。
当我在网络中检查示例应用程序的邻接树 View 时，我尝试了同样的事情，但在 asp.net 中使用了我没有得到的本地数据。任何人都可以帮助我如何做同样的事情。
提前致谢

这是我使用的示例代码，我不知道它是否会起作用。

var myTreeGrid = new Ext.us.tree.TreeGrid({
    columns: columnsConfig,
    rootVisible: false,
    root: rootNode,
    loader: new Ext.ux.tree.TreeGridLoader({preloadChildren: true})
});
var rootNode = $('#treegridsamp').jqgrid({
    treeGrid: true,
    treeGridModel: 'adjacecncy',
    ExpandColumn: 'name',
    datatype: "local",
    mtype: 'Get',
    colNames: ['id','Name','MenuId','Menu Name'],
    colModel: [
        {name:'RowId',index:'RowId',width:300,fixed:true},
        {name:'Name',index:'Name',width:300,fixed:true},
        {name:'MenuId',index:'MenuId',width:300,fixed:true},
        {name:'MenuName',index:'MenuName',width:300,fixed:true},
    ],
    root:[
        {id:"1",Name:"Main Menu", MenuId:"1",MenuName:"Menu1"},
        {id:"2",Name:"Main Menu1",MenuId:"2",MenuName:"Menu2"},
        {id:"3",Name:"Main Menu2",MenuId:"3",MenuName:"Menu3"}
    ],
    pager: '#dvtreegridsamp',
    Caption: 'Sample Tree View Model'
})
$("#treegridsamp").jqGrid('navGrid', '#dvtreegridsamp',
    { edit: false, add: false, del: false, search: false, refresh: false });
var mydata=[
    {id:"1",    Name:"Main Menu",   MenuId:"1",MenuName:"Menu1"},
    {id:"2",    Name:"Main Menu1",  MenuId:"2",MenuName:"Menu2"},
    {id:"3",    Name:"Main Menu2",  MenuId:"3",MenuName:"Menu3"},
    {id:"1.1",  Name:"Sub Menu",    MenuId:"1",MenuName:"Menu1"},
    {id:"1.2",  Name:"Sub Menu1",   MenuId:"1",MenuName:"Menu1"},
    {id:"1.1.1",Name:"Sub Sub Menu",MenuId:"1",MenuName:"Menu1"},
    {id:"2.1",  Name:"Main Menu",   MenuId:"2",MenuName:"Menu2"},
    {id:"2.2",  Name:"Main Menu",   MenuId:"2",MenuName:"Menu2"},
    {id:"3.1",  Name:"Main Menu",   MenuId:"3",MenuName:"Menu3"},
    {id:"3.2",  Name:"Main Menu",   MenuId:"3",MenuName:"Menu3"},
];
for(var i=0;i<mydata.length;i++) {
    $("#treegridsamp").jqGrid('addRowData',i+1,mydata[i]);
}

Answer 1

您编写了一些小的简单错误，但您遇到的主要问题是您的代码是为了添加简单的行而不是树节点。您可以继续 the official demo page 并在“3.4 版中的新功能”下选择演示“树网格邻接模型”。

我编写了 the demo ，它的工作方式与 trirand 演示页面中的演示完全相同，但 仅使用本地数据 :

在您的情况下，您必须使用属性 mydata 、 level 、 parent 、 isLeaf 从 expanded 扩展对象:

var mydata = [
    {id:"1",Name:"Main Menu",MenuId:"1",MenuName:"Menu1",
     level:"0", parent:"", isLeaf:false, expanded:false},
    {id:"1_1",Name:"Sub Menu",MenuId:"1",MenuName:"Menu1",
     level:"1", parent:"1", isLeaf:false, expanded:false},
    {id:"1_1_1",Name:"Sub Sub Menu",MenuId:"1",MenuName:"Menu1",
     level:"2", parent:"1_1", isLeaf:true, expanded:false},
    {id:"1_2",Name:"Sub Menu1",MenuId:"1",MenuName:"Menu1",
     level:"1", parent:"1", isLeaf:true, expanded:false},
    {id:"2",Name:"Main Menu1",MenuId:"2",MenuName:"Menu2",
     level:"0", parent:"", isLeaf:false, expanded:true},
    {id:"2_1",Name:"Main Menu",MenuId:"2",MenuName:"Menu2",
     level:"1", parent:"2", isLeaf:true, expanded:false},
    {id:"2_2",Name:"Main Menu",MenuId:"2",MenuName:"Menu2",
     level:"1", parent:"2", isLeaf:true, expanded:false},
    {id:"3",Name:"Main Menu2",MenuId:"3",MenuName:"Menu3",
     level:"0", parent:"", isLeaf:false, expanded:false},
    {id:"3_1",Name:"Main Menu",MenuId:"3",MenuName:"Menu3",
     level:"1", parent:"3", isLeaf:true, expanded:false},
    {id:"3_2",Name:"Main Menu",MenuId:"3",MenuName:"Menu3",
     level:"1", parent:"3", isLeaf:true, expanded:false}
];

这里我修改了一点 id 值，因为点不应该在 ids 中使用。此外，我将“Main Menu1”的 expanded 状态设置为 true 以演示您可以在加载后立即自动扩展某些节点。

我将 jqGrid 定义修改为以下内容

$("#treegridsamp").jqGrid({
    datatype: "local",
    data: mydata, // will not used at the loading,
                  // but during expanding/collapsing the nodes
    colNames:['id','Name','MenuId','Menu Name'],
    colModel:[
        {name:'id',index:'id',width:100,hidden:true},
        {name:'Name',index:'Name',width:150},
        {name:'MenuId',index:'MenuId',width:100},
        {name:'MenuName',index:'MenuName',width:100}
    ],
    height:'auto',
    //pager : "#ptreegrid",
    sortname: 'id',
    treeGrid: true,
    treeGridModel: 'adjacency',
    treedatatype: "local",
    ExpandColumn: 'Name',
    caption: "Sample Tree View Model"
});

我隐藏了“id”列并减小了网格大小。要添加数据，我使用了 addJSONData 方法，因为它会设置树节点

$("#treegridsamp")[0].addJSONData({
    total: 1,
    page: 1,
    records: mydata.length,
    rows: mydata
});

结果你会收到

你可以看到现场演示 here 。

更新 :如果您使用 jqGrid 4.0 或更高版本，如果您想要扩展，那么为树节点设置 loaded:true 属性很重要。例如，在上面的例子中，“Main Menu1”项是一个节点( isLeaf:false )，应该显示扩展( expanded:true )，所以应该为项定义添加 loaded:true :

{id:"2", Name:"Main Menu1", MenuId:"2", MenuName:"Menu2",
 level:"0", parent:"", isLeaf:false, expanded:true, loaded:true}

有关更多示例，请参阅 here 、 here 、 here 和 here 。

更新 2 :要使排序正常工作，必须使用 parent:null 或 parent:"null" 而不是 parent:"" 有关更多详细信息，请参阅 here。