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
飛翔天使 閱讀(5837)
評論(1) 編輯 收藏 所屬分類:
ajax