日期:2014-05-16 浏览次数:20441 次
这棵树属于本人原创,我正在修改中,另外图片的样式也还没有加上,大家帮帮忙,水平有限,初学js,图片应该怎么来堆放呢? /* * list[id] 是保存每个节点信息的数组 * author wcjy5128@126.com * 2010-4-8 */ var list = []; var tree = function(objName) { this.title = objName; this.liNode = []; this.ulNode = []; this.str = document.createElement("div"); this.str.innerHTML = this.title; //将各个图片的路径封装成json格式 this.imgs = { folderClose:"img/folderclose.gif", folderOpen:"img/folderopen.gif", rootFolder:"img/imgfolder.gif", line:"img/line.gif", join:"img/join.gif", joinButtom:"img/joinbottom.gif", emty:"img/empty.gif", minus:"img/minus.gif", noLine_minus:"img/nolines_minus.gif", noLine_plus:"img/nolines_plus.gif", plus:"img/plus.gif", plusBottom:"img/plusbottom.gif", line:"img/line.gif", joinButtom:"img/joinbottom.gif", page:"img/page.gif" }; }; //节点ID,父节点ID,节点名字,链接,目标 --->节点信息 tree.prototype.node = function(id,parentId,nodeName,url,target) { this.id = id; this.parentId = parentId; this.nodeName = nodeName; this.url = (url==null?"javascript:void(0)":url); this.target = (target==null?"":target); this.idLength = id.length; //ID的长度 this.hasChild = false; //是否有子节点 this.hasparent = false; //是否有父节点 this.parentNode; //记录该节点的父节点 this.childNode; //记录该节点的子节点 this.isLast = false; //是否是最后一个节点 this.isTop = false; //是否是顶层节点 }; //增加节点 tree.prototype.add = function(id,parentId,nodeName,url,target) { var node = new this.node(id,parentId,nodeName,url,target); list.push(node); this.createTree(node); }; //产生一棵树 tree.prototype.createTree = function(node) { //判断如果它的父节点的ID是0 则表示是一个父节点 则创建一个li列表 所有的父节点是0的节点都是兄弟节点 this.HasParent(node); if(!node.hasparent) { node.isTop = true; //该节点是顶层节点 即根节点 this.formatNode(node); } if(node.hasparent) {//node是子节点,有父节点 则为该父节点的子节点创建一个div 该节点的所有子节点均在该div中 this.findParent(node); this.appendChild(node.parentNode,node); //将父节点和子节点一并传入到子节点中 获取相应的信息 } else { this.formatNode(node); } }; //找到父节点 tree.prototype.findParent = function(node) { var parent; for(var i=0;i<list.length;i++) { if(list[i].id == node.parentId) { //表示该node是属于某个节点的子节点 node.parentNode = list[i]; //找到父节点位置 } } }; //格式化兄弟节点 tree.prototype.formatNode = function(node) { var div1 = document.createElement("div"); var img = document.createElement("img"); img.src = this.imgs.line; var div2 = document.createElement("div"); div2.className = "parent"; div2.id = node.id; div2.innerHTML = "<img id='img"+node.id+"' onclick='expandChild(this.parentNode.id)' src='"+this.imgs.plus+"'/><img src='"+this.imgs.folderClose+"'/><a href='"+node.url+"' target='"+node.target+"'>"+node.nodeName+"</a>"; div1.appendChild(div2); this.ulNode[node.id] = div1; this.liNode[node.id] = div2; }; //添加子节点 tree.prototype.appendChild = function(parent,node) { var div = document.createElement("div"); div.className = "child"; div.id = parent.id+"_"+node.id; div.innerHTML = "<img id='img"+node.id+"' onclick='expandChild(this.parentNode.id)' src='"+this.imgs.plusBottom+"'/><img src='"+this.imgs.folderClose+"'/><a href='"+node.url+"' target='"+node.target+"'>"+node.nodeName+"</a>"; this.liNode[node.id] = div; var obj = this.liNode[node.parentId]; if(obj != null&&typeof(obj)!="undefined") { if(div.id.substr(0,parent.idLength)==node.parentId) { div.style.display = "none"; } obj.appendChild(div); } }; //判断该节点是否有父节点 tree.prototype.HasParent = function(node) { var last; for(var i=0;i<list.length;i++) { if(list[i].id == node.parentId) { node.hasparent = true; } } }; //判断该节点是否有子节点 tree.prototype.HasChild = function(node) { var last; for(var i=0;i<list.length;i++) { if(list[i].parentId == node.id) { node.hasChild = true; } } }; //start tree.prototype.start = function() { for(var node in this.ulNode) { this.str.appendChild(this.ulNode[node]); } var tree = document.getElementById("treeDiv