Dynatree 树控件基础详解

最小折叠层数
引用图标路径 子元素 是否显示为复选框(默认为false) 1:单选, 2:不关联复选, 3:关联复选 jquery点击打开隐藏树节点的动画效果( 一般如前面设置) 键盘导航(默认为true) 自动设置焦点(默认为true) Cookic中读取记录(默认为false) 使用span代替a标签，取消连接
Java及groovy后台递归
原理： 1、通过数据库查询得到需要的数据，再使用StringBuffer循环递归拼 接全部的json信息。 2、通过sql多次查询需要的数据，在拼接成字符串，可以减少递归， 但不能减少循环次数。 Tip： 1、这里需要多次拼接字符串，请 使用StringBuffer以减少系统开支 2、拼接字符串时要小心，少任何 半个括号或错任何标点，都会导 致json数据出错，页面也将显示不 出树。
节点属性
title
key isFolder isLazy tooltip icon addClass noLink activate focus
节点名（null）
键（null） 是否收起（false） 是否延迟加载（false） 鼠标显示（null） 图标（null）这里null为默认图标，false为 无图标 增加class属性（null） 将a标签替换为span，无链接（false） 初始的活动状态（false） 初始化获得焦点（false）
构造dynatree
1、简单构造一棵树 2、相关属性介绍 3、服务器端数据传递
4、树对象常用方法介绍
5、延时加载和一次性加载树结构原理
简单构造一棵树
构造一颗简单树需要的元素： 1、页面中有一个div在加载这可树<div id="tree"> </div> 2、导入四个js文件和一个css样式
3、要编写$(“#tree”).dynatree({...});函数
延时加载和一次性加载树结构
原理： 1、延迟加载就是initAjax函数只取有限的节点和子节点层数，当 需要时点击再通过onLazyRead函数得到初次未加载的节点，优点是 当树比很大时，可以有效减少数据传输量 2、一次性加载就是在initAjax时循环将所有节点得到并通过生成 json数据将所有节点的json传到页面构建完整的树结构，优点是当树 比较小的时候，可以减少ajax的次数
Dynatree 树控件基础
wenku.baidu.com
讲解内容
1、dynatree简介 2、构造dynatree 3、操作dynatree
4、常见问题及解决方案
5、作业
dynatree 简介
Dynatree是一个jQuery插件， 能够实现使用JavaScript动态创建Html Tree控件。
主要特性： 非常适用于创建拥有大量节点的树形控件 (DOM 元素当真正有需要的时候才会创建).
节点node具有 两种状态： focus和activate
Tip： keyboard导航的 是focus状态，activate 状态不变，另外碰到 noLink属性项将无法导 航
expand
select hideCheckbox unselectable children
是否展开（false）
是否被选中（false） 隐藏复选框（false） 不可被选中（false） 子节点（null）
主要特性： 非常适用于创建拥有大量节点的树形控件 (DOM元素当真正有需要的时候 才会创建). 可编程提供一个面向对象接口 支持通过Ajax实现树节点懒加载 支持为树节点添加Checkboxes和层级选择 支持拖放操作（drag和drop） 支持持久化保存 支持键盘Keyboard操作 可以从HTML代码、JSON或JavaScript对象初化构建树
该节点lazy属性的状态
该节点selected属性状态 节点是否可见
node.makeVisible()
node.move(targetNode, mode)
展开所有的父节点，并使节点可见
移动节点到目标节点，mode为child， before，after
树节点的操作
树节点的操作（3） node.reloadChildren(callback)
onClick 点击事件 还有一些响应事件处理同js中是事件处理，如onDblClick， onKeydown，onFocus等等
应用举例：
initAjax:{ url:"/dynatree/department/nowTree", data: { mode: "funnyMode"} }, onSelect:function(select,node){ var selNodes = node.tree.getSelectedNodes(); var selKeys = $.map(selNodes, function(node){ return "'" + node.data.title + "'"; }); $("#echoSelect").text(selKeys.join(", ")); }, ajaxDefaults:{ cache:true, dataType:"json" }, strings:{ loading:"Loading...", loadError:"Load error!" }
代码见示例
操作dynatree
1、树的数据结构 2、dynatree的方法 3、对树对象的操作 4、对树节点的操作
树的操作
树节点的数据结构 使用var nodes = $(“#tree”).dynatree(“getSelecte dNodes”);得到被选中的节点。
节点数据结构：数据全部放在data属性中， children属性保存了其子节点的信息。
FireBug中查看到的json数据
树中常见的方法
树中的常见方法 initAjax
onSelect onLazyRead onPostInit ajaxDefaults strings
初始化一棵树
勾选checkbox触发事件 延迟加载子节点 处理初始化节点是否被选中(老版本不支持 ) Ajax默认设置 显示加载过程中的提示信息
tree.getSelectedNodes(stopOnP 得到全部被选中的节点，级联 arents) 时跳过父节点被选中的子节点
tree.reload()
tree.visit(fn, includeRoot)
重新加载树
遍历整棵树，对每个节点的操 作在fn(function)中单独进行
树节点的操作
Tips：isFolder和 expand功能是相反 的，但由于默认值 的缘故，要想初始 化子节点是展开的， 就必须要设置 expand为true， isFolder默认为false
服务器端数据传递
1、传值方式：Ajax initAjax:{ //树的初始化函数 url:"/dynatree/department/nowTree", //url data: { mode: “funnyMode”} //传递参数 } 2、数据形式：json {"title":"root","isFolder":true,"key":1,"expand":false, "children":[ {"title":"child2","key":3}, {"title":"child1","key":2, "children":[ {"title":"grandchild","key":4} ] 补充： } 1、grails中将String类型转换为JSON类 ] 型：def jsonData= } JSON.parse(resultStr) 3、服务器端设置返回值为JSON render jsonData as JSON import grails.converters.JSON 2、java中要继承ruixin-core.jar包中的 render result as JSON SimpleActionSupport 类 （result要求是ArrayList类型） 使用super.renderText(resultStr)方法发 送数据
树节点的操作（1） node.activate() node.activateSilently() node.addChild(nodeData[, beforeNode]) node.appendAjax(ajaxOptions) node.countChildren() node.deactivate() node.expand(flag) node.focus() node.getLevel() node.getChildren() node.hasChildren() 将节点设为activate，并触发activate事件 将节点设为activate，不触发activate事件 为节点添加子节点 Ajax方式扩展节点 子节点数目 让节点失去activate状态 设置节点是否展开 设置节点为焦点 获得节点层次，root为0层 获得该节点的子节点 该节点子节点是否存在
设置lazy节点点击样式：包括3种 DTNodeStatus_Loading：等待样式 DTNodeStatus_Error：加载错误样式 DTNodeStatus_Ok：移除lazy属性 设置节点title属性 对子节点进行排序，cmp为排序函数， deep为涉及到的子节点深度，true为全
node.isExpanded()
node.isFirstSibling() node.isLastSibling()
该节点expand属性的状态
该节点是否为同辈节点的第一个 该节点是否为同辈节点的最后一个
node.isLazy()
node.isSelected() node.isVisible()
显示相关属性介绍
树的属性 title 树的名字
minExpandLevel
imagePath children Checkbox（boolean） selectMode fx:{ height:"toggle", duration:200 } keyboard autoFocus persist noLink
树对象的操作
tree.count()
tree.disable() tree.enable() tree.enableUpdate(enable) tree.getActiveNode() tree.getNodeByKey(key) tree.getRoot()
树节点数
设置树不可用 设置树可用 设置树是否可以更新 得到树中当前活动的节点 通过key值得到树 得到根节点
树节点的操作
树节点的操作（2） node.isActive() node.isFocused() node.isChildOf(otherNode) node.isDescendantOf(otherNode) 节点是否是activate状态 节点是否是焦点 节点是否是另一个节点的子节点 节点是否是另外一个节点的后代节点
附:cookie数据结构
通过tree.getPersistData()得到的cookie对象 包括数据：最近活动的节点key值，最近 获得焦点的节点key值，selectedKeyList为最近 被选中的节点key值集合。
dynatree方法
$.ui.dynatree.getNode(el) $("#tree").dynatree("disable") $(“#tree”).dynatree(“option”,” 属性名”,”属性值” ) $("#tree").dynatree("getTree") $("#tree").dynatree("getRoot") $("#tree").dynatree ("getActiveNode") $("#tree").dynatree ("getSelectedNodes") 参数el是DOM元素或jquery对象 设置树为不可用状态(对应的方法为enable) 动态设置树的属性 得到整棵树对象 得到树的根节点 得到当前被选中的节点 得到树种被选中的节点
node.remove() node.removeChildren()
重新加载本节点及其子节点，node属性 必须为lazy
移除node 移除所有子节点
node.resetLazy() node.select(flag)
node.setLazyNodeStatus(status)
重置lazy属性，移除该节点的全部子节点 设置节点select属性