仿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;elses += this.icon.minus;}else{if(node.ls)s += this.icon.plusBottom;elses += 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 + "')>";elses += "<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的图片。。。。。