仿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 < this._$.length; i++){ if(_key == this._$[i].key){ return this._$[i].value; } } return null; }, Exists:function(_key){ for(var i = 0; i < this._$.length; i++){ if(_key == this._$[i].key){ return true; } } return false; }, Remove:function(_key){ var tmp = new Array(); for(var i = 0; i < this._$.length; i++){ if(_key != this._$[i].key){ tmp[i] = this._$[i]; } } this._$ = tmp; }, Size:function(){ return this._$.length; }, RemoveAll:function(){ this._$ = new Array(); }, Keys:function(){ var tmp = new Array(); for(var i = 0; i < this._$.length; i++){ tmp[i] = this._$[i].key; } return tmp; }, Values:function(){ var tmp = new Array(); for(var i = 0; i < this._$.length; i++){ tmp[i] = this._$[i].value; } return tmp; }, Debug:function(){ var s = ""; for(var i = 0; i < this._$.length; i++){ s += this._$[i].key + "=" + this._$[i].value + "/n"; } alert(s); } }; var Node = function(id,parentId,name,url,target,icon,order){ this.id = id; this.parentId = parentId; this.name = name; this.url = url; this.target = target; this.children = []; this.parent = null; this.icon = icon ? icon : 'page.gif'; this.isOpen = false; this.order = order; this.hc = false; this.ls = false; }; var Tree = function(path,objName,hasCheck,isDebug){ this.icon = { base : path + "base.gif", cd : path + "cd.gif", empty: path + "empty.gif", folder: path + "folder.gif", folderOpen : path + "folderopen.gif", imgFloder : path + "imgfolder.gif", join : path + "join.gif", joinBottom: path + "joinbottom.gif", line : path + "line.gif", minus : path + "minus.gif", minusBottom : path + "minusbottom.gif", nolinesMinus : path + "nolines_minus.gif", nolinesPlus : path + "nolines_plus.gif", page : path + "page.gif", plus : path + "plus.gif", plusBottom : path + "plusbottom.gif" }; this.path = path; this.obj = objName; this.hasCheck = hasCheck ? hasCheck :false; this.nodes = []; this.selectedNode = []; this.root = new Node(-1); this.nodes[0] = this.root; this.rootDiv = null; TreeMap.RemoveAll(); this.map = TreeMap; this.isDebug = isDebug ? isDebug : false; this.init(); }; Tree.prototype.init = function(){ }; Tree.prototype.Level = function(node){ var i = -1; while(node = this.map.Get(node.parentId)){ i++; } return i+1; }; Tree.prototype.add = function(id,parentId,name,url,target,icon,order){ var node = new Node(id,parentId,name,url,target,icon,order); this.map.Add(node.id,node); this.nodes[this.nodes.length] = node; this.setConfig(node); }; Tree.prototype.setConfig = function(node){ var lsId; for(var i = 0; i < this.nodes.length; i++){ node.isOpen = false; if(this.nodes[i].parentId == node.id){ node.hc = true; } if(node.parentId == this.nodes[i].id){ this.nodes[i].hc = true; } if(this.nodes[i].parentId == node.parentId){ lsId = this.nodes[i].id; if(lsId == node.id){ node.ls = true; }else{ this.nodes[i].ls = false; } } } }; Tree.prototype.getLast = function(pid){ for(var i = 0; i < this.nodes.length; i++){ if(this.nodes[i].parentId == pid){ if(this.nodes[i].ls){ return this.nodes[i]; } } } }; Tree.prototype.create = function(){ var str = "<div id='tree" + this.root.id + "' class='tree'>"; str += this.addNode(this.root); str += "</div>"; document.write(str); }; Tree.prototype.addNode = function(node){ var s = ""; for(var i = 0; i < this.nodes.length; i++){ if(this.nodes[i].parentId == node.id){ s += this.append(this.nodes[i]); } }; return s; }; Tree.prototype.indent = function(node){ var s = ""; if(node.parentId == -1){ s += "<img src='" + this.icon.base + "'/>" + node.name; return s; } if(node.hc){ s += "<img id='plusimg" + node.id + "' src='"; if(node.isOpen){ if(node.ls) s += this.icon.minusBottom; else s += this.icon.minus; }else{ if(node.ls) s += this.icon.plusBottom; else s += this.icon.plus; } s += "' alt=''/>"; s += "<img id='folder" + node.id + "' src='" + (node.isOpen?this.icon.folderOpen : this.icon.folder) + "'/>"; }else{ s += "<img id='plusimg" + node.id + "' src='" + (node.ls ? this.icon.joinBottom : this.icon.join) + "'/>"; s += "<img id='folder" + node.id + "' src='" + this.icon.page + "'/>"; } var t = ""; while(node = this.map.Get(node.parentId)){ if(node.parentId == -1) break; if(node.ls){ t = "<img src='" + this.icon.empty + "'/>" + t; }else{ t = "<img src='" + this.icon.line + "' />" + t; } } return t + s; }; Tree.prototype.append = function(node){ var s = "<div id='tree" + node.id +"' class='tree'>"; s += this.indent(node); if(this.hasCheck && node.parentId != -1){ s += "<input type='checkbox' value='" + node.id + "' id='chk" + node.id + "'/>"; s += "<label for='chk" + node.id + "'>"; } if(node.url && node.parentId != -1){ s += "<a id='an" + node.id + "' href='" + url + "' " + ((node.target) ? "target='" + node.target + "'" : ""); s += ">"; }else if(node.parentId != -1){ if(node.hc) s += "<a id='an" + node.id + "' href='javascript:void(0)' onclick=" + this.obj + ".open('" + node.id + "')>"; else s += "<a id='an" + node.id + "'>"; } if(node.parentId != -1) s += node.name; if(this.isDebug) s += "<span>......id==" + node.id + "</span>"; if(node.parentId != -1) s += "</a>"; if(this.hasCheck){ s += "</label>"; } if(node.hc){ s += "<div id='child" + node.id + "'"; s += "style='display:" + ((node.parentId != -1 && !node.isOpen) ? "none":"block") + "'>"; s += this.addNode(node); s += "</div>"; } s += "</div>"; 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 += "<div id='child" + node.parentId + "'"; str += "style='display:block'>"; str += this.append(node); str += "</div>"; var pd = document.getElementById("tree" + node.parentId); pd.innerHTML += str; }else{ str += "<div id='child" + pnode.parentId + "'"; str += " style='display:block'>"; str += this.append(pnode); str += "</div>"; 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的图片。。。。。