dtree动态树+Javascript右键菜单

来源：互联网发布：php define const 区别编辑：程序博客网时间：2024/05/22 13:17

dtree控件介绍
dtree动态树+Javascript右键菜单（一）

1、从网上下载dtree控件。（好多地方都有的哦：P）
2、在Jbuilder中新建Web应用，命名为TreeLearing
3、解压缩dtree.rar包。
把dtree目录拷贝至TreeLearing应用中。
dtree目录下包括这些文件：example01.html 、 dtree.js 、 api.html 、 dtree.css 和img目录
注意：除了api.html之外，其它的文件都是必须拷贝的。只有这个api.html是对dtree控件的函数介绍。
4、复制example01.html，并把粘贴后的文件重命名为Tree.jsp
：）（保留原来的文件，以备参考是个好习惯哦~~）
注意dtree目录下的文件结构不要改变，否则树就不会正常显示
5、在Web应用中指定首页为Tree.jsp页面。
6、Tree.jsp中的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Destroydrop ? Javascripts ? Tree</title><link rel="StyleSheet" href="dtree.css" type="text/css" /><script type="text/javascript" src="dtree.js"></script></head><body><h1><a href="/">Destroydrop</a> ? <a href="/javascripts/">Javascripts</a> ? <a href="/javascripts/tree/">Tree</a></h1><h2>Example</h2><div class="dtree"><p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p><script type="text/javascript">  <!--  d = new dTree('d');  d.add(0,-1,'My example tree');  d.add(1,0,'Node 1','example01.html');  d.add(2,0,'Node 2','example01.html');  d.add(3,1,'Node 1.1','example01.html');  d.add(4,0,'Node 3','example01.html');  d.add(5,3,'Node 1.1.1','example01.html');  d.add(6,5,'Node 1.1.1.1','example01.html');  d.add(7,0,'Node 4','example01.html');  d.add(8,1,'Node 1.2','example01.html');  d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');  d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');  d.add(11,9,'Mom\'s birthday','example01.html');  d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');  document.write(d);  //--></script></div><p><a href="mailto:drop@destroydrop.com">?2002-2003 Geir Landr?</a></p></body></html>

7、删除紫红色部分的代码，因为不需要哦。

8、注意看绿色和蓝色部分的代码，这才是真正为树添加节点的部分。

d.add(0,-1,'My example tree');

这一句为树添加了一个根节点，显示名称为'My example tree'

d.add(1,0,'Node 1','example01.html');

这一句在树的根节点下面添加了一个子节点。（d.add（）方法的参数具体含义可参见api.html文件）

常用的：

第一个参数，表示当前节点的ID

第二个参数，表示当前节点的父节点的ID

第三个参数，节点要显示的文字

第四个参数，点击该节点的超链接（注意也可以是某个servlet或是struts应用中的某个.do请求）

第五个参数，鼠标移至该节点时显示的文字

第六个参数，指定点击该节点时在哪个桢中打开超链接

……

9、运行应用程序。可以看到一棵漂亮的树。

原贴地址http://minifishpingping.spaces.l ... 972d4b3ac!139.entry

Dtree所引用的css

一：dtree.css .dtree {//定义目录树节点的字体，字号，颜色font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size: 12px;color: #006600;white-space: nowrap;}.dtree img {//定义选用节点图标的样式，位置border: 0px;vertical-align: middle;} .dtree a {// color: #006600; text-decoration: none; } .dtree a.node, .dtree a.nodeSel { white-space: nowrap;//表格随着文字自动伸展（如果未设置TD宽度，则noWrap属性是起作用的；如果设置了TD宽度，则noWrap属性是不起作用的。） padding: 0px 0px 0px 0px; } .dtree a.node:hover, .dtree a.nodeSel:hover { color: #006600; text-decoration: none; } .dtree a.nodeSel {//节点选中后的节点背景颜色 background-color: #c0d2ec; } .dtree .clip { overflow: hidden; }

二：tree.css body {SCROLLBAR-FACE-COLOR:#D2FFD2; SCROLLBAR-HIGHLIGHT-COLOR: #8AA583; SCROLLBAR-SHADOW-COLOR: #8AA583; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #8AA583; SCROLLBAR-TRACK-COLOR: #E1FFE1; SCROLLBAR-DARKSHADOW-COLOR: #ffffff;        background-attachment: fixed; //scroll : 　背景图像是随对象内容滚动 //fixed : 　背景图像固定        background-repeat: no-repeat; //background-repeat : repeat | no-repeat | repeat-x | repeat-y //repeat : 　背景图像在纵向和横向上平铺 //no-repeat : 　背景图像不平铺 //repeat-x : 　背景图像在横向上平铺 //repeat-y : 　背景图像在纵向平铺        background-color: EFF7F7; }

Dtree目录树的总结

一：函数

1：页面中tree.add(id,pid,name,url,title,target,icon,iconOpen,open);参数说明：id：节点自身的

idpid：节点的父节点的idname ：节点显示在页面上的名称url ：节点的链接地址title ：鼠标放在节点上所出现的提示信息target ：节点链接所打开的目标frame（如框架目标mainFrame或是_blank,_self之类）icon ：节点关闭时的显示图片的路径iconOpen：节点打开时的显示图片的路径open ：布尔型，节点是否打开（默认为false）注：open项：顶级节点一般采用true，即pid是－1的节点2：dtree.js文件中约87－113行是一些默认图片的路径，注意要指对。二：页面中的书写1：默认值的书写规则（从左至右，依次省略）即 tree.add(id,pid,name,url);后面5个参数可以省略2：有间隔时的默认值（如存在第6个参数，但第5个参数想用默认值）即 tree.add(id,pid,name,url,"",target);必须这样写其他 tree.add(id,pid,name,url,"","","","",true);3：样式表（1）：可以将dtree.css中的样式附加到你的应用中的主css中，如a.css（2）：也可以同时引用dtree.css与a.css两个文件，但前提条件是两个css文件中不能有重复的样式<link href="/jingjindatabase/pub/css/a.css" rel="stylesheet" type="text/css" />

4：页面代码书写的位置是：一般写在表格的td之中<script type="text/javascript" src="/myMobanGis/pub/js/dtree.js"></script><script type="text/javascript">tree = new dTree('tree');tree.add("1","-1","京津","","","","","",true);tree.add("11","1","A","","","","","",true);tree.add("110","11","A-1","content.jsp?moduleName=XXX","","mainFrame");tree.add("111","11","A-2","javascript:void(0)","","链接在哪里显示");tree.add("112","11","A-3","javascript:void(0)","","mainFrame");tree.add("113","11","A-4","/.jsp","","mainFrame");tree.add("114","11","A-5","/.jsp","","mainFrame");tree.add("115","11","A-6","/.jsp","","mainFrame"); tree.add("12","1","B","","","","","",true);tree.add("121","12","B-1","javascript:调用本页内的js函数","","mainFrame");tree.add("122","12","B-2");tree.add("13","1","C","","","","","",true);tree.add("131","13","C-1","javascript:void(0)","","mainFrame");tree.add("132","13","C-2","javascript:void(0)","","mainFrame");tree.add("133","13","C-3","javascript:void(0)","","mainFrame");tree.add("14","1","D","","","","","",true);tree.add("141","14","D-1","javascript:void(0)","","mainFrame");document.write(tree);</script>说明：这是静态的代码，动态的可用循环加入。

三：css文件的注解

1:dtree.css .dtree {//定义目录树节点的字体，字号，颜色font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size: 12px;color: #006600;white-space: nowrap;}.dtree img {//定义选用节点图标的样式，位置border: 0px;vertical-align: middle;}.dtree a {//color: #006600;text-decoration: none;}.dtree a.node, .dtree a.nodeSel {white-space: nowrap;padding: 0px 0px 0px 0px;}.dtree a.node:hover, .dtree a.nodeSel:hover {color: #006600;text-decoration: none;}.dtree a.nodeSel {background-color: #c0d2ec;}.dtree .clip {overflow: hidden;}

http://blog.163.com/xiao66_fei/blog/static/109908764200911434218203/