dtree的使用方法

1.創建樹的一個實例。

  這裏需要引入dtree.js和dtree.css，可通過修改css文件定製自己想要的樣式。

<script type="text/javascript">
<!--
  d = new dTree('d');
  //add(id, pid, name, url, title, target, icon, iconOpen, open)
  d.add(0, -1, '');
  d.add(2, 1, '概況', 'media/all', '概況');
...
...

  document.write(d);

  d.openAll();

  /** 自動定位到id爲2的節點 */
  d.openTo(2, true);
//-->
</script>

2.一些重要的配置：

// Tree object

//變量		        類型	        默認值	描述
//target	        string			所有節點的target
//folderLinks		bool		true	文件夾可被鏈接
//useSelection		bool		true	節點可被選擇高亮
//useCookies		bool		true	樹可以使用cookie記住狀態
//useLines		bool		true	創建帶結構連接線的樹
//useIcons		bool		true	創建帶有圖表的樹
//useStatusText		bool		false	用節點名替代顯示在狀態欄的節點url
//closeSameLevel        bool	        false	同級節點只允許一個節點處於打開狀態
//inOrder		bool		false	加速父節點樹的顯示

function dTree(objName) {
    this.config = {
        target              : null,
        folderLinks         : true,
        useSelection        : true,
        useCookies          : true,
        useLines            : true,
        useIcons            : true,
        useStatusText       : false,
        closeSameLevel      : false,
        inOrder             : false
    }
    this.icon = {
        root                : './js/tree/img/base.gif',
        folder          : './js/tree/img/folder.gif',
        folderOpen  : './js/tree/img/folderopen.gif',
        node                : './js/tree/img/page.gif',
        empty               : './js/tree/img/empty.gif',
        line                : './js/tree/img/line.gif',
        join                : './js/tree/img/join.gif',
        joinBottom  : './js/tree/img/joinbottom.gif',
        plus                : './js/tree/img/plus.gif',
        plusBottom  : './js/tree/img/plusbottom.gif',
        minus               : './js/tree/img/minus.gif',
        minusBottom : './js/tree/img/minusbottom.gif',
        nlPlus          : './js/tree/img/nolines_plus.gif',
        nlMinus         : './js/tree/img/nolines_minus.gif'
    };
    this.obj = objName;
    this.aNodes = [];
    this.aIndent = [];
    this.root = new Node(-1);
    this.selectedNode = null;
    this.selectedFound = false;
    this.completed = false;
};

 

詳細參考：http://www.caohaifeng.com/code/javascript/dtree-api-2.html

 3.功能

add()
添加一個節點到樹形菜單裏，只有當樹形菜單加載完畢後纔可以執行此方法，id、pid、name不能爲空

// Node object

//位置   參數別名     類型    功能
//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        bool    節點第一次加載是否打開

function Node(id, pid, name, url, title, target, icon, iconOpen, open)

 

openall()
打開所有的節點，無論樹是否加載完畢都可以使用該方法

closeAll()
關閉所有的節點，無論樹是否加載完畢都可以使用該方法