2019獨角獸企業重金招聘Python工程師標準>>>

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

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

下載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方便多了。

轉載于:https://my.oschina.net/u/225677/blog/88914

總結

以上是生活随笔為你收集整理的dtree.js树的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。