Posted on 2006-02-23 16:00
柳隨風 閱讀(3834)
評論(18) 編輯 收藏 所屬分類:
J2EE
關于樹型控件相關的開源項目很多，但實際使用中總覺得使用的不是得心應手，在實際項目中也開發過相關的樹型控件，去年用了幾乎三周的時間，將相關控件設計、功能都做了一定的完善。和大家分享一下，大家在實際的開發使用中可以參考，做的比較匆忙，不妥之處，還請大家多指正。為了以后作調整走讀代碼時間快點，故寫這篇文章，備忘。
1、主要功能：
a、只支持數據庫方式b、支持一次裝載所有節點（適合數據量較小，節點數低于2000個）動態裝載任意節點以及一層子節點（適合數據量較多的情況，在頁面動態加載）c、支持設置是否要動態刷新d、顯示標注選擇節點狀態e、理論支持應用中可以使用多個樹型控件2、主要采用的技術
a、javascript,xmlhttp，DOMb、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、修改配置文件相關信息
說明：相關代碼未經充分測試，僅供交流。