C# 高效能開發實戰：XSLT TreeNode 模板完整代碼與關鍵技術細節（下）

TreeNode 模板完整 XSLT 代碼

<xsl:template name="TreeNode">
  <xsl:param name="Level">0</xsl:param>
  <xsl:variable name="NodeID">
    <xsl:choose>
      <xsl:when test="string-length(ID) > 0"><xsl:value-of select="ID"/></xsl:when>
      <xsl:otherwise><xsl:value-of select="generate-id(.)"/></xsl:otherwise>
    </xsl:choose>
  </xsl:variable>
  <xsl:variable name="ShowChildNode"><xsl:if test="$Level < 1">1</xsl:if></xsl:variable>
  <xsl:variable name="ChildCount"><xsl:value-of select="count(Nodes/Node)"/></xsl:variable>
  <xsl:variable name="HasChild"><xsl:if test="$ChildCount > 0 or string-length(XMLSource) > 0">1</xsl:if></xsl:variable>
  <tr>
    <td valign="top" align="left" width="16" height="16">
      <xsl:choose>
        <xsl:when test="$HasChild = '1'">
          <xsl:if test="position() != last()">
            <xsl:attribute name="background">SkyTreeViewControl_line.gif</xsl:attribute>
          </xsl:if>
          <img>
            <xsl:attribute name="id"><xsl:value-of select="concat($NodeID,'_expend')"/></xsl:attribute>
            <xsl:choose>
              <xsl:when test="$ShowChildNode != '1' and position() != last()">
                <xsl:attribute name="src">SkyTreeViewControl_collapse.gif</xsl:attribute>
                <xsl:attribute name="SrcBack">SkyTreeViewControl_expend.gif</xsl:attribute>
              </xsl:when>
              <xsl:when test="$ShowChildNode = '1' and position() != last()">
                <xsl:attribute name="src">SkyTreeViewControl_expend.gif</xsl:attribute>
                <xsl:attribute name="SrcBack">SkyTreeViewControl_collapse.gif</xsl:attribute>
              </xsl:when>
              <xsl:when test="$ShowChildNode != '1' and position() = last()">
                <xsl:attribute name="src">SkyTreeViewControl_lastcollapse.gif</xsl:attribute>
                <xsl:attribute name="SrcBack">SkyTreeViewControl_lastexpend.gif</xsl:attribute>
              </xsl:when>
              <xsl:when test="$ShowChildNode = '1' and position() = last()">
                <xsl:attribute name="src">SkyTreeViewControl_lastexpend.gif</xsl:attribute>
                <xsl:attribute name="SrcBack">SkyTreeViewControl_lastcollapse.gif</xsl:attribute>
              </xsl:when>
            </xsl:choose>
            <xsl:attribute name="onclick">SkyTreeViewControlExpendNodeByID('' , false );</xsl:attribute>
          </img>
        </xsl:when>
        <xsl:otherwise>
          <xsl:if test="position() != last()"><img src="SkyTreeViewControl_child.gif"/></xsl:if>
          <xsl:if test="position() = last()"><img src="SkyTreeViewControl_lastchild.gif"/></xsl:if>
        </xsl:otherwise>
      </xsl:choose>
    </td>
    <td valign="top" nowrap="1">
      <img align="absmiddle" width="16" height="16">
        <xsl:attribute name="onclick">SkyTreeViewControlExpendNodeByID('' , true );</xsl:attribute>
        <xsl:attribute name="id"><xsl:value-of select="concat($NodeID,'_icon')"/></xsl:attribute>
        <xsl:choose>
          <xsl:when test="string-length(Icon) != 0">
            <xsl:attribute name="SrcBack"><xsl:value-of select="Icon"/></xsl:attribute>
            <xsl:attribute name="src"><xsl:value-of select="Icon"/></xsl:attribute>
          </xsl:when>
          <xsl:when test="$HasChild = '1' and $ShowChildNode = '1'">
            <xsl:attribute name="SrcBack">SkyTreeViewControl_close.bmp</xsl:attribute>
            <xsl:attribute name="src">SkyTreeViewControl_open.bmp</xsl:attribute>
          </xsl:when>
          <xsl:when test="$HasChild = '1' and $ShowChildNode != '1'">
            <xsl:attribute name="SrcBack">SkyTreeViewControl_open.bmp</xsl:attribute>
            <xsl:attribute name="src">SkyTreeViewControl_close.bmp</xsl:attribute>
          </xsl:when>
          <xsl:otherwise><xsl:attribute name="src">SkyTreeViewControl_default.bmp</xsl:attribute></xsl:otherwise>
        </xsl:choose>
      </img>
      <a class="SkyTreeViewControl_TreeNode" valign="top">
        <xsl:attribute name="id"><xsl:value-of select="concat($NodeID,'_text')"/></xsl:attribute>
        <xsl:attribute name="onclick">SkyTreeViewControlExpendNodeByID('' , true );</xsl:attribute>
        <xsl:if test="OnClick != ''"><xsl:attribute name="onclick"><xsl:value-of select="OnClick"/></xsl:attribute></xsl:if>
        <xsl:if test="Link != ''"><xsl:attribute name="href"><xsl:value-of select="Link"/></xsl:attribute></xsl:if>
        <xsl:if test="string-length(XMLSource) > 0">
          <xsl:attribute name="XMLSource"><xsl:value-of disable-output-escaping="yes" select="XMLSource"/></xsl:attribute>
        </xsl:if>
        <xsl:value-of select="concat(' ',Text)"/>
      </a>
      <xsl:if test="$ChildCount > 0">
        <table border="0" cellspacing="0" cellpadding="0">
          <xsl:attribute name="id"><xsl:value-of select="concat($NodeID,'_table')"/></xsl:attribute>
          <xsl:if test="$ShowChildNode != '1'"><xsl:attribute name="style">display:none</xsl:attribute></xsl:if>
          <xsl:for-each select="Nodes/Node">
            <xsl:call-template name="TreeNode">
              <xsl:with-param name="Level"><xsl:value-of select="$Level + 1"/></xsl:with-param>
            </xsl:call-template>
          </xsl:for-each>
        </table>
      </xsl:if>
      <xsl:if test="string-length(XMLSource) > 0">
        <span style="display:none" class="SkyTreeViewControl_TreeNode">
          <xsl:attribute name="id"><xsl:value-of select="concat($NodeID,'_Loading')"/></xsl:attribute>
          <br/><xsl:text>正在載入<img src="..."/></xsl:text>
        </span>
      </xsl:if>
    </td>
  </tr>
</xsl:template>

關鍵技術細節總結

1. ID 生成策略： 優先使用資料層提供的 ID（Guid），回退至 generate-id()，解決跨 XML 文件 ID 衝突。
2. 狀態驅動圖示： 透過 src/SrcBack 雙屬性交換，無需額外請求即可完成展開/摺疊視覺切換。
3. 位置感知渲染： 利用 position() 與 last() 區分首/中/尾節點，輸出對應連接線與圖示變體（_last* 系列）。
4. 遞迴參數傳遞： Level 逐層遞增，控制預設展開深度（ShowChildNode）。
5. 動態載入掛點： XMLSource 寫入 DOM 屬性，_Loading span 預埋載入動畫，實現無縫按需載入體驗。
6. disable-output-escaping： 確保 XMLSource 中的特殊字元（如 &）正確輸出至 HTML 屬性。

此模板展現了 XSLT 在複雜 UI 結構生成中的強大表達力，配合客戶端 transformNode 實現高效能渲染。