在javascript中以数组链表法实现下拉树

在javascript中以数组链表法实现下拉树2014-09-19 cnblogs 眼神与背影在网页开发中，大部分的下拉菜单都是一行一项并且上下对齐，这样虽然很好但是缺乏层次结构感，客户不知道各个选项之间的关系，因此有的时候我们需要在下拉菜单中以树形结构展示下拉项，给客户更好的体验。比如：假设数据库中有张表存放了中国省市信息，如下所示：

这张表是符合树形结构特征的，它的树形结构如右图所示，相信很多表都有这样的特征，这种结构的表以下拉树展示最好不过了，用户可以直接看出选项之间的关系。

javascript实现树形结构应该有很多种方法，我也不知道那些方法都是如何实现的，也不想从网上下载现成的，因此决定自己写一个，刚开始没什么头绪，后来突然灵光一现，想到了数组链表的方法，大概思路如下，先上图：

上面这幅图是树形结构在数组中的保存形式，每个节点以对象的形式存放在数组中，每个对象都有一个“array”属性，它是一个数组，指向它的所有子节点，"array"非常重要，树形结构的所有操作都要用到它，特别是对树的遍历，可以说是这个属性使多个数组组合起来形成一棵树，只不过这棵树是在内存中是无形的，我把它理解为“抽象树（我只是瞎说啊，仅是个人叫法，没有任何根据）”，是不是有点数组链表的味道啊？为了把它变为有形的树，我们可以对它进行遍历，在遍历的时候生成适当的html标签，最后生成树的完整html代码。

下面介绍一下实现过程：

首先，把数据库中的表以对象的形式保存在数组里面，怎么保存我就不说了，不是本文重点，为了简单我直接定义好一个数组，代码如下：

//为了方便处理，表中每一行的信息以对象的形式存放在数组中var array = [{id: 0,parentId: -1,name: "China" },{id: 1, parentId:0,name: "HeNan"},{id: 2, parentId:1, name:"LuoYang"},{id: 3,parentId: 1,name: "ZhengZhou" },{id: 4,parentId: 0,name: "HeBei" },{id: 5,parentId: 4,name: "TangShang" },{id: 6,parentId: 4,name: "ShiJiangZhuang" },{id: 7,parentId: 0,name: "HeiLongJiang" },{id: 8,parentId: 7,name: "Haerbin" },{id: 9,parentId: 7,name: "DaQing" },{id: 10,parentId: 0,name: "GuangDong" },{id: 11,parentId: 10,name: "GuangZhou" },{id: 12,parentId: 10,name: "FoShan" },{id:13,parentId:1,name:"KaiFeng"},{id:14, parentId: 2, name:"RuYang"},{id:15,parentId:0,name:"meself"},{id:16,parentId:-1,name:"America"},{id:17,parentId:16,name:"Maiami"},      {id:18,parentId:17,name:"Heat"}];

然后，对这个数组进行处理，给每个对象添加“level”属性，为了方便处理把数组按照对象的“level”属性从小到大进行排序，并给数组中每个对象添加最重要的"array”属性，然后遍历树生成树的html，代码如下：

//给数组中的对象添加"level"属性this.initLevel = function（）{for（var i=0; i<this.array.length;i++）{this.level = 0;//计算每个节点的层次之前，先重置为0this.getLevel（this.array[i].id）;this.array[i].level = this.level;}}//计算每个节点的层次this.getLevel = function （id）{if（！Boolean（this.array[id]）||id==-1）{//alert（"The id "+ id +" is not included in array！"）;return false;}if（this.array[id].id！=-1）{this.level = this.level + 1;//var iidd = this.array[id].parentId;//arguments.callee（iidd）;this.getLevel（this.array[id].parentId）;}}//初始化抽象树，处理根节点（支持多个根节点的情况，即：多棵树）// this.initAbstructTree = function （） { var rootCount = 0; //array_1为全局变量 array_1 = new Array（1）; //shaobing = shaobing + 1; for（var i=0;i<this.array.length;i++） { if（this.array[i].level==1） { rootCount++; array_1[i] = this.array[i]; //shaobing = shaobing + 1; } elsebreak; } }//创建抽象树，用递归的方式处理根结点以外的所有节点，以数组的形式建立树形结构this.createAbstructTree = function （arrayn）{//保存现在正在遍历array数组中的第几层var layer = arrayn[0].level + 1;if（layer>this.array[this.array.length-1].level）return;for（var i=0;i<arrayn.length;i++）{for（var j=0;j<this.array.length;j++）{if（this.array[j].level>layer）break;if（this.array[j].level == layer&&this.array[j].parentId == arrayn[i].id）{if（！Boolean（arrayn[i].array））{arrayn[i].array = new Array（）;}arrayn[i].array.push（this.array[j]）;}}if（Boolean（arrayn[i].array））{this.createAbstructTree（arrayn[i].array）;}}}//按照数组中保存的抽象树形结构，递归生成树形结构的htmlthis.generateTreeHtml = function （arrayn,signalArray）{for（var i=0;i<arrayn.length;i++）{if（arrayn[i].level == 1） //根节点{if（i == （arrayn.length-1）） //第一层的最后一个节点的图标不一样{this.html += "<div><div id="level"+arrayn[i].level+"_"+arrayn[i].id+""><img src="images/Lminus.png"><img src="images/openfoldericon.png"><span>"+arrayn[i].name+"</span></div>";}elsethis.html += "<div><div id="level"+arrayn[i].level+"_"+arrayn[i].id+""><img src="images/Tminus.png"><img src="images/openfoldericon.png"><span>"+arrayn[i].name+"</span></div>";//控制标签的显示，如果有子节点，则将所有的子节点放在<div>标签里面if（Boolean（arrayn[i].array））{this.html += "<div>"}if（i == （arrayn.length-1））{if（Boolean（arrayn[i].array））//有子节点{signalArray.push（"blank"）;this.generateTreeHtml（arrayn[i].array,signalArray）;signalArray.pop（）;}}else{if（Boolean（arrayn[i].array））//有子节点{signalArray.push（"I"）;this.generateTreeHtml（arrayn[i].array,signalArray）;signalArray.pop（）;}}if（Boolean（arrayn[i].array））{this.html += "</div></div>"; //结束标签}elsethis.html += "</div>"; //结束标签}else//非根节点{//添加对应的外层图片var outerbiaoqian="";var innerbiaoqian="";if（signalArray.length>0）{for（var k=0; k<signalArray.length;k++）{outerbiaoqian += "<img src="images/"+signalArray[k]+".png">"}}//添加自己的图片if（i == arrayn.length-1） //最后一个节点{if（Boolean（arrayn[i].array））{//并且有子节点innerbiaoqian+="<img src="images/Lminus.png"><img src="images/openfoldericon.png">";//signalArray.push（"blank"）;}else{//没有子节点innerbiaoqian+="<img src="images/L.png">";//signalArray.push（"blank"）;}}else//不是最后一个节点{if（Boolean（arrayn[i].array））{//并且有子节点innerbiaoqian+="<img src="images/Tminus.png"><img src="images/openfoldericon.png">";}else{//没有子节点innerbiaoqian+="<img src="images/T.png">";}}if（Boolean（arrayn[i].array））//有子节点{this.html += "<div id="level"+arrayn[i].level+"_"+arrayn[i].id+"">"+outerbiaoqian+innerbiaoqian+"<span>"+arrayn[i].name+"</span></div><div>";if（i == arrayn.length-1） //最后一个节点{signalArray.push（"blank"）;}elsesignalArray.push（"I"）;this.generateTreeHtml（arrayn[i].array,signalArray）;signalArray.pop（）;this.html += "</div>";}else //没有子节点this.html += "<div id="level"+arrayn[i].level+"_"+arrayn[i].id+"">"+outerbiaoqian+innerbiaoqian+"<span>"+arrayn[i].name+"</span></div>";}}}//调用此方法创建树形结构，在这个方法里依次调用上面的方法完成树的创建this.createTree = function （）{//this.array = array;this.initLevel（）; //add property named level to all the objectthis.array.sort（this.compare（"level"））; //sort the array according to the object"s property of levelthis.initAbstructTree（）;this.createAbstructTree（array_1）; //执行完这个方法后，数组array_1就保存了树形结构的信息，即：array_1是抽象树的根this.generateTreeHtml（array_1,this.signalArray）;$（"#tree"）.html（this.html）;this.success = true;tree_additionalFunction（）;}}//创建出树形结构以后，给树增加一些事件和样式function tree_additionalFunction（）{//添加鼠标经过时的样式$（"div[id^=level]"）.hover（function（）{$（this）.addClass（"dd"）; },function（）{$（this）.removeClass（"dd"）;}）;//点击结点时获取结点的值，然后使树不可见$（"div[id^=level]"）.click（function（）{ $（"#sele"）.val（$（this）.find（"span"）.text（））;//alert（$（this）.find（"span"）.text（））; $（"#tree"）.slideUp（）;}）;//展开和收起结点时替换相应的图标$（"div[id^=level]>img"）.click（function（）{if（this.nodeName == "IMG"）{var temp = this.src.split（"/"）;var index = temp.length-1;if（temp[index] == "Tminus.png" || temp[index] == "Lminus.png"）{//左边的表达式先去掉路径中最后一个值，即：要被替换的图片名temp.pop（） == "Tminus.png"？this.src = temp.join（"/"）+"/Tplus.png":this.src = temp.join（"/"）+"/Lplus.png";//替换文件夹图标$（this）.next（）.attr（"src",temp.join（"/"）+"/foldericon.png"）;$（this）.parent（）.next（）.slideUp（）;return false;}else if（temp[index] == "Tplus.png" || temp[index] == "Lplus.png"）{//左边的表达式先去掉路径中最后一个值，即：要被替换的图片名temp.pop（） == "Tplus.png"？this.src = temp.join（"/"）+"/Tminus.png":this.src = temp.join（"/"）+"/Lminus.png";//替换文件夹图标$（this）.next（）.attr（"src",temp.join（"/"）+"/openfoldericon.png"）;$（this）.parent（）.next（）.slideDown（）;return false;}}}