實現樹型結構(第二部分)
作者：ACE 最后更新：06/08/2000 類別：原創

在上一部分，我們討論了如何讀取數據，并得到了表示層次關系的結果集。在這一部分，我們來看如何用腳本語言實現類似 MSDN 的界面。

可以在服務器端也可以在客戶端完成這樣的功能，這就要看需要了。在服務器端完成需要占用服務器的處理時間及相關資源，在客戶端完成需要瀏覽器支持腳本語言(一般是 JavaScript)，并要下載執行腳本。

在我們的示例里采用客戶端執行腳本的方法。

1. 將數據發送到瀏覽器

看下列代碼：

Dim GetRSString
Dim cnn
Dim rs
Dim l_ID
l_ID = "1" '表示根節點

Set cnn = Server.CreateObject("ADODB.Connection")
Set rs = Server.CreateObject("ADODB.RecordSet")
cnn.Open "Provider=SQLOLEDB;.......................略
rs.Open "sp_listfile " & l_ID,cnn

GetRSString = rs.GetString(2,,"?quot;","~~") 'adClipString
rs.Close
Set rs = Nothing
cnn.Close
Set cnn = Nothing

Response.Write "<FORM id='rs' name='rs'>" &_
"<INPUT type='hidden' id='rsCache' name='rsCache' value='" & GetRSString & "'></FORM>" &_
"<SCRIPT language=JavaScript src='Listfile.js'></SCRIPT>" &_
"<Script language=Javascript>LoadRecords(" + l_ID + ");</Script>"

在上面的代碼中，用 GetString 的方法得到了以 ?quot;和~~ 分隔的字符串，并用隱藏表單進行存儲。 Listfile.js 里的腳本實現了我們想要得功能，LoadRecords 是其中的一個函數。

2. Listfile.js 中的腳本

這是全部代碼：

function ToggleDisplay(oButton, oItems)
{
if ((oItems.style.display == "")
(oItems.style.display == "none")) {
oItems.style.display = "block";
oButton.src = book_open.src;
} else {
oItems.style.display = "none";
oButton.src = book_close.src;
}

}
function LoadRecords(l_ID) {
var strRecords=document.all("rsCache").value;
var arrRecords=strRecords.split("~~");
var arrFields;
var Current_level;
var Current_ID;
var strTemp;
var strList;
var Prior_ID;
var Prior_level=-1;
var i;
var j;
Prior_ID=l_ID;
strList = "<TABLE><TR><TD height=300 valign=top class=Newscontents><!--" + l_ID + "-->";
for (i=0;i<arrRecords.length;i++)
{
arrFields=arrRecords[i].split("?quot;");
Current_level = arrFields[0];
Current_ID = arrFields[1];
if (arrFields[2] == 0)
{
strTemp = "<DIV><IMG SRC='http://www.okasp.com/techinfo/images/plus.gif' ID='i_" + Current_ID +
"' onclick='ToggleDisplay(i_" + Current_ID + ",f_" +
Current_ID + "_d);' width=31 height=15 style='position:relative;left:" +
(Current_level*17) + ";top:3;cursor:hand;'> <A ID='f_" + Current_ID +
"' style='position:relative;left:" + (Current_level*17) +
";cursor:hand;' onclick='ToggleDisplay(i_" + Current_ID + ",f_" +
Current_ID + "_d);'>" + arrFields[3] + "</A></DIV><DIV ID='f_" +
Current_ID + "_d' style='display: none;'><!--" + Current_ID + "--></DIV>";
if (Current_level > Prior_level)
{
strTemp += "<!--LEVEL" + Current_level + "-->";
strList = strList.replace("<!--" + Prior_ID + "-->",strTemp);
}
else
{
if (Current_level == Prior_level)
{
strTemp += "<!--LEVEL" + Current_level + "-->";
strList = strList.replace("<!--LEVEL" + Current_level + "-->",strTemp );
}
else
{
for (j=parseInt(Current_level)+1;j<=Prior_level;j++)
{
strList = strList.replace("<!--LEVEL" + i + "-->","")
}
strTemp += "<!--LEVEL" + Current_level + "-->";
strList = strList.replace("<!--LEVEL" + Current_level + "-->",strTemp );
}
}
}
else
{
strTemp = "<DIV><IMG SRC='http://www.okasp.com/techinfo/images/message.gif' width=11 height=14 style='position:relative;left:" +
(Current_level*17+20) + ";top:2;cursor:hand;'> ";
strTemp += "<A ID='f_" + Current_ID + "' HREF='page.asp?article=" + arrFields[3] +
"' TARGET=MAIN style='position:relative;left:" + (Current_level*17 +16) +
";cursor:hand;'>" + arrFields[3] + "</A></DIV><!--LEVEL" + Current_level + "-->";
if (Current_level > Prior_level)
strList = strList.replace("<!--" + Prior_ID + "-->",strTemp);
else
strList = strList.replace("<!--LEVEL" + Current_level + "-->",strTemp);
}

Prior_ID = Current_ID;
Prior_level = Current_level;
}
strList += "</TD></TR><TR><TD height=10><img style='display:none;' " +
"src='http://www.okasp.com/techinfo/images/plus.gif' id=book_close><img style='display:none;' " +
"src='http://www.okasp.com/techinfo/images/minus.gif' id=book_open> </TD></TR></TABLE>";
document.write(strList);
}


終于寫完了，大家自己看吧，如果你有更好的主意別望了告訴我。 （出處：熱點網絡）