`

XSLT+XML显示文件目录树

    博客分类:
  • Web
阅读更多

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

分享到:
评论

相关推荐

    JAVA WEB 开发详解:XML+XSLT+SERVLET+JSP 深入剖析与实例应用.part2

    1.4.1 xml将数据与显示分开 5 1.4.2 xml对文档的格式要求更加严格 6 1.4.3 xml有且只能有一个根元素 6 1.5 xml的编辑工具 7 1.6 xml文档 8 1.6.1 xml声明 9 1.6.2 文档类型声明 10 1.6.3 元素 11 1.6.4 注释...

    JAVA WEB 开发详解:XML+XSLT+SERVLET+JSP 深入剖析与实例应用.part4

    1.4.1 xml将数据与显示分开 5 1.4.2 xml对文档的格式要求更加严格 6 1.4.3 xml有且只能有一个根元素 6 1.5 xml的编辑工具 7 1.6 xml文档 8 1.6.1 xml声明 9 1.6.2 文档类型声明 10 1.6.3 元素 11 1.6.4 注释...

    JAVA WEB 开发详解:XML+XSLT+SERVLET+JSP 深入剖析与实例应用.part5

    1.4.1 xml将数据与显示分开 5 1.4.2 xml对文档的格式要求更加严格 6 1.4.3 xml有且只能有一个根元素 6 1.5 xml的编辑工具 7 1.6 xml文档 8 1.6.1 xml声明 9 1.6.2 文档类型声明 10 1.6.3 元素 11 1.6.4 注释...

    JAVA WEB 开发详解:XML+XSLT+SERVLET+JSP 深入剖析与实例应用.part3

    1.4.1 xml将数据与显示分开 5 1.4.2 xml对文档的格式要求更加严格 6 1.4.3 xml有且只能有一个根元素 6 1.5 xml的编辑工具 7 1.6 xml文档 8 1.6.1 xml声明 9 1.6.2 文档类型声明 10 1.6.3 元素 11 1.6.4 注释...

    使用JavaScript+XML+XSL创建树形目录

    首先,我们需要创建一个XML文件来存储树形目录的结构。例如,我们可以创建一个如下结构的XML文档: ```xml 根目录"&gt; 子目录1"&gt; 文件1.txt"/&gt; 文件2.txt"/&gt; 子目录2"&gt; 文件3.txt"/&gt; ``` **步骤2:...

    用XML和XSLT进行高级的Web UI设计

    其建立机制是通过特定的XSL风格页将定义好的目录树XML文件转换成满足要求的HTML推送给客户端浏览器(IE5.5+)显示。客户端负责处理所有对目录的操作,如展开/收缩、最大化/最小化子目录和整个目录结点。

    查看编辑xml文件的很好用的小工具

    2. **树目录显示**:当用户右键点击XML文件时,左侧会显示一个树状视图,将XML文档的层次结构清晰地展示出来。每个元素作为一个节点,可以折叠或展开,使得用户能快速定位到感兴趣的节点,这对于大型复杂的XML文档...

    用XML和XSLT进行高级的 Web UI设计

    1. **XML数据结构**:首先,我们需要建立一个XML文件来存储目录树的数据。每个节点可能包含子节点,同时包含描述、ID等属性。例如: ```xml 父节点"&gt; 子节点1"/&gt; 子节点2"/&gt; ``` 2. **XSLT转换**:接下来,...

    XmlTools_2.4.9.2 x64_Unicode.zip

    XML Tools是一款强大的XML编辑和处理工具,它专为提升在Notepad++中的XML文件编辑体验而设计。 描述中提到的链接来自博客站点“cnblogs.com”,该文章介绍了如何在Notepad++中安装XML Tools插件。Notepad++是一款...

    XSLT指南

    例如,将XML格式的电子书目录转换为HTML网页,或将XML格式的日志文件转换为CSV格式便于分析。 总的来说,XSLT是XML处理的重要组成部分,它提供了一种强大且灵活的方式来转换和操纵XML数据。通过深入学习XSLT,...

    XML系统,用XML做的

    文件可能包括XML文件(用于存储数据)、XSLT文件(用于转换)、脚本文件(如JavaScript,用于客户端交互)和可能的文档或示例数据。 总的来说,XML是一个强大的工具,尤其适用于结构化数据的管理和交换。通过学习...

    XML实例集 XML实例集

    实例集中的例子演示了如何使用JavaScript来加载、解析XML文件,以及如何遍历和操作XML节点树,这在构建动态、交互式的Web应用时非常有用。 XML到HTML的转换示例展示了如何将XML数据转化为HTML表格,这对于数据可视...

    XML.rar_XML java_java xml_java xml Document sa_xml

    XML(eXtensible Markup Language)是一种用于存储和传输数据的标记语言,它在IT行业中...通过DOM解析器,你可以轻松地读取XML文件,对其进行操作,然后将修改后的数据保存回XML文件,从而实现数据的动态管理和交换。

    android mars视频代码 xml源码 XML解析

    4. **Drawable资源**:XML文件可以用来定义图形资源,如形状、渐变、选择器等,这些在`drawable`目录下的XML文件中定义。 5. **数据交换**:XML也常用于应用程序之间的数据交换,比如通过Intent传递数据或者网络...

    xml-apis-1.4.01.jar.zip

    2. **本地库缺失**:如果没有使用构建工具,而是手动管理库,那么可能需要将`xml-apis-1.4.01.jar`文件复制到项目的类路径(ClassPath)中,通常是`lib`目录下,并确保在运行Java应用时能够找到这个库。 3. **版本...

    xml学习文件

    XML(eXtensible Markup Language)是一种用于标记数据的语言,其设计目的是传输和存储数据,而非显示数据。在IT行业中,XML广泛应用于数据交换、配置文件、文档存储等多个领域。以下是一些关于XML的重要知识点: 1...

    xslt非常好的学习资料

    学习如何创建XSLT文件并导入到XML文档中进行转换。 2. **XPath基础**:掌握XPath的基本语法,如节点选取、轴的概念、函数使用等,这是编写XSLT模板的关键。 3. **模板和模式匹配**:学习如何定义模板,以及使用`...

    XML操作的几个例子

    这可能是一个图书数据库的XML文件,包含了一系列`&lt;book&gt;`元素,每个`&lt;book&gt;`元素内有`&lt;title&gt;`、`&lt;author&gt;`、`&lt;year&gt;`等子元素。处理这类文件时,我们可能会用到XPath(XML路径语言)来定位特定的书籍信息,或者...

    疯狂XML讲义 源码 14

    由于“由于文件过大,lib目录下JAR包全删除”的描述,我们可以推测这份源码可能包含了一些用Java实现的XML处理示例,可能涉及了上述的DOM、SAX或JAXB等技术。学习这部分源码可以帮助读者了解如何在实际项目中运用...

    xml自学最好得选择 适合新手 或者学完php得想进修得朋友们

    DOM将整个XML文档加载到内存中,形成一个可遍历的节点树,而SAX则是事件驱动的,只在需要时处理文档的一部分,更适合处理大型XML文件。 在PHP中,有多种处理XML的库,如DOM、SimpleXML和XMLReader等。DOM提供了一种...

Global site tag (gtag.js) - Google Analytics