1. 從網(wǎng)上下載dtree控件。
2. 在Jbuilder中新建Web應(yīng)用，命名為TreeLearing。
3. 解壓縮dtree.rar包。
把dtree目錄拷貝至TreeLearing應(yīng)用中。
dtree目錄下包括這些文件：example01.html 、 dtree.js 、 api.html 、 dtree.css 和img目錄
注意：除了api.html之外，其它的文件都是必須拷貝的。只有這個(gè)api.html是對(duì)dtree控件的函數(shù)介紹。
4. 復(fù)制example01.html，并把粘貼后的文件重命名為Tree.jsp。
注意：dtree目錄下的文件結(jié)構(gòu)不要改變，否則樹就不會(huì)正常顯示
5. 在Web應(yīng)用中指定首頁(yè)為Tree.jsp頁(yè)面。
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. 刪除紫紅色部分的代碼，因?yàn)椴恍枰丁?/span>
8. 注意看綠色和藍(lán)色部分的代碼，這才是真正為樹添加節(jié)點(diǎn)的部分。
d.add(0,-1,'My example tree');
這一句為樹添加了一個(gè)根節(jié)點(diǎn)，顯示名稱為'My example tree'
d.add(1,0,'Node 1','example01.html');
這一句在樹的根節(jié)點(diǎn)下面添加了一個(gè)子節(jié)點(diǎn)。（d.add（）方法的參數(shù)具體含義可參見(jiàn)api.html文件）
常用的：
第一個(gè)參數(shù)，表示當(dāng)前節(jié)點(diǎn)的ID
第二個(gè)參數(shù)，表示當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)的ID
第三個(gè)參數(shù)，節(jié)點(diǎn)要顯示的文字
第四個(gè)參數(shù)，點(diǎn)擊該節(jié)點(diǎn)的超鏈接（注意也可以是某個(gè)servlet或是struts應(yīng)用中的某個(gè).do請(qǐng)求）
第五個(gè)參數(shù)，鼠標(biāo)移至該節(jié)點(diǎn)時(shí)顯示的文字
第六個(gè)參數(shù)，指定點(diǎn)擊該節(jié)點(diǎn)時(shí)在哪個(gè)楨中打開超鏈接
9. 運(yùn)行應(yīng)用程序。可以看到一棵漂亮的樹。
存儲(chǔ)目錄的改進(jìn)
dTree的img目錄必須和使用dTree的文件放在同一目錄下，這樣很容易打亂網(wǎng)站的目錄結(jié)構(gòu)，對(duì)dTree做了一個(gè)微小的改動(dòng)，增加了一個(gè)實(shí)例化參數(shù)，實(shí)例化dTree時(shí)可以指定img目錄，打開dtree.js文件。
注意保持路徑的一致，可以這樣實(shí)例化。
// 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;
};
調(diào)用方法：d = new dTree('d','dtree');
修改之后img目錄可以集中放在一處，網(wǎng)站目錄的結(jié)構(gòu)化應(yīng)該會(huì)更好。
api翻譯
屬性菜單使用說(shuō)明
函數(shù)
add()
向樹里添加一個(gè)節(jié)點(diǎn)，只能在樹被創(chuàng)建之前調(diào)用，必須含有id, pid, name 。
參數(shù)：
|
名字
|
類型
|
描述
|
|
id
|
Number
|
唯一的ID號(hào)
|
|
pid
|
Number
|
判定父節(jié)點(diǎn)的數(shù)字,根節(jié)點(diǎn)的值為 -1
|
|
name
|
String
|
節(jié)點(diǎn)的文本標(biāo)簽
|
|
url
|
String
|
節(jié)點(diǎn)的Url
|
|
title
|
String
|
節(jié)點(diǎn)的Title
|
|
target
|
String
|
節(jié)點(diǎn)的target
|
|
icon
|
String
|
用做節(jié)點(diǎn)的圖標(biāo),節(jié)點(diǎn)沒(méi)有指定圖標(biāo)時(shí)使用默認(rèn)值
|
|
iconOpen
|
String
|
用做節(jié)點(diǎn)打開的圖標(biāo),節(jié)點(diǎn)沒(méi)有指定圖標(biāo)時(shí)使用默認(rèn)值
|
|
open
|
Boolean
|
判斷節(jié)點(diǎn)是否打開
|
例子：mytree.add(1, 0, ’My node’, ’node.html’, ’node title’, ’mainframe’, ’img/musicfolder.gif’);
openAll()
打開所有節(jié)點(diǎn) ，可在樹被創(chuàng)建以前或以后調(diào)用。
例子：mytree.openAll();
closeAll()
關(guān)閉所有節(jié)點(diǎn)，可在樹被創(chuàng)建以前或以后調(diào)用。
例子：mytree.closeAll();
openTo()
Opens the tree to a certain node and can also select the node，只能在樹被創(chuàng)建以后調(diào)用。
參數(shù)：
|
名字
|
類型
|
描述
|
|
id
|
Number
|
節(jié)點(diǎn)唯一的ID號(hào)
|
|
select
|
Boolean
|
判斷節(jié)點(diǎn)是否被選擇
|
例子：mytree.openTo(4, true);
配置
|
變量
|
類型
|
默認(rèn)值
|
描述
|
|
target
|
String
|
true
|
所有節(jié)點(diǎn)的target
|
|
folderLinks
|
Boolean
|
true
|
文件夾可鏈接
|
|
useSelection
|
Boolean
|
true
|
節(jié)點(diǎn)可被選擇(高亮)
|
|
useCookies
|
Boolean
|
true
|
樹可以使用cookies記住狀態(tài)
|
|
useLines
|
Boolean
|
true
|
創(chuàng)建帶線的樹
|
|
useIcons
|
Boolean
|
true
|
創(chuàng)建帶有圖標(biāo)的樹
|
|
useStatusText
|
Boolean
|
false
|
用節(jié)點(diǎn)名替代顯示在狀態(tài)欄的節(jié)點(diǎn)url
|
|
closeSameLevel
|
Boolean
|
false
|
只有一個(gè)有父級(jí)的節(jié)點(diǎn)可以被展開,當(dāng)這個(gè)函數(shù)可用時(shí)openAll() 和 closeAll() 函數(shù)將不可用
|
|
inOrder
|
Boolean
|
false
|
如果父級(jí)節(jié)點(diǎn)總是添加在子級(jí)節(jié)點(diǎn)之前,使用這個(gè)參數(shù)可以加速菜單顯示
|
例子：mytree.config.target = "mytarget";
posted on 2009-03-25 16:19
飛翔天使 閱讀(5839)
評(píng)論(1) 編輯 收藏 所屬分類:
ajax