ExtJS的使用方法匯總(3)——樹形結(jié)構(gòu)
在應(yīng)用程序中，我們經(jīng)常需要顯示或處理樹狀結(jié)構(gòu)的對(duì)象信息，比如部門信息和地區(qū)信息，樹是一種非常典型的數(shù)據(jù)結(jié)構(gòu)，這些信息都可以用樹來表示。對(duì)于傳統(tǒng)的HTML頁面來說，完全依靠手動(dòng)編碼來實(shí)現(xiàn)樹是比較困難的，因?yàn)樾枰獙懞芏嗟腏S代碼，對(duì)基于AJAX異步加載來說尤其如此，不但涉及AJAX數(shù)據(jù)異步加載，還需要考慮跨瀏覽器支持，處理起來非常麻煩，EXT中提供了現(xiàn)成的樹控件，通過這些控件，可以在B/S應(yīng)用中快速開發(fā)出包含樹形信息結(jié)構(gòu)的應(yīng)用。
本文就是詳細(xì)介紹樹形結(jié)構(gòu)的使用過程和實(shí)例。
一、創(chuàng)建一棵樹
樹控件由Ext.tree.TreePanel類定義，控件的名稱為TreePanel，TreePanel類繼承自Panel面板，在EXT中使用樹控件非常簡單，我們先來看一下代碼（包含配置信息）。
這里的參數(shù)tree表示渲染的DOM的id.HTML中應(yīng)該要要有<div id="tree"></div>相對(duì)應(yīng)，最后這棵樹就出現(xiàn)在這個(gè)div的位置上。
在獲得了樹形面板后，就必須要設(shè)置根，因?yàn)楸仨氂辛烁趴梢陨L枝節(jié)，最后生成完整的樹，所以根是必須的。具體實(shí)現(xiàn)的效果如圖1所示。
圖1 只有根的樹
二、為樹生枝展葉
上面的實(shí)例代碼生成一棵沒有根的樹，下面的代碼就為樹添加枝和葉，代碼清單如下：
效果圖如圖2所示：
圖2 完整的樹控件
注意：我們一方面可以通過修改<div id="tree" style="height:300px;"></div>來設(shè)置div高度；同時(shí)也可以設(shè)置treePanel的autoHeight屬性為tree，則可以自動(dòng)計(jì)算高度，否則展開的樹形控件看不到枝葉。
三、使用TreeLoader獲得數(shù)據(jù)
使用上面的錄入方式來獲取數(shù)據(jù)不僅麻煩，而且還容易出錯(cuò)，Ext.tree.TreeLoader可以利用從后臺(tái)獲取的數(shù)據(jù)為我們組裝出一棵樹來，我們只需要提供數(shù)據(jù)，讓treeLoader完成數(shù)據(jù)轉(zhuǎn)換和裝配節(jié)點(diǎn)的操作。
（1）我們要為TreePanel配置一個(gè)TreeLoader，如下面代碼所示：
（2）這里的TreeLoader僅包含一個(gè)參數(shù){dataUrl:'data.txt'},這個(gè)dataUrl表示在樹完成渲染后從何處讀取數(shù)據(jù)。data.txt內(nèi)容如下：
(3) 現(xiàn)在查看頁面依然只能看到根，沒有讀取數(shù)據(jù)并顯示到頁面上，因?yàn)槲覀兪褂玫腡reeNode不支持Ajax，我們需要將其改成AsyncTreeNode,這樣才可以實(shí)現(xiàn)我們想要的異步加載效果，如下面的代碼所示：
注意:必須將root.expand(true,true)修改成root.expand()避免無限循環(huán)展開樹枝。
四、讀取本地JSON數(shù)據(jù)
讀取本地JSON其實(shí)是一種是用使用TreeLoader的另類方法。因?yàn)橛袝r(shí)候樹形的數(shù)據(jù)并不多，為了獲取少量的數(shù)據(jù)而是用AJAX訪問后臺(tái)實(shí)在不劃算。首先為TreePanel設(shè)置一個(gè)參數(shù)為空的TreeLoader，如下面代碼所示：
然后，設(shè)置一個(gè)根節(jié)點(diǎn)，并為這個(gè)根節(jié)點(diǎn)設(shè)置children屬性，如下面代碼所示：
這里需要注意幾點(diǎn)：
(1) 必須設(shè)置TreeLoader,否則根節(jié)點(diǎn)會(huì)一直處于在讀取狀態(tài)，無法獲得children中定義的子節(jié)點(diǎn)
(2) 根節(jié)點(diǎn)必須是AsyncTreeNode,如果是TreeNode,也無法生成子節(jié)點(diǎn)
(3) 子節(jié)點(diǎn)中的葉子節(jié)點(diǎn)必須都加上leaf:true，否則會(huì)一直顯示讀取狀態(tài)。
五、右鍵菜單
樹形彈出的右鍵菜單效果圖如圖3所示：
圖3 右鍵菜單效果
具體實(shí)現(xiàn)步驟如下：
(1) 制作自定義菜單，如下面的代碼所示：
(2) 綁定contextmenu時(shí)間，如下面代碼所示：
六、修改節(jié)點(diǎn)的默認(rèn)圖標(biāo)
實(shí)際上，每個(gè)樹形節(jié)點(diǎn)都有icon和iconCls屬性，他們負(fù)責(zé)制定節(jié)點(diǎn)的圖標(biāo)，現(xiàn)在我們來修改樹種節(jié)點(diǎn)的圖標(biāo)，無論是通過new手工創(chuàng)建的節(jié)點(diǎn)，還是通過JSON讀取到的節(jié)點(diǎn)，設(shè)置方式都是一樣，如下面代碼所示：
七、從節(jié)點(diǎn)彈出對(duì)話框
下面的代碼可以讓對(duì)話框看起來像是從標(biāo)題上飛出來的：
八、節(jié)點(diǎn)提示信息
當(dāng)我們把鼠標(biāo)停留在某個(gè)節(jié)點(diǎn)的上方時(shí)，便會(huì)出現(xiàn)提示信息，為了實(shí)現(xiàn)這種效果，我們需要對(duì)提供的JSON數(shù)據(jù)做一些修改，在JSON中添加對(duì)應(yīng)的節(jié)點(diǎn)提示信息，我們給每個(gè)節(jié)點(diǎn)數(shù)據(jù)都加上qtip:'xxx'參數(shù)，這個(gè)節(jié)點(diǎn)就可以顯示提示信息了。
不過，僅僅為JSON添加這個(gè)參數(shù)還不能在頁面上顯示提示信息，需要先在JS中對(duì)EXT的提示功能進(jìn)行初始化。
上面這行代碼必須在其他功能加載前完成，建議寫在onReady函數(shù)的第一行。具體代碼如下：
九、為節(jié)點(diǎn)設(shè)置超鏈接
雖然我們完全可以監(jiān)聽click事件，但是直接在節(jié)點(diǎn)樹形中設(shè)置超鏈接的地址也是一個(gè)好主意，這是很多人想實(shí)現(xiàn)的功能，具體的代碼如下：
如對(duì)本文有疑問，請(qǐng)?zhí)峤坏浇涣髡搲瑥V大熱心網(wǎng)友會(huì)為你解答??！ 點(diǎn)擊進(jìn)入論壇
