基于Ajax技术的树型结构目录的实现.pdf

基于Ajax 技术的树型结构目录的实现 邹志辉，杨春金，谭勇 武汉理工大学信息工程学院，武汉（430063 ） E-mail ：aimshiny528@163.com 摘 要：树型结构是人类社会中一种常见的数据结构，随着互联网的发展，应用也越来越广 泛。本文介绍了几种实现树型结构目录的方法，并通过一个简单例子，以Ajax 技术为基础， 实现了树型结构目录。 关键词： 树型；Ajax;xml ；数据 中图分类号：TP31 1. 引 言 树型结构是一类应用非常广泛的数据结构。人类社会中宗族的族谱和现代企业的组织形 式都是树型结构。在计算机领域中,文件系统中文件的管理结构、存储器管理中的页表、数 据库中的索引等也都是树型结构[1] 。随着 Internet 的飞速发展，树型结构在浏览器/服务器 （Browser/Server ，简称B/S ）应用系统的应用也越来越广泛。 2. 树型结构目录的实现方法 实现树型结构目录主要有下面几种方法： 2.1 基于 dTree 组件的实现 dTree 是一个免费的 JavaScript 脚本，只需定义有限的几个参数，就可以做出漂亮的树 型目录。以下是 dtree 的用法示例： 1 ）初始化菜单 script type=text/javascript var Tree = new Array; Tree[0] = 1|0|Page 1|#; Tree[1] = 2|1|Page 1.1|#; Tree[2] = 3|1|Page 1.2|#; Tree[3] = 4|3|Page 1.2.1|#; /script 2 ）调用函数 div class=tree script type=text/javascript createTree(Tree,1,7); /script /div dtree 组件实现树型结构目录的方法函数都在 dtree.js 中，在应用时必须在页面中引用必 要的 CSS 和 JS 文件。如下： link href=dtree.css type=text/css rel=stylesheet/ script language=JavaScript src=dtree.js type=text/javascript/script 。 2.2 基于 xTree 组件的实现 xTree 是/公司的基于 JavaScript 的建立树型目录的开源产品，扩展性 - 1 - 强，使用简单。xTree 适合于静态目录树, 而另外一种就是 xLoadTree ，适合于动态局部加载 [3] 目录树，利用Ajax 的思想进行封装的 。 1）静态树： script type=text/javascript var tree = new WebFXTree(测试树); for (var i = 0; i 50; i++){ tree.add( new WebFXTreeItem(子结点 + i) ); } tree.write(); /script 2 ）动态树 var tree = new WebFXLoadTree(Hello World, tree.xml);打开根结点时，即从 tree.xml 文件 中得到子树，也可是从服务器返回的XML 流 tree.write(); 而无论是静态树还是动态树，两种树都是从 XML 文件中读到子树结点： var tree = new WebFXTree(Root);