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

一般我们见到的 XML 文件是以元素为结点的，随着层次的不断加深，逐渐成了一棵树，这种文件的好处是我们一看就很明白其中的子、父、祖宗、兄弟关系，不方便之处在于，我个人认为，如果层次很深又有很多的兄弟结点的话，那么文件可能很大而影响处理的效率。正由于 XML 对描述数据结构的灵活性，所以在某些环境下采用属性值来描述元素之间的关系。例如花园左边的 TOC（TABLE 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 了。