Dynatree 树控件基础详解

树节点的操作
树节点的操作（2） node.isActive() node.isFocused() node.isChildOf(otherNode) node.isDescendantOf(otherNode) 节点是否是activate状态 节点是否是焦点 节点是否是另一个节点的子节点 节点是否是另外一个节点的后代节点
该节点lazy属性的状态
该节点selected属性状态 节点是否可见
node.makeVisible()
node.move(targetNode, mode)
展开所有的父节点，并使节点可见
移动节点到目标节点，mode为child， before，after
树节点的操作
树节点的操作（3） node.reloadChildren(callback)
主要特性： 非常适用于创建拥有大量节点的树形控件 (DOM元素当真正有需要的时候 才会创建). 可编程提供一个面向对象接口 支持通过Ajax实现树节点懒加载 支持为树节点添加Checkboxes和层级选择 支持拖放操作（drag和drop） 支持持久化保存 支持键盘Keyboard操作 可以从HTML代码、JSON或JavaScript对象初化构建树
设置lazy节点点击样式：包括3种 DTNodeStatus_Loading：等待样式 DTNodeStatus_Error：加载错误样式 DTNodeStatus_Ok：移除lazy属性 设置节点title属性 对子节点进行排序，cmp为排序函数， deep为涉及到的子节点深度，true为全
代码见示例
操作dynatree
1、树的数据结构 2、dynatree的方法 3、对树对象的操作 4、对树节点的操作
树的操作
树节点的数据结构 使用var nodes = $(“#tree”).dynatree(“getSelecte dNodes”);得到被选中的节点。
节点数据结构：数据全部放在data属性中， children属性保存了其子节点的信息。
tree.getSelectedNodes(stopOnP 得到全部被选中的节点，级联 arents) 时跳过父节点被选中的子节点
tree.reload()
tree.visit(fn, includeRoot)
重新加载树
遍历整棵树，对每个节点的操 作在fn(function)中单独进行
树节点的操作
节点node具有 两种状态： focus和activate
Tip： keyboard导航的 是focus状态，activate 状态不变，另外碰到 noLink属性项将无法导 航
expand
select hideCheckbox unselectable children
是否展开（false）
是否被选中（false） 隐藏复选框（false） 不可被选中（false） 子节点（null）
树对象的操作
tree.count()
tree.disable() tree.enable() tree.enableUpdate(enable) tree.getActiveNode() tree.getNodeByKey(key) tree.getRoot()
树节点数
设置树不可用 设置树可用 设置树是否可以更新 得到树中当前活动的节点 通过key值得到树 得到根节点
节点属性
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、dynatree简介 2、构造dynatree 3、操作dynatree
4、常见问题及解决方案
5、作业
dynatree 简介
Dynatree是一个jQuery插件， 能够实现使用JavaScript动态创建Html Tree控件。
主要特性： 非常适用于创建拥有大量节点的树形控件 (DOM 元素当真正有需要的时候才会创建).
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)方法发 送数据
构造dynatree
1、简单构造一棵树 2、相关属性介绍 3、服务器端数据传递
4、树对象常用方法介绍
5、延时加载和一次性加载树结构原理
简单构造一棵树
构造一颗简单树需要的元素： 1、页面中有一个div在加载这可树<div id="tree"> </div> 2、导入四个js文件和一个css样式
3、要编写$(“#tree”).dynatree({...});函数
FireBug中查看到的json数据
树中常见的方法
树中的常见方法 initAjax
onSelect onLazyRead onPostInit ajaxDefaults strings
初始化一棵树
勾选checkbox触发事件 延迟加载子节点 处理初始化节点是否被选中(老版本不支持 ) Ajax默认设置 显示加载过程中的提示信息
node.remove() node.rБайду номын сангаасmoveChildren()
重新加载本节点及其子节点，node属性 必须为lazy
移除node 移除所有子节点
node.resetLazy() node.select(flag)
node.setLazyNodeStatus(status)
重置lazy属性，移除该节点的全部子节点 设置节点select属性
最小折叠层数
引用图标路径 子元素 是否显示为复选框(默认为false) 1:单选, 2:不关联复选, 3:关联复选 jquery点击打开隐藏树节点的动画效果( 一般如前面设置) 键盘导航(默认为true) 自动设置焦点(默认为true) Cookic中读取记录(默认为false) 使用span代替a标签，取消连接
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!" }
Java及groovy后台递归
原理： 1、通过数据库查询得到需要的数据，再使用StringBuffer循环递归拼 接全部的json信息。 2、通过sql多次查询需要的数据，在拼接成字符串，可以减少递归， 但不能减少循环次数。 Tip： 1、这里需要多次拼接字符串，请 使用StringBuffer以减少系统开支 2、拼接字符串时要小心，少任何 半个括号或错任何标点，都会导 致json数据出错，页面也将显示不 出树。
附:cookie数据结构
通过tree.getPersistData()得到的cookie对象 包括数据：最近活动的节点key值，最近 获得焦点的节点key值，selectedKeyList为最近 被选中的节点key值集合。