论坛首页 → Web前端技术论坛 →

XSLT+XML显示文件目录树

浏览 2160 次
锁定老帖子 主题：XSLT+XML显示文件目录树
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • wenjianwzz
  • 等级: 初级会员
  • 性别:
  • 文章: 4
  • 积分: 50
  • 来自: 四川
   发表时间：2011-06-13   最后修改：2011-06-13

最近在写一个文件分享的程序，突然想能不能做一个目录树浏览的功能，但是又不想话太多的时间。想到已经把目录树用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挺适合用来处理树状的内容。
返回顶楼
         
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics