dtree大型樹插件

一、dtree簡介

     dtree是一個由JavaScript編寫成的簡單的樹形菜單組件，目前免費並且開源。同時支持動態從數據庫引入數據。

二、使用方法

     1、下載dtree.js及dtree.css

　　下載地址：http://destroydrop.com/javascripts/tree/

　　2、引入dtree.js及dtree.css

　   3、html

<div class="tree"></div>

　　4、js代碼

　　1）初始化一個樹　

tree = new dTree("tree");

　　2)設置樹的相關屬性

                tree.add(0,-1,'My example tree');
		tree.add(1,0,'Node 1','#');
		tree.add(2,0,'Node 2','#');
		tree.add(3,1,'Node 1.1','#');
		tree.add(4,0,'Node 3','#');
		tree.add(5,3,'Node 1.1.1','#');
		tree.add(6,5,'Node 1.1.1.1','#');
		tree.add(7,5,'Node 1.1.1.2','#','標題','_parent');
		tree.add(7,0,'Node 4','#');
		tree.add(8,1,'Node 1.2','#');
		tree.add(9,0,'My Pictures','#','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
		tree.add(10,9,'The trip to Iceland','#','Pictures of Gullfoss and Geysir');
		tree.add(11,9,'Mom\'s birthday','#');
		tree.add(12,0,'Recycle Bin','#','','','img/trash.gif');        

　　3)繪制完成

　　　　　　　　　document.write(tree); 

　　5、效果圖

　　

6、dtree api

　　添加一個樹節點的方法：

　　　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          boolen     節點第一次加載是否打開 

7、dtree的方法

openAll();   //打開所有樹節點，在生成樹之前或者之后使用。

例子：tree.openAll();

closeAll();   //關閉所有樹節點，在生成樹之前或者之后使用。

例子：tree.closeAll();

openTo();   //打開某一個樹節點，僅在樹生成后使用。

例子：tree.openTo(3,true) ;