- 浏览: 50355 次
- 性别:
- 来自: 武汉
最新评论
仿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的图片。。。。。
发表评论
-
格式化字符串攻击原理及示例
2012-07-06 09:51 804一、类printf函数簇 ... -
正则表达式
2012-07-06 09:45 636开始系统学习Linux ... -
正则表达式在Java中的应用
2012-07-06 09:37 583自己对正则表达式认识不深,但经常会用到。所以将常用的正则稍 ... -
Flash CS5 用户自定义Button组件二-livepreview的设定
2012-07-06 09:30 6822011/1/7 Flash CS5 用户自定义Butto ... -
065_《Delphi7组件编程参考手册》
2012-07-03 13:43 602《Delphi7组件编程参 ... -
FLEX实现关于
2012-07-02 10:29 462about.mxml width="540&q ... -
Flex 中List控件的使用,绑定XML!
2012-07-02 10:29 677效果图: Flex代码如下: flex/sp ... -
flex按钮使用背景图片
2012-07-02 10:29 506基于美化的需要,有时候我会被要求给按钮贴上图片 下面 ... -
Flex 动态datagrid的应用
2012-07-02 10:29 575Flex有2种常用的datagrid: ... -
实现FLEX 通过AMF跟PHP通信
2012-07-01 00:06 671AMF flex一种远调用协议 目标:目前基本使用 ... -
Flex style - CSS 的使用
2012-07-01 00:06 577Dan Orlando, 软件架 ... -
ArcGIS Flex API Flexviewer使用
2012-07-01 00:05 748开发Widget开发工具:Flex Builder3 开 ... -
Flex模块加载方法
2012-07-01 00:05 616引入包: import mx.core.IFlexDisp ... -
解读Flex性能优化基本原则
2012-07-01 00:05 605你对Flex性能优化的 ...
相关推荐
JS组件dtree轻松实现树型菜单:详细介绍应用dtree构建一个JavaScript树型菜单
基于java的开发源码-JSP树型菜单 DTree.zip 基于java的开发源码-JSP树型菜单 DTree.zip 基于java的开发源码-JSP树型菜单 DTree.zip 基于java的开发源码-JSP树型菜单 DTree.zip 基于java的开发源码-JSP树型菜单 DTree...
在struts里的实现dtree通用树型结构 可以看看 不错的!
JAVAscript带CHECKBOX树型菜单
IFrame框架收缩与JS的DTree树型菜单 本实例Demo实现IFrame框架结构的左右上下收缩,左侧采用了DTree树结构菜单。 --------------------------------------------- This is top! ----------------------------------...
无限级可刷新Js树型菜单 dTree 无限级可刷新Js树型菜单 dTree
dtree支持动态添加,删除节点dtree支持动态添加,删除节点dtree支持动态添加,删除节点dtree支持动态添加,删除节点
JSP树型菜单 DTree.zip
javascript树型菜单(Dtree和Xtree) dtree构建动态树型菜单
无限级可刷新Js树型菜单 dTree,功能比较强大,值得参考。
JSP树型菜单 DTree源代码
dtree是一个由JavaScript编写成的简单的树形菜单组件,目前免费并且开源。dtree 目前有很多的树形菜单组件(比如ext),dtree是一种简单易懂的js组件,不需要复杂的操作即可生产,同时支持动态从数据库引入数据。 ...
一般treeview可以减少代码的变成让结构tree更快的设置
JSP树型菜单 DTree.java源码学习
网上搜集的dtree、xtree和jquery-treeview构建树型菜单,供大家参考
基于Java+JSP树型菜单 DTree源码文件
基于java的JSP树型菜单 DTree.zip
java源码:JSP树型菜单 DTree.zip
基于Java的源码-JSP树型菜单 DTree.zip
有静态树形菜单和动态(从数据库获取数据)树形菜单展示两种 数据库连接采用简单的类实现 数据位MySQL(5.0.21),数据库创建脚本为dtree.sql 菜单既有普通的树结构展示,也有方便做权限等功能的带选择框的展示(含带...