在Xslt中用递归做无限级分类三部曲之初级篇

引言

Xslt没什么太多语法与函数，非常简单，所以Xslt是最合适考验程序员的编程技巧的，能做简单的语言做出不简单的功能，是每一个程序员应该追求的目标。本来我想用一篇把Xslt做树的例子讲完，但写着写着，发现要想让初学者明白，一篇可能有些难度，于是我决定用三篇把它讲完，分为基础篇、进阶篇以及终结篇。三篇层层递进，由浅入深.如果你看完之后，不仅会用Xslt做树，还能收获一些编程的技巧，那我也就没有白写这个三部曲了。

既然是基础篇，我们就应该明白基础篇的需求，没有明确需求就无法实现想要的功能，我们的需求很简单，就是用Xslt结合Xml实现一个树状的列表，就好像Windows的资源管理器一样，并且可以能过对Xml进行修改，实现任意级的树状列表，如图1。

(图1)

根据需求，我们对需求进行分析，用一句话来概括需求，就是要用Xslt结合Xml实现无限级的树。我们来对其中的技术难点进行分析，要实现树，关键在用CSS样式的padding-left属性；而实现无限级，则需要用到递归；还有一个关键点，就是Xml的结构，这个是影响到无限级分类的一个关键所在，很多初学者都会在这儿卡壳。

我们先看一下xml的结构，然后我对xml结构进行一个说明

<![CDATA[湖南]]></Caption>
 
   </Description>
   <Items>
     <Item>
    <Description>  
<Caption><![CDATA[长沙]]></Caption>
 
    </Description>
     </Item>
     <Item>
    <Description>  
<Caption><![CDATA[衡阳]]></Caption>
 
    </Description>
    <Items>
      <Item>
     <Description>  
<Caption><![CDATA[蒸湘区]]></Caption>
 
     </Description>
      </Item>
    </Items>
     </Item>
     <Item>
    <Description>  
<Caption><![CDATA[湘潭]]></Caption>
 
    </Description>
     </Item>
   </Items>
  </Item>
  <Item>
   <Description>  
<Caption><![CDATA[北京]]></Caption>
 
   </Description>
    <Items>
     <Item>
    <Description>  
<Caption><![CDATA[海淀区]]></Caption>
 
    </Description>
     </Item>
     <Item>
    <Description>  
<Caption><![CDATA[昌平区]]>

在这个xml结构中，我们用Items表示树集合，用Item表示一个子树，用Description表示对对的描述，用Caption表示树的名称。你可能会问，为什么要把Caption放在Description下而不直接用Caption，这是因为我考虑到一些扩展，在接下来我们需要扩展这个树。如果子树下有还有子树，则在Item下添加Items树集合，以便递归调用。你可能会对这个描述不太明白，毕竟它太抽象，没关系，我们可以继续来看一下Xslt。

 <xsl:template name="TreeNode">  
  <!--将树集合的节点通过param传过来-->  
  <xsl:param name="Nodes" />  
  <!--循环所有子节点，即Item-->  
  <xsl:for-each select="$Nodes">  
   <!--计算子节点的数量-->  
   <xsl:variable name="Count" select="count(Items)" />  
   <li>  
    <xsl:value-of select="Description/Caption" />  
   </li>  
   <!--如果有下级级点，则递归获取节点-->  
   <xsl:if test="$Count &gt; 0">  
    <ul class="SubTree">  
     <xsl:call-template name="TreeNode">  
      <xsl:with-param name="Nodes" select="Items/*" />  
     </xsl:call-template>  
    </ul>  
   </xsl:if>  
  </xsl:for-each>  
 </xsl:template>

现在，我们只需要一个入口，调用TreeNode这个模版就可以了，入口当然要写在body区域了，代码如下：

 <body>  
  <!--最外层的ul元素，可以不加class样式-->  
  <ul>  
   <xsl:call-template name="TreeNode">  
    <xsl:with-param name="Nodes" select="Items/*" />  
   </xsl:call-template>  
  </ul>  
 </body>

到这里，我们就只剩下一个关键了，你猜的没错，那就是CSS样式，看看我们的CSS样式有什么奥妙吧，核心的CSS样式如下：

 <!--
  .SubTree
  {
   /*让容器内的所有元素都离左边10个像素，这是实现树的一个关键所在*/
   padding-left: 10px;
  }
  li
  {
   margin-top: 5px;
   list-style-type:none;
  }
 
-->

就这样，我们大功告成了，用浏览器打开xml文件，一棵树已经出现在我们的眼前了，开心之余对棵对好像有点不满意吧，好像少了点什么。少了点什么呢？对！少了收缩的功能，和资源管理器的树差远了，居然不能收缩，怎么办？追求完美是程序员应该具备最基本的素质，我们应该将它改造一下。

欲知后事如何，且听下回分解

敬请期待之二——在Xslt中用递归做无限级分类三部曲之进阶篇

效果演示

示例代码下载

注意：本文为我的独立博客镜像博客，自发表不再更新，原文可能随时被更新，敬请访问原文。同时，请大家不要在此评论，如果有什么看法，请点击这里：http://iove.net/1705/

本文来自http://iove.net，欢迎转载，转载敬请保留相关链接，否则视为侵权，原文链接：http://iove.net/1705/

posted on 2007-07-24 01:31 Conis 阅读(369) 评论(0) 收藏举报