到官網下載壓縮包：dTree 主頁：http://destroydrop.com/javascripts/tree/
dTree是個很方便在頁面生成樹的 js 控件，如果你下載了，我猜里在幾分鍾之內便能在頁面上顯示出一顆樹來。
它本身給的例子是通過一些靜態數據構造樹，下面我說一種通過查詢的數據動態構造樹的方法。
例子里沒有真實的數據庫操作，而是用一個模擬的數據庫操作類替代。
解壓縮dtree.zip 包。
dtree目錄下包括這些文件：example01.html 、 dtree.js 、 api.html 、 dtree.css 和img目錄
注意：除了api.html之外，其它的文件都是必須拷貝的。api.html是dtree的函數介紹。
有以下幾部分：
img文件夾： 包含樹形菜單顯示需要的圖標
api.html ： 作者寫的dtree幫助文檔
dtree.css： 樹形菜單的樣式
dtree.js ： js核心文件，代碼都在其中
打開example01.html文件
<link rel="StyleSheet" href="css/dtree.css" type="text/css" />
<script type="text/javascript" src="js/dtree.js"></script>
必須引用的兩個文件。
生成樹 節點的代碼：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<title>Tree</title>
<link rel="StyleSheet" href="./css/dtree.css" type="text/css" /><!-- 引入css樣式表 -->
<script type="text/javascript" src="./js/dtree.js"></script><!-- 引入js腳本 -->
</head>
<body>
<div class="dtree"><!--創建一個div層，指定class為“dtree”，此時該層就引用了dtree的樣式 -->
<script type="text/javascript">
d = new dTree();//new一個樹對象
//設置樹的節點及其相關屬性
d.add(0,-1,'教學資料管理');
d.add(1,0,'個人信息','www.baidui.com');
d.add(2,0,'課件管理','www.baidui.com');
d.add(3,1,'文檔管理','www.baidui.com');
d.add(4,0,'教學方案','www.baidui.com');
d.add(5,3,'退出','www.baidui.com');
d.add(6,5,'論文','www.baidui.com');
d.add(7,0,'概要設計','www.baidui.com');
d.add(8,1,'試卷','www.baidui.com');
d.add(02,2,'專業課件','www.hao123.com');
d.add(03,3,'系文件','www.oracle.com');
//config配置，設置文件夾不能被鏈接，即有子節點的不能被鏈接。
//d.config.folderLinks=false;
document.write(d);
</script>
</div>
</body>
</html>
d.add(0,-1,’My example tree’);
這一句為樹添加了一個根節點，顯示名稱為’My example tree’ d.add(1,0,’Node 1’,’example01.html’);
這一句在樹的根節點下面添加了一個子節點。（d.add（）方法的參數具體含義可參見api.html文件）
add(parameters)：添加一個樹節點，實際參數有9個add(id,pid,name,url,title,target,icon,iconOpen,open); 常用的：
位置 參數別名 類型 功能
1 id int 節點自身的id(唯一)
2 pid int 節點的父節點id
3 name string 節點顯示在頁面上的名稱
4 url string 節點的鏈接地址
5 title string 鼠標放在節點上顯示的提示信息
6 target string 節點鏈接所打開的目標frame
7 icon string 節點關閉狀態時顯示的圖標
8 iconOpen string 節點打開狀態時顯示的圖標
9 open bool 節點第一次加載是否打開
屬性菜單使用說明
函數
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);
配置 config
變量 類型 默認值 描述
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";
tree.config.closeSameLevel=true;表示打開某級節點時，該級其他處於打開狀態的同級節點會被關閉