使用XML和XSL进行高级的Web UI设计（七）


编译：alpha2002

创建具有相关层次线条的树形目录

本文要求读者熟悉JScript，MSXML，XSL/XSLT，DOM。

本文的实例代码下载 xmldtree_7.zip








概述

    本文是这一系列文章的第七篇，主要介绍如何在树形目录中添加表示层次关系的线条。使得树形目录界面可读性更好，父子节点的关系也更加清晰。主要缺点是需要处理更多的对象，同时页面上需要显示更多的图像。所幸的是浏览器加载页面文件的时间开销没有多大的变化。如图一所示，这是本文代码例子的运行画面：


图一 目录树的关系层次

    目录树的整体结构还是与前面文章中的一样，需要修改的只是树形结构的XSLT式样文件以及客户端的脚本。也就是第一篇文章中的tree.xslt和tree.js两个文件。下面就让我们来看看需要做什么样的修改。

修改 XSLT 式样文件

    实际上，表示层次关系的线条是在XSL绘制的。在式样文件中有两个地方需要修改，首先是要在节点图标的前面多加一个表格单元，这个表格单元专门用来根据展开和收缩节点的状态显示"+/-"小图像。如图二所示： 


图二 在节点表格添加表格单元

其次是在所添加的表格单元中绑定"hierarchy"模板，此模板的脚本代码如下：

<xsl:template name="hierarchy">
  <xsl:for-each select="ancestor::*[name() != contents]">
    <xsl:choose>
      <xsl:when test="following-sibling::node()">
        <img src="images/I.png"/>
      </xsl:when>
      <xsl:otherwise>
        <img src="images/blank.png"/>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:for-each>
  <xsl:choose>
    <xsl:when test="count(contents/*) > 0">
      <xsl:choose>
        <xsl:when test="following-sibling::node()">
          <img src="images/Tplus.png" _open="images/Tminus.png" _closed="images/Tplus.png">
            <xsl:attribute name="ID">stateImagef<xsl:value-of select="@id"/></xsl:attribute>
          </img>
        </xsl:when>
        <xsl:otherwise>
          <img src="images/Lplus.png" _open="images/Lminus.png" _closed="images/Lplus.png">
            <xsl:attribute name="ID">stateImagef<xsl:value-of select="@id"/></xsl:attribute>
          </img>
        </xsl:otherwise>
      </xsl:choose>
    </xsl:when>
    <xsl:otherwise>
      <xsl:choose>
        <xsl:when test="following-sibling::node()">
          <img src="images/T.png"/>
        </xsl:when>
        <xsl:otherwise>
          <img src="images/L.png"/>
        </xsl:otherwise>
      </xsl:choose>
    </xsl:otherwise>
  </xsl:choose>
</xsl:template>