樹形結構是描述層次數據的常見方法。本文介紹的樹形結構生成程序主要由一個ASP頁面、二個JavaScript函數構成。該樹
形結構是異步的，也就是說，節點數據僅在必要時才讀取，而不是一次性全部發送到客戶端。




一、概述

樹形結構中所有的節點都必須包含以下屬性：本身的ID，父節點的ID，以及本節點的說明（節點文本）。本文用到了一個
Access數據庫Tree.mdb來保存這些節點信息。Tree.mdb包含表tblTree，其定義如下：
字段名稱 類型 說明
ElementID 自動編號 節點的唯一標識
ParentElementID 數字 父節點的ID
ElementText 文本 節點文本



本程序利用Tree.dsn文件定義Tree.mdb數據源。Tree.dsn內容可以用控制面板中的ODBC數據源配置程序得到，內容如下：

[ODBC]
DRIVER=Microsoft Access Driver (*.mdb)
UID=admin
UserCommitSync=Yes
Threads=3
SafeTransactions=0
PageTimeout=5
MaxScanRows=8
MaxBufferSize=512
ImplicitCommitSync=Yes
FIL=MS Access
DriverId=25
DefaultDir=d:Inetpubwwwroot
DBQ=d:InetpubwwwrootTree.mdb
注意運行本文程序時，應當修改Tree.dsn中的DefaultDir和DBQ，使其指向正確的目錄和文件。

客戶端功能分兩部分實現：其一是一個普通的瀏覽器窗口，其二為一個IFRAME。IFRAME是不可見的，它的作用是負責瀏覽器
窗口與服務器之間的通信。下面是示例程序的一個運行界面：





【圖1】

樹形結構各個節點之間的關系可以用< DIV >標記表示如下：





【圖2】

在這里，文檔的< BODY >是第一層節點（divTree0）的容器，第一層總共包含四個節點，這四個節點又分別是其子節點組的
容器。例如，上圖中divTree0包含了div1、div2、div3和div4（它們分別對應一個節點）；而div1又是divTree1的容器，
divTree1包含了div5——div8，div5又是divTree5的容器；而divTree5包含了div9……。

鼠標單擊事件由各個節點本身（div1，div2，……）響應，而不是由容器響應。節點響應鼠標單擊事件后將禁止事件進一步
向上（向父節點）傳遞。這部分功能在GetTree函數內實現，請參見該函數代碼以了解具體實現方法。

整個樹形結構的作用過程可用下圖表示：





【圖3】

二、服務器端代碼

客戶端腳本向服務器發送的請求包含了一個節點標識，服務器腳本GetTreeData.asp查找數據庫獲得該節點的所有子字節點，
并將這些子節點返回給客戶程序。GetTreeData.asp代碼如下:

< % Dim rstTree
Dim strSQL
Dim strData

If Request.QueryString("Level") = "" Then
Response.End
End If

strSQL = "SELECT * FROM tblTree WHERE ParentElementId = "
strSQL = strSQL & Request.QueryString("Level") & " ORDER BY ElementID "

Set rstTree = Server.CreateObject("ADODB.Recordset")
rstTree.Open strSQL,"FileDSN=d:inetpubwwwroot ree.dsn"

strData = ""
Do While Not rstTree.EOF
strData = strData & rstTree("ElementId") & " " & rstTree("ParentElementId") & " " &
rstTree("ElementText") & " "
rstTree.MoveNext
Loop
rstTree.Close % >

< HTML >
< BODY OnLoad="parent.PopulateTree(＇< %=strData% >＇);" >< /BODY >
< /HTML >
注意：在實際使用中應相應地更改DSN文件所在路徑。這段代碼并不復雜，但請注意以下兩點：第一，客戶請求的格式應該為
“GetTreeData.asp?Level=節點ID”；第二，返回客戶端的節點列表格式為“節點標識 父節點標識 節點文本 ……”。 （出處：熱點網絡）