XSLT+XML显示文件目录树

wenjianwzz · 发表于 2013-1-31 11:19:06

最近在写一个文件分享的程序，突然想能不能做一个目录树浏览的功能，但是又不想话太多的时间。想到已经把目录树用XML输出用于资源互联，就想试一下用XSLT显示一个这样的目录树。

参考资料：
http://www.west263.com/www/info/22688-1.htm
http://www.w3school.com.cn/xsl/index.asp

XML文件的格式：
<EnterPoint startPath="/" Version="1.0"><File name="软件" size="16384" lastModified="1307619056218" type="FILE" isDir="true"><File name="Linux" size="4096" lastModified="1303369207691" type="FILE" isDir="true"><File name="apache-tomcat-7.0.5.tar.gz" size="7130543" lastModified="1291110060000" type="FILE" isDir="false"/><File name="dia-0.96.1.tar.bz2" size="4445553" lastModified="1175138668000" type="FILE" isDir="false"/><File name="eclipse-jee-helios-SR2-linux-gtk.tar.gz" size="215060891" lastModified="1298523600000" type="FILE" isDir="false"/><File name="google-earth-stable_current_i386.rpm" size="31788040" lastModified="1292432400000" type="FILE" isDir="false"/><File name="jdk-6u22-linux-i586.bin" size="83761756" lastModified="1287562990000" type="FILE" isDir="false"/><File name="Monospace.ttf" size="187953" lastModified="1291364936000" type="FILE" isDir="false"/><File name="myeclipse-9.0M1-linux-gtk-x86.tgz" size="843288985" lastModified="1290607504000" type="FILE" isDir="false"/><File name="netbeans-6.9.1-ml-linux.sh" size="278520832" lastModified="1291026576000" type="FILE" isDir="false"/><File name="PPStream.rpm" size="1488923" lastModified="1291961422000" type="FILE" isDir="false"/></File></File></EnterPoint> XSLT文件：
<?xml version="1.0"?><xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="EnterPoint"><html><head><title>目录树</title><script type="text/javascript" src="js/jquery-1.3.1.min.js"></script><script type="text/javascript" src="js/tree.js"></script><link rel="stylesheet" href="css/tree.css" type="text/css" /></head><body><ul class="tree"><xsl:apply-templates select="File"><xsl:with-param name="path" select="'files/'"></xsl:with-param></xsl:apply-templates></ul></body></html></xsl:template><xsl:template match="File"><xsl:param name="path"></xsl:param><xsl:if test="@isDir='true'"><li><span class="dir"><xsl:value-of select="@name"></xsl:value-of></span><ul><xsl:apply-templates select="child::File"><xsl:with-param name="path" select="concat($path,@name,'/')"></xsl:with-param></xsl:apply-templates></ul></li></xsl:if><xsl:if test="@isDir='false'"><li><span class="file"><a href="{concat($path,@name)}" target="_blank"><xsl:value-of select="@name"></xsl:value-of></a></span></li></xsl:if></xsl:template></xsl:stylesheet> tree.js
var tree = {buildTree : function() {$('.tree li').each(function() {if ($(this).is(':has(ul)'))$(this).addClass('collapse');if ($(this).next().is('li') || $(this).next().is('ul'))$(this).css({borderLeft : 'dashed 1px #dedede'});});$('li.collapse>span').click(function() {$(this).next('ul').slideToggle('fast',function() {if ($(this).parent().hasClass('collapse'))$(this).parent().removeClass('collapse').addClass('expand');else$(this).parent().removeClass('expand').addClass('collapse');});});$('span.func').css({'cursor' : 'pointer'}).hover(function() {$(this).css({'color' : '#3de','text-decoration' : 'underline'});}, function() {$(this).css({'color' : '#000','text-decoration' : 'none'});}).click(function() {$.fn.jerichoTab.addTab({tabFirer : $(this),title : $(this).text(),closeable : true,iconImg : $(this).attr('iconImg'),data : {dataType : $(this).attr('dataType'),dataLink : $(this).attr('dataLink')}}).showLoader().loadData();});}};$().ready(function() {tree.buildTree();contractAll();});function contractAll() {$('li.collapse>span').each(function() {$(this).next('ul').slideToggle('fast', function() {if ($(this).parent().hasClass('collapse'))$(this).parent().removeClass('collapse').addClass('expand');else$(this).parent().removeClass('expand').addClass('collapse');});});} tree.css

.tree {margin: 0;padding: 0;}.tree ul,.tree li {list-style-type: none;margin: 0;padding: 0;}.tree li {padding-left: 14px;line-height: 18px;}.tree span.modules {cursor: pointer;color: #783432;}.tree li.collapse {background: url(../img/collapse.gif) no-repeat left 4px;}.tree li.expand {background: url(../img/expand.gif) no-repeat left 4px;}
以前几乎没怎么用过XML做啥，觉得笨重，看到那些XML格式的配置文件也觉得不可思议，即使只有少量配置变量，我还需要用一长串的标签将其包括起来。这次用了感觉XML挺适合用来处理树状的内容。

		自动登录	找回密码
密码			立即注册

XSLT+XML显示文件目录树

浏览过的版块