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

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

问题描述

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

这是我正在使用的示例代码，而且我不知道它是否有效.

var myTreeGrid = new Ext.us.tree.TreeGrid({列:列配置，根可见:假，根:根节点，加载器:新的 Ext.ux.tree.TreeGridLoader({preloadChildren: true})});var rootNode = $('#treegridsamp').jqgrid({树网格:是的，treeGridModel: '邻接',ExpandColumn: '名称',数据类型:本地"，mtype:'获取'，colNames: ['id','Name','MenuId','Menu Name'],col型号:[{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},],根:[{id:"1",Name:"主菜单", MenuId:"1",MenuName:"Menu1"},{id:"2",Name:"Main Menu1",MenuId:"2",MenuName:"Menu2"},{id:"3",Name:"Main Menu2",MenuId:"3",MenuName:"Menu3"}],寻呼机:'#dvtreegridsamp',标题:示例树视图模型"})$("#treegridsamp").jqGrid('navGrid', '#dvtreegridsamp',{假，添加:假，删除:假，搜索:假，刷新:假})；变量我的数据=[{id:"1", Name:"主菜单", 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:"子菜单", MenuId:"1",MenuName:"Menu1"},{id:"1.2", Name:"Sub Menu1", MenuId:"1",MenuName:"Menu1"},{id:"1.1.1",Name:"子子菜单",MenuId:"1",MenuName:"Menu1"},{id:"2.1", Name:"主菜单", MenuId:"2",MenuName:"Menu2"},{id:"2.2", Name:"主菜单", MenuId:"2",MenuName:"Menu2"},{id:"3.1", Name:"主菜单", MenuId:"3",MenuName:"Menu3"},{id:"3.2", Name:"主菜单", MenuId:"3",MenuName:"Menu3"},];for(var i=0;i

解决方案

您编写了一些简单的小错误，但您遇到的主要问题是您的代码是为了添加简单的行而不是树节点.您可以继续观看演示.

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

{id:"2", Name:"Main Menu1", MenuId:"2", MenuName:"Menu2",级别:0"，父级:"，isLeaf:false，expanded:true，loaded:true}

有关更多示例，请参阅此处，这里，这里和这里.

更新 2:要使排序正常工作，必须使用 parent:null 或 parent:"null" 而不是parent:"" 参见 这里了解更多详情.

I am using Jqgrid Tree View model in ma application and what i can see is that it shows error as object or property is not supported i have included grid.Treeview.js and other Jqgrid script file. I dont know what can be the issue. And when i checked the sample application in net for adjacency tree view and i tried the same thing but in asp.net with local data which i did not get. Can any one help me how to do the same. Thanks in advance

This is the sample code that im using and more over i dont whether will it work or not.

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]);
}

解决方案

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屋！

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