基于AJAX的动态树型结构的设计与实现(二)[转]

基于AJAX的动态树型结构的设计与实现(二)[转]

2.1 表示层实现

　　类似Windows资源管理器的文件夹模式，节点的图片样式如表1所示。对于每个节点的DHTML 代码，需要包含节点的位置、前导图片、样式、针对该节点的其他操作等。同时为了节点显示的连贯性，还需一些前导图片。

　　表1 树节点的前的图片样式表

　对于树的非叶子节点，图片和节点信息等，采用一个DIV ( division) 容器包含。DIV 等容器是DHTML 的基础，使用它可以通过脚本程序对其属性进行操作，如设置其style 样式的display 属性来控制子节点的展开和隐藏。节点的位置、前导图片、样式、针对该节点的其他的操作等都放入容器中，例：

＜ DIV id =mParentID＞
＜ IMG align = center border = 0 onclick =″nodeExpand (‘leafid’)″ name = m1Tree src =′Tplus.gif′＞
＜ IMG align = center border = 0 name = m1Folder src =′folderClosed. gif′＞ 计算机学院 ＜/p＞

　　叶子节点无需容器直接输出即可。

　　当点击某节点前的“ + ”、“ - ”图片时通过DIV 的style 样式的display 属性控制子节点的展开和隐藏。display：“none”(隐藏,不可见)，display：“block”(显示) 。相关JavaScript 代码如下：

if (expandChild.style.display = =″none″){
　// 当前为隐藏状态,执行展开动作
　this.Loading(parentObject);//判断该分支的数据是否已经加载
　expandChild.style.display =″block″;
if (para2 = =″last″)
　parentObject.src =″Lminus. gif″; // 最后一个节点
else
　parentObject.src = ″Tminus. gif″; // 显示┠
　expandFolder.src = ″folderOpen. gif″;
}else {
　// 将当前节点的子节点全部隐藏
　expandChild.style.display = ″none″;
　if (para2 = = ″last″)
　　parentObject.src = ″Lplus. gif″;
　else
　　parentObject.src = ″Tplus. gif″;
　　expandFolder.src = ″folderClosed. gif″;
}

　　2.2 树型表结构设计

　　我们以数据库为载体记录节点的变化，树型表结构至少要有以下字段：节点的编号(CLASSID) ,对节点的描述(ClassName)，父节点的编号(ParentId)，这些是构建树结构所必须的信息。同时引入节点的类别代码（ClassCode），节点的级别（ClassLevel），是否叶子节点 (Terminated)等辅助字段，记录节点次序，实体关系图如图3所示。

图 3 树型表结构示意图

　　树遍历的时间复杂度是O( n )，但是将树信息存放到数据库后，就不能按传统的方式遍历树，必须使用SQL 语句访问数据库表的内容，而一次性取的数据量越多，消耗的资源也越多，用户等待的时间就越长。如果将无序的数据从数据库中读出，在服务器端，必须将排序后的树送到客户端显示。因此，最好从数据库读出已排好序的树。

　　我们知道，字符串排序是按照字典序形式。结合SQL 语句的特点和树结构特点，数据库表中，节点的类别代码采用多级字符串形式，如AAABBBCCC，从树根节点开始，每向下一级字符串就增加一级，并且子节点类别代码以父节点类别代码开始，再开始本级的类别代码。同级的节点按照生成的顺序编号，如节点类别代码为AAA 的下一级孩子类别代码为AAAAAA，AAAAAB 等，AAAAAB 的孩子节点为AAAAABAAA、AAAAABAAB等。每一级编号字符的宽度与实际的应用关联，如AAA～ZZZ 一级则有263 个节点，如果不够用再增加一个字符用于编码。该巧妙的编号方式。使得在执行SQL 语句select * from tree_class order by classcode 后，一次获得完整的先序.

原文链接:http://www.7dspace.com/doc/44/0512/2005122906292220003.htm