Dynatree使用

最近用到了Dynatree的樹形結構，記錄一下它的用法。

需求：

1.jquery.js

2.jquery-ui.custom.js

3.jquery.cookie.js

下載dynatree，放到資源路徑下，在頁面引入ui.dynatree.css，jquery.dynatree.js。

$(function(){
    $("#tree").dynatree({   //tree生成樹形結構所在的節點的ID如<div id="tree"></div>
        title:"樹形結構",    //樹的名字
        minExpandLevel:1,   //1：根節點不能展開
        imagePath:'',       //文件夾節點圖片路徑
        children:'json',    //從這個（json,html,xml）對象初始化一個樹結構
        initId:'treeUl',    //從一個ID為treeUl的ul元素初始化一個樹結構
        initAjax:[],        //非同步請求伺服器數據初始化一個樹結構
        autoFocus:true,     //true:當父節點展開或懶載入時，自動選中第一個子節點
        keyboard:true,      //true:支持鍵盤切換節點
        persist:false,      //true:保存展開狀態到cookie中
        autoCollapse:flase, //true:當一個節點是展開的，自動摺疊其他兄弟節點
        clickFolderMode:3,  //1:activate,2:expand,3:activate and expand
        activeVisible:true, //true:確保活動的節點是可見的（展開的）
        checkbox:false,     //true:顯示選擇框
        selectMode:2,       //1:單選,2:多選,3:多層多選
        fx:null,            //動畫，null或{height:"toggle",duration:200}
        noLink:false,       //用<span>標簽代替所有<a>標簽
        onClick:null,       //點擊會產生 focus,expand,activate,select 事件
        onDblClick:null,    //
        onKeydown:null,     //產生keyboard navigation 事件同時產生（focus,expand,activate）事件
        onKeypress:null,    //
        onFocus:null,       //當一個節點獲得焦點時觸發
        onBlur:null,        //當一個節點失去焦點時觸發
　　　　 debugLevel:0,       //調試模式，0.關閉1.normal 2.debug
    });
});    

以上是基本用法。

從伺服器返回數據的格式一般為json：[{title:"一層節點"},{title:"一層節點",isFolder:true,children:[{title:"二層節點"},{title:"二層節點",selfField:"自定義自定義欄位"}]}]

json還可以添加自定義欄位。

onClick事件：onClick:function(node){node.data.selfField}

通過node.data.selfField可以獲取從伺服器傳過來的欄位的值,其他事件類似。

補充：

$("#tree").dynatree("getTree")獲取樹的實例對象

$("#tree").dynatree("getTree").reload()重新載入樹

如果需要修改initAjax的URL的參數或不同的URL，在reload之前修改參數就好了

$("#tree").dynatree("option","initAjax",{url:'xxxxxxx'})//修改initAjax參數，重寫URL

$("#tree").dynatree("getTree").reload()

如果要隱藏一級所有的checkbox，需要在生成樹的時候設置hideCheckbox=true,設置checkbox不可選unselectable=true

獲取所有選中的項var select = $("#tree").dynatree("getTree").getSelectedNodes()

設置選中或不選中

for(var se in select){

 select[se].select(false)//false不選中，true選中

}

如果顯示了checkbox，點擊時會觸發click事件，為了把選中事件和點擊事件分開，在onClick方法中需要判斷當前時間觸發的是否是title

if(node.getEventTargetType(event)=='title'){

  //如果點擊的是文本

}

onPostInit當樹載入完畢時會觸發，可以執行一些初始化操作，比如獲取上一次活動的選項（需要設置persist=true）

this.getActiveNode()

Dynatree線上文檔