ColumnTree的用法

<!-- /* 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