C#發現之旅：高性能ASP.NET樹狀列表控件開發詳解（五）——HTML結構與客戶端腳本設計

目標HTML代碼結構分析

樹狀列表最終在瀏覽器中以HTML表格嵌套形式呈現。每個節點佔據一個表格行（<tr>），節點文本後跟隨一個<table>容器承載子節點，通過遞歸嵌套實現層級結構。以下是關鍵設計要點：

節點唯一標識與四部分組成

每個節點擁有唯一ID（如NodeID），節點行分為四個單元格區域：

1. 展開/收縮控制元素：第一個單元格放置圖片（<img id="NodeID_expend">），展開時顯示SkyTreeViewControl_expend.gif，收縮時顯示SkyTreeViewControl_collapse.gif。若非父節點最後一個子節點，設置背景圖片模擬連接線。
2. 節點圖標區域：第二個單元格包含圖標（<img id="NodeID_icon">），擁有SrcBack擴展屬性存儲備用圖標路徑，動態切換src與SrcBack實現展開/收縮圖標變化（如open.bmp與default.bmp）。
3. 節點文本顯示：使用<a id="NodeID_text">標籤顯示文本。
4. 子節點容器：若有子節點，文本後放置<table id="NodeID_table">，通過JavaScript控制其display樣式（none/空字符串）實現顯示/隱藏。

客戶端腳本設計

採用JavaScript賦予靜態HTML動態交互能力：

• 點擊展開/收縮圖標時，切換子節點表格的display樣式。
• 同步更新節點圖標（交換src與SrcBack屬性值）。
• 高亮顯示當前選中節點文本。

為兼容性考慮，使用標準DOM方法getAttribute/setAttribute操作擴展屬性，避免依賴IE專有的obj.SrcBack語法。

XML數據島技術應用

為簡化部署，利用IE專有的<XML>數據島將XML與XSLT內嵌入HTML頁面，僅需單一文件即可生成樹狀列表。示例：

<XML ID="XMLIslandID">
  <METADATA>
    <AUTHOR>John Smith</AUTHOR>
    ...
  </METADATA>
</XML>

通過XMLIslandID.XMLDocument獲取XML DOM對象，利用onreadystatechange事件處理加載完成邏輯。注意：此技術限制控件僅能在IE中運行，跨瀏覽器場景需另行方案。