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:{url:"",data:{id:2}},  //异步请求服务器数据初始化一个树结构,url服务器url，data是url请求参数
        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在线文档