你的位置:首页 > Java教程

[Java教程]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, 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在线文档