樹形結構是描述層次數據的常見方法。本文介紹的樹形結構生成程序主要由一個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 WHEREParentElementId = " strSQL = strSQL & Request.QueryString("Level") & " ORDER BY ElementID " Set rstTree = Server.CreateObject("ADODB.Recordset") rstTree.Open strSQL,"FileDSN=d:inetpubwwwrootree.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”;第二,返回客戶端的節點列表格式為“節點標識|父節點標識|節點文本|……”。
|