C#發現之旅：高性能ASP.NET樹狀列表控件開發詳解（四）——目標HTML代碼設計與表格嵌套策略

目標HTML代碼設計原則

Web控件最終輸出必須是瀏覽器可直接渲染的HTML。為實現樹狀層級結構，經過嘗試比較，決定採用<TABLE>標籤嵌套方案：每個節點佔據一行，子節點包裹在父節點單元格內的子表格中，通過遞歸嵌套自然表達層級關係。

HTML樣本代碼解析

演示文件treeviewsample.htm中，節點「10359 成先生」及其子節點的HTML片段展示了核心結構：

<table cellspacing="0" cellpadding="0" border="1" bordercolor="black" width="187">
  <tr>
    <td valign="top" align="left" width="16" background="SkyTreeViewControl_line.gif" height="16">
      <img id="NodeID_expend" src="SkyTreeViewControl_expend.gif">
    </td>
    <td valign="top">
      <img id="NodeID_icon" height="16" src="SkyTreeViewControl_open.bmp">
      <a id="NodeID_text">10359 成先生</a>
      <table id="NodeID_table" cellspacing="0" cellpadding="0" border="1" bordercolor="black">
        <tr>
          <td valign="top" align="left" width="16" height="16">
            <img src="SkyTreeViewControl_child.gif">
          </td>
          <td valign="top" nowrap>
            <img id="IDAIL4QC_icon" src="SkyTreeViewControl_default.bmp">
            <a id="IDAIL4QC_text">餅干</a>
          </td>
        </tr>
        <tr>...</tr>
        <tr>
          <td valign="top" align="left" width="16" height="16">
            <img src="SkyTreeViewControl_lastchild.gif">
          </td>
          <td valign="top" nowrap>
            <img id="IDAWL4QC_icon" src="SkyTreeViewControl_default.bmp">
            <a id="IDAWL4QC_text">溫馨奶酪</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

關鍵細節：

• 第一列td寬度固定16px，背景圖片line.gif模擬垂直連接線；展開圖標expend.gif置於其中。
• 第二列包含節點圖標（open.bmp表示展開狀態）、文本鏈接及子節點表格。
• 子節點表格各行第一列使用child.gif（中間節點）或lastchild.gif（最後節點）區分連接線樣式。
• 所有元素賦予唯一ID（NodeID_expend, NodeID_icon, NodeID_text, NodeID_table等），便於客戶端腳本精確定位操作。

控件的核心任務即生成上述結構化HTML，生成方式可在服務端（C#）或客戶端（XSLT轉換）完成，本系列採用XSLT雙端通用方案。