在这个颜值当道，屌丝闪边的时代，拼不过颜值拼内涵，只有知识丰富才能提升一个人的内在气质和修养，所谓人丑就要多学习，今天图老师给大家分享基于AJAX的动态树型结构的设计与实现，希望可以对大家能有小小的帮助。
【 tulaoshi.com - Web开发 】
树型结构是一类应用非常广泛的数据结构。人类社会中宗族的族谱和现代企业的组织形式都是树型结构。在计算机领域中,文件系统中文件的管理结构、存储器管理中的页表、数据库中的索引等也都是树型结构。随着Internet的飞速发展，树型结构在浏览器/服务器（Browser/Server，简称B/S）应用系统的应用也越来越广泛。
树遍历的时间复杂度是O( n )，但是将树信息存放到数据库后，就不能按传统的方式遍历树，必须使用SQL 语句访问数据库表的内容，而一次性取的数据量越多，消耗的资源也越多，用户等待的时间就越长。如果将无序的数据从数据库中读出，在服务器端，必须将排序后的树送到客户端显示。因此，最好从数据库读出已排好序的树。
我们知道，字符串排序是按照字典序形式。结合SQL 语句的特点和树结构特点，数据库表中，节点的类别代码采用多级字符串形式，如AAABBBCCC，从树根节点开始，每向下一级字符串就增加一级，并且子节点类别代码以父节点类别代码开始，再开始本级的类别代码。同级的节点按照生成的顺序编号，如节点类别代码为AAA 的下一级孩子类别代码为AAAAAA，AAAAAB 等，AAAAAB 的孩子节点为AAAAABAAA、AAAAABAAB等。每一级编号字符的宽度与实际的应用关联，如AAA～ZZZ 一级则有263 个节点，如果不够用再增加一个字符用于编码。该巧妙的编号方式。使得在执行SQL 语句select * from tree_class order by classcode 后，一次获得完整的先序树。
2.3 业务逻辑层设计
2.3.1 动态加载技术
如果一次性获取完整的先序树，构造成xml提供给JavaScript解析，数据量越大，消耗的资源越多，客户端响应延迟时间就越长，因此对于大数据量的树，采用动态加载方式，即每次单击“+”图片时，判断是否已加载子节点数据，如果未加载则通过Ajax的XMLHTTP组件XMLHTTPRequest对象异步发送请求，连接服务器执行SQL 语句“select * from tree_class where parent = ？order by classcode ”获取节点数据。相关JavaScript 代码如下：
/*判断是否已经加载数据，未加载则访问服务器加载数据*/
dhtmlTree.prototype.Loading=function(pObject){
if(((pObject.XMLload==0)&&(this.XMLsource))&&(!this.XMLloading)){
pObject.XMLload=1;
this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(pObject.id));
}
}
dtmlXMLObject.prototype.loadXML=function(url){//加载数据
try {
this.xmlDoc = new XMLHttpRequest();
/*通过GET方法异步连接到 url 加载数据*/
this.xmlDoc.open("GET", url,true);//true：异步；false：同步
this.xmlDoc.send(null);
} catch(e){
this.xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");//使用IE
this.xmlDoc.open("GET", url,true);//true：异步；false：同步
this.xmlDoc.send(null);
}
return this.xmlDoc.responseXML;
}
每次只取同一个父节点ParentId的子节点序列，按XML格式封装成树的文档结构，例如：
＜tree id="0"＞
＜leaf child=”1" name="国防科技大学" id="1" im0="leaf.gif" im1="folderOpen.gif" im2=" folderClosed.gif"/＞
＜/tree＞
提供给JavaScript的dhtmlTreeObject.prototype.insertItem（）解析并组织好html输出节点；其中child：1表示有子节点，0表示没有子节点；im0表示没有子节点时的图标；im1表示有子节点并且打开节点时的图标；im2表示有子节点并且关闭时的图标；所以还可以在构造XML时自定义图标。
2.3.2 树型结构的构造
从数据库中返回的是有序的先序树，而XML是完整的树型结构文档，所以将树型数据构造成预定义的XML格式，只需从根节点开始，遍历一遍树，即可将树全部生成。相关JavaScript代码如下：
/*动态加载树的构造方法*/
dtmlXMLObject.prototype.constructTree=function(){
//采用动态加载时获取的xml数据，解析树型数据
var node=this.XMLLoader.getXMLTopNode("tree");
var parentId=node.getAttribute("id");
（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）for(var i=0;i＜node.childNodes.length;i++) { //逐个解析xml文件的leaf节点
if((node.childNodes[i].nodeType==1)&&(node.childNodes[i].tagName == "leaf")){
var name=node.childNodes[i].getAttribute("text");
…………
var temp=dhtmlObject.a0Find(parentId);//获取父节点对象
temp.XMLload=1;//已加载
//构造html输出节点
dhtmlObject.insertItem(parentId,cId,name,im0,im1,im2,chd);
dhtmlObject.addDragger = this;//设置可拖放的对象
};
}
2.3.3 树型结构的维护
在维护树型结构表时,删除节点较为简单，SQL 语句为: "delete from tree_class where classcode like′"+ classcode +"%′",即可将其节点和孩子一并删除；增加节点时,分为前插、后插、和插入子节点三种情况，前两种情况需要更新递归更新类别代码，后者只需找到父节点的孩子的最大类别代码加1 后,作为增加节点的类别代码；通过拖放来改变树的结构时，只需将拖动节点的parentId更新为目标节点的Classid即可，对应的SQL语句为："update tree_class set parentId = "+ classidTo+" where classid = "+ classidFrom。
3、效率分析
对于树的存储一般有两种形式：二维表和链表，遍历方式一般也有深度遍历和广度遍历两种方式，遍历的时间复杂度都是O( n )。用二维表存储时，在内存中用数组的下标能准确定位节点的父节点、兄弟节点所在的数组下标。数据库中节点的定位也是准确的，但是将节点信息从数据库中读到内存中时，如果无法通过内存数组下标定位节点信息，那么就必须遍历一遍寻找一个节点，n 个节点中寻找一个节点的时间是O(n/2)，n 个节点排序的时间复杂度将是O( n 2/2)，这也是一般实现的B/S 模式的树结构效率低下的原因。本方案采用字典序编号方案，使得从数据库中取得的树是已经排序的，直接遍历生成客户页面程序，时间复杂度为O( n )。
4、结 论
本文讨论了基于Ajax的动态树型结构的实现方案，支持无刷新动态维护树的节点信息，支持拖放节点改变树的节点结构以及次序；同时采用数据库存储节点信息，保证了该方案有一定的通用性，此外结合XML描述树的节点信息，使得任何按本方案预定的xml文档描述的信息都可以通过树来展现。本方案已经应用在我校的数字迎新系统以及老百姓大药房信息系统中。
来源:http://www.tulaoshi.com/n/20160219/1606483.html
看过《基于AJAX的动态树型结构的设计与实现》的人还看了以下文章 更多>>
