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