dynatree的基础应用.pptVIP

树形控件Dynatree 1 Jquery树形控件介绍 Dynatree的主要特性 Dynatree的基本用法 2 3 Jquery的树型控件 jstree simpletree treeview dynatree Jstree与simpletree Jstree 优点：功能强大，基本上树型操作里面的所有功能都包含 缺点：样式一般 simpletree 功能相当简单，就是个树的展示 treeview 与dynatree Treeview 功能摆在中间，能满足一些基本的要求，但是对于复杂的树控制还是有些显得功能单薄 Dynatree 功能基本能满足要求，代码也比较清楚 1 Jquery树形控件介绍 Dynatree的主要特性 Dynatree的基本用法 2 3 树形控件Dynatree Dynatree是一个jQuery插件能够实现使用JavaScript动态创建Html Tree控件。 主要特性： 非常适用于创建拥有大量节点的树形控件 (DOM元素当真正有需要的时候才会创建). 树形控件Dynatree 可编程提供一个面向对象接口 支持通过Ajax实现树节点延迟加载 支持为树节点添加Checkboxes和层级选择 支持拖放操作（drag和drop） 支持持久化保存 支持键盘Keyboard操作 可以从HTML代码、JSON或JavaScript对象初化构建树 1 Jquery树形控件介绍 Dynatree的主要特性 Dynatree的基本用法 2 3 dynatree控件的用法 1 在后台拼字符串产生json，json的格式为：[{title :xxxx, key: xxxx, expand:true/false , children:[{title:yyyyy, key:eeee, expand:true/false}, {title:zzzzz, key:dfds, expand:true}]}]。 这么嵌套下去expand:true时产生的树是展开的，当为false时树是闭合的。把这个json字符串放入map中在前台展示。 dynatree控件的用法 2 引入css和js文件： link rel=stylesheet type=text/css href=${base}/js/skin/ui.dynatree.css/ script type=text/javascript src=${base}/js/ui.core.js/script script type=text/javascript src=${base}/js/jquery.cookie.js/script script type=text/javascript src=${base}/js/jquery.dynatree.min.js/script dynatree控件的用法 3 添加这样的div div id=tree style=width:100%;height:410px;overflow:auto;font-size:12px /div dynatree控件的用法 4 在js中： $(function(){ //这是为了在打开页面时就调用这个方法 initTree(); }); } dynatree控件的用法 function initTree(){ //初始化树状结构 $(#tree).empty(); $(#tree).dynatree({ title:机构辖区单位, rootVisible:false, minExpandLevel:1, checkbox:true, selectMode:3, fx:{ height:toggle, duration:200 }, initAjax:{ url:${base}/xtgl/gggl/getJgRootTree }, onLazyRead:function (dtnode) { dtnode.appendAjax({ url:${base}/