如何使用ASP指令碼製作非同步裝載的樹形結構(一)

來源:互聯網
上載者:User
指令碼|非同步 樹形結構是描述層次資料的常見方法。本文介紹的樹形結構產生程式主要由一個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”;第二,返回用戶端的節點列表格式為“節點標識|父節點標識|節點文本|……”。



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。