<!-- /* Font Definitions */ @font-face {font-family:SimSun; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-alt:宋体; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} @font-face {font-family:新細明體; panose-1:2 2 3 0 0 0 0 0 0 0; mso-font-alt:PMingLiU; mso-font-charset:136; mso-generic-font-family:roman; mso-font-pitch:variable; mso-font-signature:3 135135232 22 0 1048577 0;} @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:1; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:variable; mso-font-signature:0 0 0 0 0 0;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-1610611985 1073750139 0 0 159 0;} @font-face {font-family:"/@SimSun"; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} @font-face {font-family:"/@新細明體"; panose-1:2 2 3 0 0 0 0 0 0 0; mso-font-charset:136; mso-generic-font-family:roman; mso-font-pitch:variable; mso-font-signature:3 135135232 22 0 1048577 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin:0cm; margin-bottom:.0001pt; mso-pagination:none; font-size:12.0pt; mso-bidi-font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:新細明體; mso-fareast-theme-font:minor-fareast; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-font-kerning:1.0pt;} a:link, span.MsoHyperlink {mso-style-priority:99; color:blue; mso-themecolor:hyperlink; text-decoration:underline; text-underline:single;} a:visited, span.MsoHyperlinkFollowed {mso-style-noshow:yes; mso-style-priority:99; color:purple; mso-themecolor:followedhyperlink; text-decoration:underline; text-underline:single;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} /* Page Definitions */ @page {mso-page-border-surround-header:no; mso-page-border-surround-footer:no;} @page Section1 {size:595.3pt 841.9pt; margin:72.0pt 90.0pt 72.0pt 90.0pt; mso-header-margin:42.55pt; mso-footer-margin:49.6pt; mso-paper-source:0; layout-grid:18.0pt;} div.Section1 {page:Section1;} -->
這幾天以為有需求 就研究了一下 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
<script type="text/javascript" src="ColumnNodeUI.js"></script>
<link rel="stylesheet" type="text/css" href="column-tree.css" />
要在 ext2.2 上使用 ColumnTree , 需要加上這兩個文件 .
這個這個就是 ColumnTree 的 demo 源碼 ,
<script type="text/javascript" src="column-tree.js"></script>
仔細研究下就可以了解 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