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()
關閉全部的節點，不管樹是否加載完畢均可以使用該方法