利用ASP腳本制作異步裝載的樹(shù)形結(jié)構(gòu)（二）

發(fā)布時(shí)間：2008-07-10 閱讀數(shù)：次來(lái)源：網(wǎng)樂(lè)原科技

三、客戶端代碼

　　下面是程序的啟動(dòng)頁(yè)面Tree.htm：

　< HTML >
　 < SCRIPT SRC="Renderer.js" LANGUAGE="JavaScript" >< /SCRIPT >
　 < HEAD >< /HEAD >
　 < BODY ID=bodyTree NAME="bodyTree" OnLoad="GetTree();" >
　 < IFRAME ID=GetData STYLE="display:none" >< /IFRAME >
　 < /BODY >
　< /HTML >
　　該頁(yè)面裝載時(shí)將執(zhí)行Renderer.js中的GetTree函數(shù)。HTML代碼中的IFRAME部分實(shí)現(xiàn)了客戶端和服務(wù)器端的通訊機(jī)制。
JavaScript函數(shù)GetTree的代碼如下：

　　服務(wù)器腳本GetTreeData.asp返回的HTML代碼類如：

　< HTML >
　 < BODY OnLoad="parent.PopulateTree(＇1|0|節(jié)點(diǎn)1|2|0|節(jié)點(diǎn)2|3|0|節(jié)點(diǎn)3|4|0|節(jié)點(diǎn)4|＇);" >
　 < /BODY >
　< /HTML >
　　可以看到，這里的Onload事件又調(diào)用了另外一個(gè)JavaScript函數(shù)PopulateTree。PopulateTree函數(shù)代碼如下：

　function PopulateTree(strData) {
　 var arrSplitData;
　 var iCnt;
　 var objTempDiv;
　 var objMainDiv;
　
　 if (strData==＇＇) return;
　 arrSplitData = strData.split("|");
　
　 objMainDiv = document.createElement(＇DIV＇);
　 objMainDiv.id = ＇divTree＇ + arrSplitData[1];
　 objMainDiv.style.cssText = ＇position:relative;left:10px;cursor:hand;＇;
　 for (iCnt=0;iCnt< arrSplitData.length-1;iCnt+=3) {
　 objTempDiv = document.createElement(＇< DIV OnClick=＇GetTree()＇ OnSelectStart=＇return false;＇ >
＇);
　 objTempDiv.id = ＇div＇ + arrSplitData[iCnt];
　 objTempDiv.innerHTML = arrSplitData[iCnt+2];
　 objTempDiv.setAttribute(＇ElementId＇,arrSplitData[iCnt]);
　 objTempDiv.setAttribute(＇ParentElementId＇,arrSplitData[iCnt+1]);
　 objTempDiv.style.cssText = ＇position:relative;cursor:hand;color:red;width:100px;font-size:x-small;
＇;
　 objMainDiv.appendChild(objTempDiv);
　 }
　 if (arrSplitData[1]==＇0＇)
　 document.body.appendChild(objMainDiv);
　 else
　 eval(＇div＇ + arrSplitData[1]).appendChild(objMainDiv);
　}
　　我們已經(jīng)知道，PopulateTree函數(shù)由onLoad事件調(diào)用，它的參數(shù)是一個(gè)字符串，比如上例中的“1|0|節(jié)點(diǎn)1|2|0|節(jié)點(diǎn)
2|3|0|節(jié)點(diǎn)3|4|0|節(jié)點(diǎn)4|”，它是一個(gè)“節(jié)點(diǎn)標(biāo)識(shí)|父節(jié)點(diǎn)標(biāo)識(shí)|節(jié)點(diǎn)文本|……”的列表。

　　如果某個(gè)節(jié)點(diǎn)不含子節(jié)點(diǎn)，則該參數(shù)是一個(gè)空字符串，此時(shí)PopulateTree直接返回。如果子節(jié)點(diǎn)存在，則可以利用split函
數(shù)將子節(jié)點(diǎn)列表以數(shù)組形式保存。再接下來(lái)，就可以創(chuàng)建該層節(jié)點(diǎn)的容器，比如divTree0，然后遍歷數(shù)組創(chuàng)建各個(gè)節(jié)點(diǎn)，如
div1,div2……。如果某個(gè)節(jié)點(diǎn)的父節(jié)點(diǎn)ID為0，說(shuō)明該節(jié)點(diǎn)沒(méi)有父節(jié)點(diǎn)，程序?qū)讶萜鱠ivTree0加入文檔的BODY；否則當(dāng)該節(jié)點(diǎn)
的父節(jié)點(diǎn)ID不為0，則創(chuàng)建與其父節(jié)點(diǎn)對(duì)應(yīng)的容器“divTree< < 父節(jié)點(diǎn)ID > >”。在創(chuàng)建節(jié)點(diǎn)的同時(shí)指定了鼠標(biāo)單擊事件的句柄
GetTree函數(shù)。

　　注：可以修改GetTreeData.asp，使其返回的子節(jié)點(diǎn)列表（即PopulateTree的參數(shù)）形式為“節(jié)點(diǎn)ID|節(jié)點(diǎn)文本|……”，也
就是省略父節(jié)點(diǎn)ID，因?yàn)槿魏我唤M子節(jié)點(diǎn)列表其父節(jié)點(diǎn)總是相同的。同時(shí)，還必須修改PopulateTree函數(shù)，使其接受兩個(gè)參數(shù)，第
一個(gè)參數(shù)是子節(jié)點(diǎn)列表，第二個(gè)是父節(jié)點(diǎn)ID。當(dāng)節(jié)點(diǎn)數(shù)量較多時(shí)，采用這種方法有利于減少數(shù)據(jù)傳輸量，提高效率。

　　四、其他說(shuō)明

　　綜上所述，整個(gè)程序的工作過(guò)程可以描述為：

瀏覽器讀入文檔，執(zhí)行GetTree函數(shù)。
GetTree調(diào)用GetTreeData.asp，讀取第一層節(jié)點(diǎn)數(shù)據(jù)，然后回調(diào)PopulateTree函數(shù)。
PopulateTree函數(shù)生成divTree0以及節(jié)點(diǎn)div1，div2，……。
用戶單擊任意一個(gè)節(jié)點(diǎn)。
GetTree函數(shù)檢查 “divTree< < 節(jié)點(diǎn)ID > >” 是否已經(jīng)存在，如存在則切換子節(jié)點(diǎn)顯示狀態(tài)，否則讀取子節(jié)點(diǎn)列表。
GetTreeData.asp返回子節(jié)點(diǎn)列表，回調(diào)PopulateTree函數(shù)。
PopulateTree生成相應(yīng)的容器“divTree< < 父節(jié)點(diǎn)ID > >”，并生成節(jié)點(diǎn)“Div< < 節(jié)點(diǎn)ID1 > >”，“div< < 節(jié)點(diǎn)ID2 >
>”……。
重復(fù)步驟4。
　　運(yùn)行示例程序步驟如下（默認(rèn)目錄d:Inetpubwwwroot）：

創(chuàng)建一個(gè)目錄，把所有文件拷貝到該目錄。
在Web服務(wù)器上發(fā)布該目錄。
修改Tree.dsn中的數(shù)據(jù)庫(kù)路徑。
修改GetTreeData.asp中Tree.dsn文件路徑。
用瀏覽器打開(kāi)Tree.htm。
　　示例程序中的IFRAME是隱藏的，如果要顯示它，則請(qǐng)刪除IFRAME的屬性“STYLE="display:none"”，此時(shí)還可以查看節(jié)點(diǎn)
的HTML源代碼