beauty_beast

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

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

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


Configuration.java 配置文件管理類
DbHelper.java 數據庫連接幫助類
VelocityEngineFactory.java 模板引擎工廠類
tree.properties JDBC配置、JNDI配置、是否采用DATASOURCE、js生成文件路徑、velocity模板文件路徑
velocotiy.properties 設置字符集以及模板路徑
Node.java 從實現步驟看出是核心的數據對象類，主要屬性 節點id(關鍵字）、節點名稱、節點對應url、
節點狀態（控制節點是否顯示）、父節點id、子節點數組、節點類型（枝節點還是葉節點）
從節點類可以看出相對應的表結構：
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)
可以通過創建同名的視圖將相關展現的表結構轉換。

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

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

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

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

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

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