仿dtree编写的树型菜单,增加了可以动态增加节点

　　仿dtree编写的树型菜单，增加了可以动态增加节点
　　先上效果图,跟dtree差不多，不过加了些调试信息
　　
　　动态增加节点后效果图：
　　
　　代码如下：
　　样式表： .node { font-size:12px; font-family:"宋体"; } .tree{ font-size:12px; } .tree img{ border:0px; vertical-align:middle; } .tree a{ text-decoration:none; font-size:12px; color:#333333; } .tree div{ font-size:12px; padding-top:0px; margin:0px; } .tree input{ width:16px; height:16px; margin:0px; } .tree span{ font-size:12px; color:red; } Js:  var TreeMap = { _$ : new Array(), Add:function(_key,_value){ if(this.Exists(_key)){ this.Remove(_key); } this._$[this._$.length] = {key:_key,value:_value}; }, Get:function(_key){ for(var i = 0; i "; str += this.addNode(this.root); str += ""; document.write(str); }; Tree.prototype.addNode = function(node){ var s = ""; for(var i = 0; i " + node.name; return s; } if(node.hc){ s += ""; s += ""; }else{ s += ""; s += ""; } var t = ""; while(node = this.map.Get(node.parentId)){ if(node.parentId == -1) break; if(node.ls){ t = "" + t; }else{ t = "" + t; } } return t + s; }; Tree.prototype.append = function(node){ var s = ""; s += this.indent(node); if(this.hasCheck && node.parentId != -1){ s += ""; s += ""; } if(node.url && node.parentId != -1){ s += ""; }else if(node.parentId != -1){ if(node.hc) s += ""; else s += ""; } if(node.parentId != -1) s += node.name; if(this.isDebug) s += "......id==" + node.id + ""; if(node.parentId != -1) s += ""; if(this.hasCheck){ s += ""; } if(node.hc){ s += ""; s += this.addNode(node); s += ""; } s += ""; return s; }; Tree.prototype.open = function(id){ var node = this.map.Get(id); var c = document.getElementById("child" + id); var plusimg = document.getElementById("plusimg" + id); var folder = document.getElementById("folder" + id); if(!node.isOpen){ c.style.display = "block"; node.isOpen = true; plusimg.src = node.ls ? this.icon.minusBottom : this.icon.minus; folder.src = this.icon.folderOpen; }else{ c.style.display = "none"; node.isOpen = false; plusimg.src = node.ls ? this.icon.plusBottom : this.icon.plus; folder.src = this.icon.folder; } }; Tree.prototype.synAdd = function(id,parentId,name,url,target,icon,order){ if(!this.map.Exists(parentId)){ alert("未找到对应的父节点:" + parentId); return false; } if(this.map.Exists(id)){ alert("已存在节点id为:" + id + "的节点"); return false; } var pnode = this.map.Get(parentId); var _lstNode = this.getLast(pnode.parentId); var sameLevelNode = this.getLast(parentId); var hc = pnode.hc; var ls = pnode.ls; this.add(id,parentId,name,url,target,icon,order); var node = this.map.Get(id); var str = ""; if(!hc){ str += ""; str += this.append(node); str += ""; var pd = document.getElementById("tree" + node.parentId); pd.innerHTML += str; }else{ str += ""; str += this.append(pnode); str += ""; var pd = document.getElementById("tree" + pnode.id); pd.innerHTML = str; var d = document.getElementById("child" + pnode.id); d.style.display = "block"; } pnode.isOpen = true; var pi = document.getElementById("plusimg" + parentId); var fi = document.getElementById("folder" + parentId); if(pnode.ls){ pi.src = this.icon.minusBottom; fi.src = this.icon.folderOpen; }else{ pi.src = this.icon.minus; fi.src = this.icon.folderOpen; } if(sameLevelNode){ var _pi = document.getElementById("plusimg" + sameLevelNode.id); if(sameLevelNode.hc){ _pi.src = sameLevelNode.isOpen ? this.icon.minus : this.icon.plus; }else{ _pi.src = this.icon.join; } } var an = document.getElementById("an" + parentId); an.href = "javascript:void(0)"; var tmp = this.obj; an.onclick = function(){ eval(tmp + ".open('" + parentId + "')"); }; }; Tree.prototype.synDelele = function(id,flag){ var node = this.map.Get(id); if(!node){ return; } var pnode = this.map.Get(node.parentId); this.map.Remove(id); //保留子节点并且自动提升一级 if(flag){ for(var i = 0; i < this.nodes.length; i++){ if(this.nodes[i].parentId == id){ this.nodes[i].parentId = pnode.id; } } var d = document.getElementById("child" + pnode.id); } }; Tree.prototype.debug = function(){ var t = document.getElementById("tree-1"); alert(t.innerHTML); }; var mt = new Tree('img/','mt',true,true); mt.add(0,-1,'后台系统'); mt.add(1,0,'会员管理'); mt.add(11,1,'角色管理'); mt.add(12,1,'密码管理'); mt.add(13,1,'积分管理'); mt.add(14,1,'邮件管理'); mt.add(2,0,'文章管理'); mt.add(21,2,'类别管理'); mt.add(211,21,'财经'); mt.add(212,21,'政治'); mt.add(213,21,'体育'); mt.add(214,21,'读书'); mt.add(215,21,'教育'); mt.add(216,21,'社会'); mt.add(22,2,'内容管理'); mt.add(23,2,'备份管理'); mt.add(3,0,'图片管理'); mt.add(31,3,'批量上传'); mt.add(4,0,'文件管理'); mt.add(5,0,'商品管理'); mt.add(6,0,'系统管理'); mt.add(7,0,'短信管理'); 调用方式：
　　var mt = new Tree('img/','mt',true,true);
　　mt.create();
　　动态添加： function fnAdd(){ //mt.synAdd(99,3,'动态新增'); var id = document.getElementById("id").value; var pid = document.getElementById("pid").value; var name = document.getElementById("name").value; mt.synAdd(id,pid,name); }  
　　var Tree = function(path,objName,hasCheck,isDebug)； path：图片路径
　　objName:创建的对象的名字与变量名相同
　　hasCheck:是否有checkbox
　　isDebug:是否显示相关调试信息，比如显示每个节点的id
　　图片就不上传了，就是dtree的图片。。。。。