新学习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 &raquo; Javascripts &raquo; 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> &raquo; <a href="/javascripts/">Javascripts</a> &raquo; <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">&copy;2002-2003 Geir Landr&ouml;</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.live.com/blog/cns!167be6972d4b3ac!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" />
<link href="/jingjindatabase/pub/css/dtree.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;
}

没有更多推荐了,返回首页