1. 从网上下载dtree控件。
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>
</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. 运行应用程序。可以看到一棵漂亮的树。
存储目录的改进
dTree的img目录必须和使用dTree的文件放在同一目录下，这样很容易打乱网站的目录结构，对dTree做了一个微小的改动，增加了一个实例化参数，实例化dTree时可以指定img目录，打开dtree.js文件。
注意保持路径的一致，可以这样实例化。
// url图片目录路径
function dTree(objName, url) {
this.config = {
target : null,
folderLinks : true,
useSelection : true,
useCookies : true,
useLines : true,
useIcons : true,
useStatusText : false,
closeSameLevel : false,
inOrder : false
}
this.icon = {
root : url + "/img/base.gif",
folder : url + "/img/folder.gif",
folderOpen : url + "/img/folderopen.gif",
node : url + "/img/page.gif",
empty : url + "/img/empty.gif",
line : url + "/img/line.gif",
join : url + "/img/join.gif",
joinBottom : url + "/img/joinbottom.gif",
plus : url + "/img/plus.gif",
plusBottom : url + "/img/plusbottom.gif",
minus : url + "/img/minus.gif",
minusBottom : url + "/img/minusbottom.gif",
nlPlus : url + "/img/nolines_plus.gif",
nlMinus : url + "/img/nolines_minus.gif"
};
this.obj = objName;
this.aNodes = [];
this.aIndent = [];
this.root = new Node(-1);
this.selectedNode = null;
this.selectedFound = false;
this.completed = false;
};
调用方法：d = new dTree('d','dtree');
修改之后img目录可以集中放在一处，网站目录的结构化应该会更好。
api翻译
属性菜单使用说明
函数
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 2009-03-25 16:19
飞翔天使 阅读(5820)
评论(1) 编辑 收藏 所属分类:
ajax