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

來源:互聯網
上載者:User
指令碼|非同步 三、用戶端代碼

   下面是程式的啟動頁面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 >
   該頁面裝載時將執行Renderer.js中的GetTree函數。HTML代碼中的IFRAME部分實現了用戶端和伺服器端的通訊機制。
JavaScript函數GetTree的代碼如下:

 function GetTree() {
  if (event.type == 'load') {
  if (typeof(divTree0)!='object')
  GetData.window.location.href = 'GetTreeData.asp?Level=0';
  } else {
  try {
  objManip = eval('divTree' + event.srcElement.getAttribute('ElementId'));
  if (objManip.style.display == 'none') {
  objManip.style.display = '';
  } else {
  objManip.style.display = 'none';
  }
  } catch (e) {
  GetData.window.location.href = 'GetTreeData.asp?Level=' + event.srcElement.getAttribute('
ElementId');
  }
  event.cancelBubble = true;
  }
 }
   當文檔裝載時,onload事件被觸發,GetTree函數得以執行。函數檢查容器divTree0是否存在,並為IFRAME(ID為
GetData)讀取第一層節點(這些節點的父節點ID為0)。如前所述,所有的節點都必須處理按一下滑鼠事件,而且事件控制代碼都是
GetTree函數。當某個節點(如div1)接收到一個滑鼠事件時,程式將執行GetTree函數中的else部分。如果發送該事件的節點已
經讀取了子節點,則程式檢查這些子節點是否已經顯示,然後切換子節點的顯示狀態,從而實現了該層節點的擴充或摺疊效果。檢
查子節點是否顯示的if語句封裝在一個try塊內,因此當子節點不存在時,程式將執行catch部分,調用伺服器指令碼
GetTreeData.asp讀取子節點內容。最後,程式設定event.cancelBubble = true,目的是禁止上一層容器處理該事件。

   伺服器指令碼GetTreeData.asp返回的HTML代碼類如:

 < HTML >
  < BODY OnLoad="parent.PopulateTree('1|0|節點1|2|0|節點2|3|0|節點3|4|0|節點4|');" >
  < /BODY >
 < /HTML >
   可以看到,這裡的Onload事件又調用了另外一個JavaScript函數PopulateTree。PopulateTree函數代碼如下:

 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);
 }
   我們已經知道,PopulateTree函數由onLoad事件調用,它的參數是一個字串,比如上例中的“1|0|節點1|2|0|節點
2|3|0|節點3|4|0|節點4|”,它是一個“節點標識|父節點標識|節點文本|……”的列表。

   如果某個節點不含子節點,則該參數是一個Null 字元串,此時PopulateTree直接返回。如果子節點存在,則可以利用split函
數將子節點列表以數組形式儲存。再接下來,就可以建立該層節點的容器,比如divTree0,然後遍曆數組建立各個節點,如
div1,div2……。如果某個節點的父節點ID為0,說明該節點沒有父節點,程式將把容器divTree0加入文檔的BODY;否則當該節點
的父節點ID不為0,則建立與其父節點對應的容器“divTree< < 父節點ID > >”。在建立節點的同時指定了按一下滑鼠事件的控制代碼
GetTree函數。

   註:可以修改GetTreeData.asp,使其返回的子節點列表(即PopulateTree的參數)形式為“節點ID|節點文本|……”,也
就是省略父節點ID,因為任何一組子節點列表其父節點總是相同的。同時,還必須修改PopulateTree函數,使其接受兩個參數,第
一個參數是子節點列表,第二個是父節點ID。當節點數量較多時,採用這種方法有利於減少資料轉送量,提高效率。

   四、其他說明

   綜上所述,整個程式的工作過程可以描述為:

瀏覽器讀入文檔,執行GetTree函數。
GetTree調用GetTreeData.asp,讀取第一層節點資料,然後回調PopulateTree函數。
PopulateTree函數產生divTree0以及節點div1,div2,……。
使用者單擊任意一個節點。
GetTree函數檢查 “divTree< < 節點ID > >” 是否已經存在,如存在則切換子節點顯示狀態,否則讀取子節點列表。
GetTreeData.asp返回子節點列表,回調PopulateTree函數。
PopulateTree產生相應的容器“divTree< < 父節點ID > >”,並產生節點“Div< < 節點ID1 > >”,“div< < 節點ID2 >
>”……。
重複步驟4。
   運行樣本程式步驟如下(預設目錄d:Inetpubwwwroot):

建立一個目錄,把所有檔案拷貝到該目錄。
在Web伺服器上發布該目錄。
修改Tree.dsn中的資料庫路徑。
修改GetTreeData.asp中Tree.dsn檔案路徑。
用瀏覽器開啟Tree.htm。
   樣本程式中的IFRAME是隱藏的,如果要顯示它,則請刪除IFRAME的屬性“STYLE="display:none"”,此時還可以查看節點
的HTML原始碼



相關文章

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。