jsp-dtree-目录树解决树形结构问题

原文：http://hi.baidu.com/hhayy7758/blog/item/b8496f12c7ce885af919b87b.html

官网:http://www.destroydrop.com/javascripts/tree/
演示:http://www.destroydrop.com/javascripts/tree/example/
DTree的注意事项:

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         ：节点自身的id
pid       ：节点的父节点的id
name    ：节点显示在页面上的名称
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;
}
http://blog.sina.com.cn/s/blog_4ae9618f010006y3.html
我最后的问题是:

老是说在 tree =new dTree（"tree"）;的时候报dTree 未定义.郁闷!
解决办法:
dtree.js的位置不正确！
我的本来是在通过这引用的,在<%@ include file="../common/safehead.jsp"%>里面写的有
<link rel="stylesheet" href="../common/dtree2.css" type="text/css"></link>
<script type="text/javascript" src="../common/dtree2.js"></script>
可发现不行,必须把这两句写在你的本页面中,不管被引用的页面是否写的有!!
=========================================================================

js树型菜单 dtree轻松实现

刚发现的很好很强大，无限节点

这个无限级可刷新Js树型菜单 dTree
　1、可设置无限级菜单
　2、不必使用框架
　3、可刷新，多页面内跳转不会影响菜单
　4、可限级创造子树
　5、支持目前主流浏览器：IE5，6，7
　6、节点图片可设置切换图片效果

下载url：http://www.destroydrop.com/javascripts/tree/
看看最下边的时间，2003 Geir Landro人家就写出来了，俺现在才用（佩服）

解压缩dtree.zip 包。
dtree目录下包括这些文件：example01.html 、 dtree.js 、 api.html 、 dtree.css 和img目录
注意：除了api.html之外，其它的文件都是必须拷贝的。api.html是dtree的函数介绍。

打开example01.html文件

必须引用的两个文件。

生成树节点的代码：
     <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>

d.add(0,-1,’My example tree’);
     这一句为树添加了一个根节点，显示名称为’My example tree’    d.add(1,0,’Node 1’,’example01.html’);
    这一句在树的根节点下面添加了一个子节点。（d.add（）方法的参数具体含义可参见api.html文件）
常用的：
第一个参数，表示当前节点的ID
第二个参数，表示当前节点的父节点的ID,根节点的值为 -1
第三个参数，节点要显示的文字
第四个参数，节点的Url
第五个参数，鼠标移至该节点时节点的Title
第六个参数，节点的target
第七个参数，用做节点的图标,节点没有指定图标时使用默认值
第八个参数，用做节点打开的图标,节点没有指定图标时使用默认值
第九个参数，判断节点是否打开

使用实例大家可参照 www.amyou.cn 的树型菜单

附 rlog翻译：

属性菜单使用说明

函数

add()
向树里添加一个节点
只能在树被创建之前调用.
必须 id, pid, name
参数
名字    类型    描述
id    Number    唯一的ID号
pid    Number    判定父节点的数字,根节点的值为 -1
name    String    节点的文本标签
url    String    节点的Url
title    String    节点的Title
target    String    节点的target
icon    String    用做节点的图标,节点没有指定图标时使用默认值
iconOpen    String    用做节点打开的图标,节点没有指定图标时使用默认值
open    Boolean    判断节点是否打开
例子
mytree.add(1, 0, ’My node’, ’node.html’, ’node title’, ’mainframe’, ’img/musicfolder.gif’);

openAll()
打开所有节点
可在树被创建以前或以后调用.
例子
mytree.openAll();

closeAll()
关闭所有节点
可在树被创建以前或以后调用.
例子
mytree.closeAll();

openTo()
Opens the tree to a certain node and can also select the node.
只能在树被创建以后调用..
参数
名字    类型    描述
id    Number    节点唯一的ID号
select    Boolean    判断节点是否被选择
例子
mytree.openTo(4, true);

配置
变量    类型    默认值    描述
target    String    true    所有节点的target
folderLinks    Boolean    true    文件夹可链接
useSelection    Boolean    true    节点可被选择(高亮)
useCookies    Boolean    true    树可以使用cookies记住状态
useLines    Boolean    true    创建带线的树
useIcons    Boolean    true    创建带有图标的树
useStatusText    Boolean    false    用节点名替代显示在状态栏的节点url
closeSameLevel    Boolean    false    只有一个有父级的节点可以被展开,当这个函数可用时openAll() 和 closeAll() 函数将不可用
inOrder    Boolean    false    如果父级节点总是添加在子级节点之前,使用这个参数可以加速菜单显示.
例子
mytree.config.target = "mytarget";

posted on 2011-03-15 13:27 hotty 阅读(2250) 评论(0) 收藏举报