Jqgrid树视图邻接 [英] Jqgrid Tree View Adjacencey

查看：82
本文介绍了Jqgrid树视图邻接的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在ma应用程序中使用Jqgrid树视图模型，我看到的是它显示错误，因为不支持对象或属性，我包含了grid.Treeview.js和其他Jqgrid脚本文件.我不知道可能是什么问题. 当我在网络中检查示例应用程序的邻接树视图时，我尝试了相同的操作，但是在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]);
}

解决方案

您编写了一些简单的小错误，但主要的问题是使您的代码添加了简单的行而不是树节点.您可以进入官方演示页面，然后在"3.4版新功能"下选择演示树网格邻接模型".

我写了该演示，其工作原理与来自trirand演示页面的演示，但仅使用本地数据:

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

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值，因为不应在id中使用点.另外，我将主菜单1"的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
});

结果您将收到

您可以在此处观看演示直播.. /p>

更新:如果使用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}

有关更多示例，请参见此处，此处，此处.

更新2 :要正确进行排序，必须使用 parent:null或parent:"null"而不是parent:"" ，请参见

解决方案

You code small simple errors, but the main problem which you have is that your code are made to add simple rows and not tree nodes. You can go on the official demo page and choose under "New in version 3.4" the demo "Tree Grid Adjacency model".

I wrote the demo which work exactly like the demo from the demo from the trirand demo page, but use only local data:

In you case you have to extend the objects from mydata with the properties 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}
];

Here I modified a little id values, because points should not used in ids. Additionally I set the expanded status of the "Main Menu1" to true to demonstrate only that you can expanded some nodes automatically immediately after the loading.

I modified the jqGrid definition to the following

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

I made the 'id' column hidden and reduced the grid size. To add the data I used addJSONData method because it will set the tree nodes 

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

As the result you will receive

You can see the demo live here.

UPDATED: If you use jqGrid version 4.0 or higher it is important to set loaded:true property for the tree nodes if you want have expanded. For example in the above example the "Main Menu1" item is a node (isLeaf:false) which should be display expanded (expanded:true), so one should add loaded:true for the item definition:

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

For more examples see here, here, here and here.

UPDATED 2: To have sorting work correctly one have to use parent:null or parent:"null" instead of parent:"" see here for more details.

这篇关于Jqgrid树视图邻接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆