ColumnTree的用法
這幾天以為有需求 就研究了一下 extjs 的 gridtree , 準確的說是 ColumnTree
首先 , 我們可以在 ext 的官方網站上找 ColumnTree 的 demo,
這個是 ext 的官方 demo 網址 http://www.extjs.com/products/js/
這個是 ColumnTree 的 demo 網址 http://www.extjs.com/deploy/dev/examples/tree/column-tree.html
其實 , 只要你有 ext 的程序包 , 就可以在 ext-2.2.1/examples/tree 找到這個 demo 的源碼
好了 下面我們開始研究 ColumnTree 的 demo
首先 打開這個網頁 column-tree.html
要在 ext2.2 上使用 ColumnTree , 需要加上這兩個文件 .
這個這個就是 ColumnTree 的 demo 源碼 ,
仔細研究下就可以了解 ColumnTree 是怎樣生成的 .
接下來是我自己在工作中的 ColumnTree 的源碼 , 希望可以給大家一些幫助
function GridTreeUserRole()
{
var tree = new Ext.tree.ColumnTree({
width: 550,
height: 300,
rootVisible:false,
autoScroll:true,
title: ' 用戶權限 ',
region:'center',
columns:[{
header:' 用戶 _ 功能 ',
width:150,
dataIndex:'user'
},{
header:' 程序 ',
width:300,
dataIndex:'program'
}],
loader: new Ext.tree.TreeLoader({
dataUrl:'ASPX/UserRole.aspx?action=gridtreelist',
uiProviders:{
'col': Ext.tree.ColumnNodeUI
}
}),
root: new Ext.tree.AsyncTreeNode({
text:'Tasks'
})
});
return tree;
}
下面是我通過 url: ASPX/UserRole.aspx?action=gridtreelist 得到的數據源
只要各位的 url 能得到這樣的 json 格式數據 , ColumnTree 就能跟 grid 一樣顯示出來
[{ user: 'admin',fun:'',program: ' 做法資料管理 ',uiProvider:'col',cls:'master-task',iconCls:'task-folder',
children:
[{ user:' 新增 ',fun:' 新增 ',program:'',uiProvider:'col',cls:'master-task',leaf:true,iconCls:'task'},
{ user:' 查看 ',fun:' 查看 ',program:'',uiProvider:'col',cls:'master-task',leaf:true,iconCls:'task'}]},
{user: 'WQY',fun:'',program: ' 做法資料管理 ',uiProvider:'col',cls:'master-task',iconCls:'task-folder',
children:
[{ user:' 新增 ',fun:' 新增 ',program:'',uiProvider:'col',cls:'master-task',leaf:true,iconCls:'task'},
{ user:' 查看 ',fun:' 查看 ',program:'',uiProvider:'col',cls:'master-task',leaf:true,iconCls:'task'}]}
]
以上 by Tin