XSLT+XML显示文件目录树
最近在写一个文件分享的程序，突然想能不能做一个目录树浏览的功能，但是又不想话太多的时间。想到已经把目录树用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挺适合用来处理树状的内容。