2.1 表示層實現
類似Windows資源管理器的文件夾模式，節點的圖片樣式如表1所示。對于每個節點的DHTML 代碼，需要包含節點的位置、前導圖片、樣式、針對該節點的其他操作等。同時為了節點顯示的連貫性，還需一些前導圖片。
表1 樹節點的前的圖片樣式表
對于樹的非葉子節點，圖片和節點信息等，采用一個DIV ( division) 容器包含。DIV 等容器是DHTML 的基礎，使用它可以通過腳本程序對其屬性進行操作，如設置其style 樣式的display 屬性來控制子節點的展開和隱藏。節點的位置、前導圖片、樣式、針對該節點的其他的操作等都放入容器中，例：
＜ DIV id =mParentID＞
＜ IMG align = center border = 0 onclick =″nodeExpand (‘leafid’)″ name = m1Tree src =′Tplus.gif′＞
＜ IMG align = center border = 0 name = m1Folder src =′folderClosed. gif′＞ 計算機學院 ＜/p＞
葉子節點無需容器直接輸出即可。
當點擊某節點前的“ + ”、“ - ”圖片時通過DIV 的style 樣式的display 屬性控制子節點的展開和隱藏。display：“none”(隱藏,不可見)，display：“block”(顯示) 。相關JavaScript 代碼如下：
if (expandChild.style.display = =″none″){
// 當前為隱藏狀態,執行展開動作
this.Loading(parentObject);//判斷該分支的數據是否已經加載
expandChild.style.display =″block″;
if (para2 = =″last″)
parentObject.src =″Lminus. gif″; // 最后一個節點
else
parentObject.src = ″Tminus. gif″; // 顯示┠
expandFolder.src = ″folderOpen. gif″;
}else {
// 將當前節點的子節點全部隱藏
expandChild.style.display = ″none″;
if (para2 = = ″last″)
parentObject.src = ″Lplus. gif″;
else
parentObject.src = ″Tplus. gif″;
expandFolder.src = ″folderClosed. gif″;
}
2.2 樹型表結構設計
我們以數據庫為載體記錄節點的變化，樹型表結構至少要有以下字段：節點的編號(CLASSID) ,對節點的描述(ClassName)，父節點的編號(ParentId)，這些是構建樹結構所必須的信息。同時引入節點的類別代碼（ClassCode），節點的級別（ClassLevel），是否葉子節點 (Terminated)等輔助字段，記錄節點次序，實體關系圖如圖3所示。
圖 3 樹型表結構示意圖
樹遍歷的時間復雜度是O( n )，但是將樹信息存放到數據庫后，就不能按傳統的方式遍歷樹，必須使用SQL 語句訪問數據庫表的內容，而一次性取的數據量越多，消耗的資源也越多，用戶等待的時間就越長。如果將無序的數據從數據庫中讀出，在服務器端，必須將排序后的樹送到客戶端顯示。因此，最好從數據庫讀出已排好序的樹。
我們知道，字符串排序是按照字典序形式。結合SQL 語句的特點和樹結構特點，數據庫表中，節點的類別代碼采用多級字符串形式，如AAABBBCCC，從樹根節點開始，每向下一級字符串就增加一級，并且子節點類別代碼以父節點類別代碼開始，再開始本級的類別代碼。同級的節點按照生成的順序編號，如節點類別代碼為AAA 的下一級孩子類別代碼為AAAAAA，AAAAAB 等，AAAAAB 的孩子節點為AAAAABAAA、AAAAABAAB等。每一級編號字符的寬度與實際的應用關聯，如AAA～ZZZ 一級則有263 個節點，如果不夠用再增加一個字符用于編碼。該巧妙的編號方式。使得在執行SQL 語句select * from tree_class order by classcode 后，一次獲得完整的先序.
原文鏈接:http://www.7dspace.com/doc/44/0512/2005122906292220003.htm