beauty_beast

關于樹型控件相關的開源項目很多，但實際使用中總覺得使用的不是得心應手，在實際項目中也開發(fā)過相關的樹型控件，去年用了幾乎三周的時間，將相關控件設計、功能都做了一定的完善。和大家分享一下，大家在實際的開發(fā)使用中可以參考，做的比較匆忙，不妥之處，還請大家多指正。為了以后作調(diào)整走讀代碼時間快點，故寫這篇文章，備忘。
1、主要功能：
a、只支持數(shù)據(jù)庫方式
b、支持一次裝載所有節(jié)點（適合數(shù)據(jù)量較小，節(jié)點數(shù)低于2000個）
動態(tài)裝載任意節(jié)點以及一層子節(jié)點（適合數(shù)據(jù)量較多的情況，在頁面動態(tài)加載）
c、支持設置是否要動態(tài)刷新
d、顯示標注選擇節(jié)點狀態(tài)
e、理論支持應用中可以使用多個樹型控件

2、主要采用的技術
a、javascript,xmlhttp，DOM
b、velocity模板
c、通過div顯示/隱藏節(jié)點內(nèi)容
3、核心算法
遞歸算法
4、樹型控件的實現(xiàn)步驟
一次裝載所有節(jié)點
a、根據(jù)動態(tài)數(shù)據(jù)封裝層次節(jié)點對象列表
b、將對應的層次節(jié)點對象列表轉(zhuǎn)換為javsscript中層次節(jié)點對象列表 (采用生成JS文件的方式)
c、根據(jù)javsscript中層次節(jié)點對象動態(tài)生成Html
動態(tài)裝載任意節(jié)點
初始裝載時和一次裝載類似，不過一次只裝載本身節(jié)點和子節(jié)點數(shù)據(jù)。
當頁面點擊節(jié)點時，
a、根據(jù)動態(tài)數(shù)據(jù)封裝本身節(jié)點和子節(jié)點對象列表（采用了xmlhttp技術）
b、根據(jù)點擊節(jié)點對象動態(tài)增加相關節(jié)點的Html（采用了velocity模板技術）

5、主要對象以及資源文件介紹
依賴jar: log4j-1.2.8.jar、velocity-dep-1.4.jar，數(shù)據(jù)庫驅(qū)動


Configuration.java 配置文件管理類
DbHelper.java 數(shù)據(jù)庫連接幫助類
VelocityEngineFactory.java 模板引擎工廠類
tree.properties JDBC配置、JNDI配置、是否采用DATASOURCE、js生成文件路徑、velocity模板文件路徑
velocotiy.properties 設置字符集以及模板路徑
Node.java 從實現(xiàn)步驟看出是核心的數(shù)據(jù)對象類，主要屬性 節(jié)點id(關鍵字）、節(jié)點名稱、節(jié)點對應url、
節(jié)點狀態(tài)（控制節(jié)點是否顯示）、父節(jié)點id、子節(jié)點數(shù)組、節(jié)點類型（枝節(jié)點還是葉節(jié)點）
從節(jié)點類可以看出相對應的表結(jié)構(gòu)：
create table TREE_NODE
(
NODEID VARCHAR2(32) not null,
NODENAME VARCHAR2(64),
NODEURL VARCHAR2(1000),
PARENTID VARCHAR2(32),
STATUS VARCHAR2(10) default 'closed'
)
alter table TREE_NODE add constraint PK_TREE_NODE primary key (NODEID)
可以通過創(chuàng)建同名的視圖將相關展現(xiàn)的表結(jié)構(gòu)轉(zhuǎn)換。

TreeBuilder.java 這是整個樹型控件實現(xiàn)的核心類，是個抽象類

抽象方法（具體實現(xiàn)方式有可能是XML,數(shù)據(jù)庫等）：
public abstract Node[] getAllNodes();
獲取所有的節(jié)點數(shù)組
public abstract Node getNodeById(String id);
根據(jù)關鍵字獲取節(jié)點對象
public abstract Node[] getRelationNodes(String parentId);
根據(jù)節(jié)點id獲取其關聯(lián)的相關子節(jié)點以及自身的節(jié)點數(shù)組
public String getSearchNodeHTML(String id, int splitlength)
根據(jù)節(jié)點id生成對應的頁面html字符串（動態(tài)載入，需要有對應的模板文件。實現(xiàn)步驟b）
public void createJSFile(String oriFileName, boolean isRecreate)
生成js文件,可控制是否重新創(chuàng)建,遍歷的方法主要順序如下：
createJSFile-->generateScript-->buildTree
-->createJSByRecursion
其他的方法可參考相關注釋
DBTreeBuilder是TreeBuilder的子類，實現(xiàn)了TreeBuilder相關的抽象方法。

整體功能還沒有完全開發(fā)完畢，原先設計考慮是還有一個工場類 可以控制根據(jù)不同的場景調(diào)用不同的DBTreeBuilder類，這樣可以實現(xiàn)應用中可以使用多個樹型控件，多個時相關的生成JS文件有性能瓶頸也要做調(diào)整.等有時間再完善。
客戶端相關核心代碼 tree.js和synctree.js
兩者唯一的區(qū)別就是是否var isAsync=false|true
該js文件完成客戶端節(jié)點對象的構(gòu)造、相關圖片配置、根據(jù)生成的js文件展現(xiàn)樹型結(jié)構(gòu)，以及頁面點擊事件的處理

整個頁面的調(diào)用過程如下：
請求頁面創(chuàng)建 DBTreeBuilder實例，根據(jù)實際需要動態(tài)刷新創(chuàng)建相對應的節(jié)點js文件，然后在請求頁面中裝載相對應的tree.js和
節(jié)點js文件，通過tree.js中的printTree函數(shù)構(gòu)造整個樹，最后頁面輸出整個樹。
如果是動態(tài)裝載的樹，用戶實際點擊某個節(jié)點時，通過xmlhttp向server發(fā)出請求，通過傳遞過來的節(jié)點參數(shù)，通過'getSearchNodeHTML'方法根據(jù)相關的模板生成相對應的節(jié)點字符串，根據(jù)請求返回的字符串，動態(tài)改變點擊節(jié)點對應的div對象內(nèi)的html內(nèi)容。

代碼中
dispaly.jsp為一次裝載的例子
sync.html 為動態(tài)裝載的例子
如有興趣可以和我聯(lián)系，代碼量1000多行。

今天看了有很多感興趣的同行，比較意外，索性讓有興趣的人下載
http://m.tkk7.com/Files/beauty_beast/project_tree_pub.rar
為了節(jié)省文件空間，lib庫中只保留了velocity-dep-1.4.jar,其他的jar包比較通用，大家自己找相關jar,運行的例子中的WEB_INF/lib庫也要加入。
運行例子要求：
1、生成數(shù)據(jù)庫腳本
2、修改配置文件相關信息
說明：相關代碼未經(jīng)充分測試，僅供交流。