dtree.js樹的使用

JS組件dtree輕鬆實現樹型菜單：詳細介紹應用dtree構建一個JavaScript樹型菜單及其中參數配置說明

這幾天寫個網站，用了一個JavaScript寫的樹型菜單，有網友問我要這個代碼，很奇怪，瞭解一下，原來網上不少文章都在討論Js樹型菜單，看了幾個實例，發現確實沒有我用的這個好，所以baidu了一下，略做整理，但願你們不要浪費無用功。
（網上不少人都將dtree改頭換面加以演繹，形成了海量垃圾，這裏但願你們尊重他人勞動成果，保留版權信息，再進行完善的話，還一個潔淨環境，人人如此，咱們就不會在學習中走不少彎路了，當你能這樣作了咱們就慢慢成爲一個真正的程序員了）。  
首先說我用的這個Js樹型菜單，不是我作的是一個老外寫的---dtree。  
http://www.itstudy.cn/www/ArticleContent.asp?ID=5
這個無限級可刷新Js樹型菜單 dTree  
一、可設置無限級菜單  
二、沒必要使用框架  
三、可刷新，多頁面內跳轉不會影響菜單  
四、可限級創造子樹  
五、支持目前主流瀏覽器：IE5，6，7  
六、節點圖片可設置切換圖片效果  

下載url：http://www.destroydrop.com/javascripts/tree/  
看看最下邊的時間，2003 Geir Landro人家就寫出來了，俺如今才用（佩服）  

解壓縮dtree.zip 包。  
dtree目錄下包括這些文件：example01.html 、 dtree.js 、 api.html 、 dtree.css 和img目錄       
注意：除了api.html以外，其它的文件都是必須拷貝的。api.html是dtree的函數介紹。  

打開example01.html文件  

     <link rel="StyleSheet" href="css/dtree.css" type="text/css" />   
     <script type="text/javascript" src="js/dtree.js"></script>   

必須引用的兩個文件。  

生成樹 節點的代碼：  
      <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>   

d.add(0,-1,’My example tree’);  
      這一句爲樹添加了一個根節點，顯示名稱爲’My example tree’     d.add(1,0,’Node 1’,’example01.html’);  
     這一句在樹的根節點下面添加了一個子節點。（d.add（）方法的參數具體含義可參見api.html文件）       
經常使用的：       
第一個參數，表示當前節點的ID       
第二個參數，表示當前節點的父節點的ID,根節點的值爲 -1      
第三個參數，節點要顯示的文字       
第四個參數，節點的Url       
第五個參數，鼠標移至該節點時節點的Title       
第六個參數，節點的target  
第七個參數，用作節點的圖標,節點沒有指定圖標時使用默認值  
第八個參數，用作節點打開的圖標,節點沒有指定圖標時使用默認值  
第九個參數，判斷節點是否打開  

使用實例你們可參照 www.amyou.cn 的樹型菜單  

附 rlog翻譯：

屬性菜單使用說明   

函數   

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";  
  

寫到這裏捎帶說一下，這幾天我研究了一下 extjs裏邊的樹型菜單，功能很是強大，但若是構建一個簡單的網頁上的樹型菜單仍是dtree方便多了。