dtree是一個免費的js樹形菜單，使用簡單，界面制作的也很專業。
dtree樹形菜單
不同的項目需求，造成菜單樹的各種變化，是以在介紹dtree的同時，本文着重講述如何改造dtree，以達到為不同項目所用的目的。
dtree 分析
dtree的使用非常簡單，在下載下傳的dtree壓縮檔案中（2.05），要用的隻有三個：
1. dtree.js : dtree功能腳本
2. dtree.css : 樣式檔案
3. img檔案夾 : 存放dtree使用的圖示，參看下圖：
dtree圖示
很容易就可以編寫出類似上面的dtree菜單樹，源代碼如下：
<html>
<head>
<link rel="stylesheet" href="dtree.css" type="text/css" />
</head>
<body>
<script type="text/javascript" >
<!–
d = new dtree( ‘d’ ) ; //建立樹，名稱為’d'（注意和樹的對象變量名稱要一緻）
d.add ( 0 ,-1 ,‘my example tree’ ) ; //在樹中增加節點。節點id是0，父節點是-1(根節點)，節點文字’my example tree’
d.add ( 1 ,0 ,‘node 1′ ,‘default.html’ ) ; //根節點的子節點(父節點是0)，’default.html’表示節點連結(滑鼠點選頁面跳轉url)
d.add ( 2 ,0 ,‘node 2′ ,‘default.html’ ) ;
d.add ( 3 ,1 ,‘node 1.1′ ,‘default.html’ ) ;
d.add ( 4 ,0 ,‘node 3′ ,‘default.html’ ) ;
d.add ( 5 ,3 ,‘node 1.1.1′ ,‘default.html’ ) ;
d.add ( 6 ,5 ,‘node 1.1.1.1′ ,‘default.html’ ) ;
d.add ( 7 ,0 ,‘node 4′ ,‘default.html’ ) ;
d.add ( 8 ,1 ,‘node 1.2′ ,‘default.html’ ) ;
d.add ( 9 ,0 ,‘my pictures’ ,‘default.html’ ,‘pictures i\’ ve taken over the years’ ,” ,” ,‘img/imgfolder.gif’ ) ; //’pictures i\’ve taken over the years’是連結title，指定圖示
d.add ( 10 ,9 ,‘the trip to iceland’ ,‘default.html’ ,‘pictures of gullfoss and geysir’ ) ;
d.add ( 11 ,9 ,‘mom\’ s birthday’ ,‘default.html’ ) ;
d.add ( 12 ,0 ,‘recycle bin’ ,‘default.html’ ,” ,” ,‘img/trash.gif’ ) ;
document.write ( d) ; //輸出dtree的html（顯示）
//–>
</script>
</body>
</html>
分析dtree.js，在dtree中隻有兩個結構：”節點”和”樹”，dtree的所有功能和構造都在于這兩個結構的屬性和行為中，node比較簡單，隻包含節點的基本屬性和一個構造方法，是以對dtree的分析和研究的重點可放在dtree結構中。
attributes(屬性)
id : int 每個節點都有唯一id，增加節點時需要手工定義一個id。
pid : int 父節點id，根節點的父節點是-1。
name : string 節點名稱（顯示名字）
url : string 節點url（滑鼠點選跳轉位址）
title : string 滑鼠移動到節點上顯示的文字
target : string 頁面跳轉所在的frame
icon : string 節點關閉時顯示的圖示位址
iconopen : string 節點打開時顯示的圖示位址
_io : boolean 節點是否已打開，預設值false。
_is : boolean 節點是否被選中，預設值false。
_ls : boolean 是否是最後一個節點，預設值false。
_hc : boolean 是否有子節點，預設值false。
_ai : int 在樹的節點數組中的下标(位置)，預設值0。
_p : node 父節點對象，預設值null。
operations(行為)
node(id, pid, name, url, title, target, icon, iconopen, open) : void 構造方法，建立一個節點對象。open對應_io，表示節點是否已經打開。
節點類圖
dtree
obj : string 樹的名稱，在建立樹時定義。
anodes : node[] 樹中的節點數組。
aindent : [] 數組。
root : node 根節點。
selectednode : node 目前選擇的節點。
selectedfound : boolean 是否有選中節點，預設false。
completed : boolean 樹建構html是否已完成完成，預設false。
config : hash數組 樹的配置
target: 設定所有節點的target，預設null
folderlinks: 目錄節點是否可以有連結,預設true
useselection: 節點是否可以被選擇(高亮),預設true
usecookies: 設定使用cookies儲存樹的狀态,預設true
uselines: 是否顯示路徑點線,預設true
useicons: 是否顯示圖示,預設true
usestatustext: 是否在狀态欄輸出節點文字（替換原來的url顯示）,預設false
closesamelevel: 是否自動關閉兄弟節點（當打開本節點時）,注意設定true時，openall()和closeall()不能工作，預設false
inorder: 如果父節點總是在子節點之前加入樹，設定true有更好的效率，預設false
icon : hash數組 圖示
root: 根,預設'img/base.gif'
folder: 關閉的檔案夾,預設'img/folder.gif'
folderopen: 打開的檔案夾,預設'img/folderopen.gif'
node: 檔案,預設'img/page.gif'
empty: 空,預設'img/empty.gif'
line: 豎線,預設'img/line.gif'
join: 丁線,預設'img/join.gif'
joinbottom: 直角線,預設'img/joinbottom.gif'
plus: 加号丁線,預設'img/plus.gif'
plusbottom: 加号直角線,預設'img/plusbottom.gif'
minus: 減号丁線,預設'img/minus.gif'
minusbottom: 減号直角線,預設'img/minusbottom.gif'
nlplus: 無線加号,預設'img/nolines_plus.gif'
nlminus: 無線減号,預設'img/nolines_minus.gif'
dtree(objname) : void 構造方法，建立樹對象。objname: 樹名稱。
add(id, pid, name, url, title, target, icon, iconopen, open) : void 在樹中增加一個節點，節點對象添置到anodes數組末尾。參數open表示節點是否已經打開。
openall() : void 打開樹中所有節點。此方法由oall方法實作。
closeall() : void 關閉樹中所有節點。此方法由oall()方法實作。
tostring() : string 建構樹的html。此方法主要由addnode()方法實作。傳回：html。
addnode(pnode) : string 建構pnode的所有子節點的html。參數pnode: 父節點對象。傳回：html。
node(node, nodeid) : string 建構node的html。參數node: 節點對象；nodeid: 節點在節點數組anodes中的位置。傳回：html。
indent(node, nodeid) : string 建構node前面的空格、點線、加減号的html。參數node: 節點對象；nodeid: 節點在節點數組anodes中的位置。傳回：html。
setcs(node) : void 檢查并設定:1. node節點是否有子節點; 2. node節點是否是節點數組anodes中的最後一個。參數node: 節點對象。
getselected() : int 從cookies中擷取已選中的節點，傳回：節點id或null(沒有選中任何節點)。
s(id) : void 滑鼠點選節點發生的動作，高亮選擇的節點，并記錄在cookies中。參數id： 節點在節點數組anodes中的位置
o(id) : void 滑鼠點選+-圖示發生的動作，打開或關閉指定節點，并記錄在cookies中。參數id： 節點在節點數組anodes中的位置
oall(status) : void 打開或關閉所有節點，并将狀态記錄在cookies中。參數status：true打開 fasle關閉
opento(nid, bselect, bfirst) : void 打開指定節點，并将狀态記錄在cookies中。參數nid：節點id或節點在節點數組anodes中的位置；bselect：true-打開同時被選中，false-打開不被選中；bfirst：true-nid是在節點數組anodes中的位置，false-nid是節點id。
closelevel(node) : void 關閉和node同級别以及他們的下級的所有節點。參數node：節點對象。
closeallchildren(node) : void 關閉node的所有子節點。參數node：節點對象。
nodestatus(status, id, bottom) : void 改變節點的狀态（關閉 或 打開）。參數status： 要設定的狀态(true:打開 false:關閉)；id: 節點id；bottom: true-是最後一個節點。
clearcookie() : void 清除cookies。
setcookie(cookiename, cookievalue, expires, path, domain, secure) : void 記錄入cookies。
getcookie(cookiename) : string 從cookies中讀取。
updatecookie() : void 将所有打開的節點id記錄在cookies中。
isopen(id) : boolean 根據cookies的記錄，判斷一個節點是已經打開。參數id：節點id
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)