XSLT轻松实现树形折叠导航栏

一般我们见到的XML文件是以元素为结点的,随着层次的不断加深,逐渐成了一棵树,这种文件的好处是我们一看就很明白其中的子、父、祖宗、兄弟关系,不方便之处在于,我个人认为,如果层次很深又有很多的兄弟结点的话,那么文件可能很大而影响处理的效率。正由于XML对描述数据结构的灵活性,所以在某些环境下采用属性值来描述元素之间的关系。例如花园左边的TOCTABLE OF CONTENT),实现它的XML文件通过属性值来说明元素的类型(NODE OR LEAF), 不过里面仍有子结点存在, 所以用来TRANSFORM它的XSL文件很复杂,分了好几种情况。当然今天我们不是谈花园TOC的实现方法而是用一种更快速、更巧妙的方法来实现类似的TOC,当然也可以叫"树形折叠导航栏" 好了,废话少说,进入正题。先来看一个很简单的DTD NAVIGATOR.DTD
<!ELEMENT Navigation (Navigator*)>
<!ELEMENT Navigator EMPTY>
<!ATTLIST Navigator ID CDATA #IMPLIED AncestorID CDATA #IMPLIED Layer CDATA #IMPLIED Title CDATA #IMPLIED Childs CDATA #IMPLIED Url CDATA #IMPLIED Image CDATA #IMPLIED>

文件很简单,可以这样理解,顶层元素Navigation包含了多个Navigator元素定义了,Navigator不包含元素但有一系列属性。 也许您已经发现, 属性中有两个叫AncestorID Childs的,对了,这两个属性是关键, 当然还有Layer 在他们的共同作用下, Navigator元素之间的关系将被明确描述。 好了, 我们来看Navi.xml文件, 以花园TOC做为例子。

查看花园TOC例子:

NAVI.xml
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE Navi SYSTEM "navigator.dtd">
<?xml-stylesheet type="text/xsl" href="navigator.xsl" ?>
<Navigation>
<Navigator ID='1' AncestorID='1' Layer='0' Title='
花园首页' Childs='0' Url='default.asp' Image='images/dc.gif'/>
<Navigator ID='2' AncestorID='2' Layer='0' Title='
我的花园' Childs='4' Url='#' Image='default'/>
<Navigator ID='3' AncestorID='2' Layer='1' Title='
收藏夹' Childs='4' Url='#' Image='default'/>
<Navigator ID='21' AncestorID='3' Layer='2' Title='
我管理的花坛' Childs='0' Url='mybbs.asp?cat=g' Image='images/dc-new.gif'/>
<Navigator ID='22' AncestorID='3' Layer='2' Title='
我种下的种子' Childs='0' Url='mybbs.asp?cat=t' Image='images/dc-new.gif'/>
<Navigator ID='23' AncestorID='3' Layer='2' Title='
我喜欢的花园' Childs='0' Url='myfavorite.asp?cat=g' Image='images/dc-new.gif'/>
<Navigator ID='24' AncestorID='3' Layer='2' Title='
我收藏的文章' Childs='0' Url='myfavorite.asp?cat=t' Image='images/dc-new.gif'/>
<Navigator ID='4' AncestorID='2' Layer='1' Title='
个人工具箱' Childs='2' Url='#' Image='default'/>
<Navigator ID='25' AncestorID='4' Layer='2' Title='
配置和管理' Childs='0' Url='personal.asp' Image='images/dc-config.gif'/>
<Navigator ID='26' AncestorID='4' Layer='2' Title='
花瓣兑换点' Childs='0' Url='apetal.asp' Image='images/dc-config.gif'/>
<Navigator ID='27' AncestorID='2' Layer='1' Title='
我的日记本' Childs='0' Url='mydiary.asp' Image='images/dc-diary.gif'/>
<Navigator ID='6' AncestorID='2' Layer='1' Title='
好友和短讯' Childs='0' Url='myfriend.asp' Image='images/dc-friends.gif'/>
<Navigator ID='7' AncestorID='7' Layer='0' Title='
计算机技术' Childs='2' Url='#' Image='default'/>
<Navigator ID='8' AncestorID='7' Layer='1' Title='DHTML,JScript' Childs='0' Url='bbsgroup.asp?c=6&g=16' Image='images/dc.gif'/>
<Navigator ID='9' AncestorID='7' Layer='1' Title='.NET,ASP+
探讨' Childs='0' Url='bbsgroup.asp?c=6&g=17' Image='images/dc.gif'/>
<Navigator ID='10' AncestorID='7' Layer='1' Title='ASP
互助' Childs='0' Url='bbsgroup.asp?c=6&g=18' Image='images/dc.gif'/>
<Navigator ID='11' AncestorID='11' Layer='0' Title='
箐箐校园' Childs='2' Url='#' Image='default'/>
<Navigator ID='12' AncestorID='11' Layer='1' Title='
南京大学' Childs='0' Url='bbsgroup.asp?c=7&g=19' Image='images/dc.gif'/>
<Navigator ID='13' AncestorID='11' Layer='1' Title='
东南大学' Childs='0' Url='bbsgroup.asp?c=7&g=20' Image='images/dc.gif'/>
<Navigator ID='14' AncestorID='14' Layer='0' Title='
花园·有个广场' Childs='2' Url='#' Image='default'/>
<Navigator ID='15' AncestorID='14' Layer='1' Title='
意见箱' Childs='0' Url='bbsgroup.asp?c=8&g=21' Image='images/dc.gif'/>
<Navigator ID='16' AncestorID='14' Layer='1' Title='
花园·人物故事' Childs='0' Url='bbsgroup.asp?c=8&g=22' Image='images/dc.gif'/>
<Navigator ID='17' AncestorID='17' Layer='0' Title='
园丁办公室' Childs='0' Url='bbsgroup.asp?c=9&g=23' Image='images/dc-key.gif'/>
<Navigator ID='18' AncestorID='18' Layer='0' Title='
青青芳草地' Childs='0' Url='bbsgroup.asp?c=9&g=24' Image='images/dc.gif'/>
<Navigator ID='19' AncestorID='19' Layer='0' Title='
统计信息' Childs='0' Url='viewlog.asp' Image='images/dc-chart.gif'/>
<Navigator ID='20' AncestorID='20' Layer='0' Title='ActiveCard' Childs='0' Url='activecard?fromgarden' Image='images/dc-card.gif'/>
</Navigation>

结合上面我讲的和花园左边的TOC 仔细分析这个文件后, 找出元素间存在的关系是很容易的, 难的是怎么想到这么来创建XML文件的。 好了, 有了数据, 下一步就是如何MANUPILATE了。