dtree

目前有很多的樹形菜單組件(比如ext)，dtree是一種簡單易懂的js組件，不需要複雜的操作即可生產，同時支持動態從資料庫引入數據。

dTree可以不用添加任何頁面而直接用代碼實現多個欄目，並可以實現無限分級，下面是官方介紹的優點：

- Unlimited number of levels(無限分級)

- Can be used with or without frames(可用於框架或非框架頁面)

- Remembers the state of the tree between pages(在不同頁面之間可記住當前狀態)

- Possible to have as many trees as you like on a page(可以得到你想要數量的樹型)

- All major browsers suported(支持的瀏覽器)

Internet Explorer 5+ Netscape 6+ Opera 7+ Mozilla

- Generates XHTML 1.0 strict validated output(嚴格支持XHTML 1.0)

- Alternative images for each node(每個節點用圖片代替)

1)從官網上下載dtree的源文件壓縮包“dtree.zip”，包內包含以下幾個文件：

img文件夾：包含樹形菜單顯示需要的圖標

api.html ：作者寫的dtree幫助文檔

dtree.css：樹形菜單的樣式

dtree.js ： js核心文件，代碼都在其中

example01.html：樹形菜單實例

2)將壓縮包內的文件拷貝到項目webroot下(example01.html可以不拷貝)

3)新建一個web文件(*.html、*.jsp...都可以)，首先引入css和js文件：

<script type="text/javascript" src="dtree.js">

然後在里創建一個div層，指定class為“dtree”，此時該層就引用了dtree的樣式

註：具體代碼可以參照example01.html

4)最後保存執行即可看到一個樹形菜單。

add(parameters)

添加一個樹節點，實際參數有9個add(id,pid,name,url,title,target,icon,iconOpen,open);

註：dtree.js文件中約87－113行是一些默認圖片的路徑，可以自己配置圖片和路徑。

openAll()

打開全部節點，可在樹對象創建前或創建后調用

closeAll()

關閉全部節點，可在樹對象創建前或創建后調用

openTo(id,select)

打開指定id的節點，可以傳兩個參數：

id 指定需要打開的節點的唯一id

select 是否讓該節點處於選中狀態

config配置

【例】tree.config.closeSameLevel=true;表示打開某級節點時，該級其他處於打開狀態的同級節點會被關閉。

具體配置功能請參照官網實例。

dtree大多數方法都有一個以上的參數，大多數參數都含有默認值，因此不需要每次都把全部參數傳進入

例：dtree.add(id,pid,name,url)；後面5個參數被省略，會採用默認配置

如果是有間隔的默認值，中間需要加引號：

例：dtree.add(id,pid,name,'','','','','',true)；第4-8個參數省略，第9個參數自定義

特殊：add()方法如果需要設置第5個參數(彈出提示信息)，則第4個參數不能為默認，否則是沒有效果的。

例：dtree.add(id,pid,name,url,title); 如果url設置為“''”，不能彈出提示信息

在頁面之間如果包含代碼，將會出現“未定義”錯誤。解決的辦法是利用對象的target屬性，可使用了框架中。