beauty_beast

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

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

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 設(shè)置字符集以及模板路徑
Node.java 從實(shí)現(xiàn)步驟看出是核心的數(shù)據(jù)對象類，主要屬性 節(jié)點(diǎn)id(關(guān)鍵字）、節(jié)點(diǎn)名稱、節(jié)點(diǎn)對應(yīng)url、
節(jié)點(diǎn)狀態(tài)（控制節(jié)點(diǎn)是否顯示）、父節(jié)點(diǎn)id、子節(jié)點(diǎn)數(shù)組、節(jié)點(diǎn)類型（枝節(jié)點(diǎn)還是葉節(jié)點(diǎn)）
從節(jié)點(diǎn)類可以看出相對應(yīng)的表結(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)建同名的視圖將相關(guān)展現(xiàn)的表結(jié)構(gòu)轉(zhuǎn)換。

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

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

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

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

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

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