前端之插件-dynatree

需求：

1.jquery.js2.jquery-ui.custom.js3.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方法中需要判断当前时间触发的是否是titleif(node.getEventTargetType(event)=='title'){  //如果点击的是文本}onPostInit当树加载完毕时会触发，可以执行一些初始化操作，比如获取上一次活动的选项（需要设置persist=true）this.getActiveNode()