IT资讯

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在线文档

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注