Dynatree_树控件基础详解

1、Dynatree 树控件基础树控件基础讲解内容讲解内容1、dynatree简介2、构造dynatree3、操作dynatree4、常见问题及解决方案5、作业dynatree 简介简介Dynatree是一个是一个jQuery插件，插件，能够实现使用能够实现使用JavaScript动态创建动态创建Html Tree控件。控件。主要特性：主要特性： 非常适用于创建拥有大量节点的树形控件非常适用于创建拥有大量节点的树形控件 (DOM元素当真正有需要的时候才会创建元素当真正有需要的时候才会创建). 主要特性：主要特性： 非常适用于创建拥有大量节点的树形控件 (DOM元素当真正有需要的时候才会创建). 可

2、编程提供一个面向对象接口 支持通过Ajax实现树节点懒加载 支持为树节点添加Checkboxes和层级选择 支持拖放操作（drag和drop） 支持持久化保存 支持键盘Keyboard操作 可以从HTML代码、JSON或JavaScript对象初化构建树构造构造dynatree1、简单构造一棵树2、相关属性介绍3、服务器端数据传递4、树对象常用方法介绍5、延时加载和一次性加载树结构原理简单构造一棵树简单构造一棵树构造一颗简单树需要的元素：1、页面中有一个div在加载这可树 2、导入四个js文件和一个css样式3、要编写$(“#tree”).dynatree(.);函数显示相关属性介绍显示相关属

3、性介绍树的属性title树的名字minExpandLevel最小折叠层数imagePath引用图标路径children子元素Checkbox（boolean）是否显示为复选框(默认为false)selectMode1:单选, 2:不关联复选, 3:关联复选 fx: height:toggle, duration:200 jquery点击打开隐藏树节点的动画效果(一般如前面设置)keyboard键盘导航(默认为true)autoFocus自动设置焦点(默认为true)persistCookic中读取记录(默认为false)noLink使用span代替a标签，取消连接节点属性title节点名（nu

4、ll）key键（null）isFolder是否收起（false）isLazy是否延迟加载（false）tooltip鼠标显示（null）icon图标（null）这里null为默认图标，false为无图标addClass增加class属性（null）noLink将a标签替换为span，无链接（false）activate初始的活动状态（false）focus初始化获得焦点（false）expand是否展开（false）select是否被选中（false）hideCheckbox隐藏复选框（false）unselectable不可被选中（false）children子节点（null）Tips：is

5、Folder和expand功能是相反的，但由于默认值的缘故，要想初始化子节点是展开的，就必须要设置expand为true，isFolder默认为false节点node具有两种状态：focus和activateTip： keyboard导航的是focus状态，activate状态不变，另外碰到noLink属性项将无法导航服务器端数据传递服务器端数据传递1、传值方式：Ajax initAjax: /树的初始化函数url:/dynatree/department/nowTree, /url data: mode: “funnyMode” /传递参数 2、数据形式：json title:root,is

6、Folder:true,key:1,expand:false, children: title:child2,key:3, title:child1,key:2, children: title:grandchild,key:4 3、服务器端设置返回值为JSONimport grails.converters.JSON render result as JSON （result要求是ArrayList类型）补充：1、grails中将String类型转换为JSON类型：def jsonData= JSON.parse(resultStr) render jsonData as JSON2、jav

7、a中要继承ruixin-core.jar包中的SimpleActionSupport 类使用super.renderText(resultStr)方法发送数据FireBug中查看到的中查看到的json数据数据树中常见的方法树中常见的方法树中的常见方法initAjax初始化一棵树onSelect勾选checkbox触发事件onLazyRead延迟加载子节点onPostInit处理初始化节点是否被选中(老版本不支持)ajaxDefaultsAjax默认设置strings显示加载过程中的提示信息onClick点击事件还有一些响应事件处理同js中是事件处理，如onDblClick，onKeydown，

8、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, dat

9、aType:json , strings: loading:Loading., loadError:Load error! 应用举例：应用举例：延时加载和一次性加载树结构延时加载和一次性加载树结构原理： 1、延迟加载就是initAjax函数只取有限的节点和子节点层数，当需要时点击再通过onLazyRead函数得到初次未加载的节点，优点是当树比很大时，可以有效减少数据传输量 2、一次性加载就是在initAjax时循环将所有节点得到并通过生成json数据将所有节点的json传到页面构建完整的树结构，优点是当树比较小的时候，可以减少ajax的次数Java及及groovy后台递归后台递归原理： 1、通

10、过数据库查询得到需要的数据，再使用StringBuffer循环递归拼接全部的json信息。 2、通过sql多次查询需要的数据，在拼接成字符串，可以减少递归，但不能减少循环次数。代码见示例Tip：1、这里需要多次拼接字符串，请使用StringBuffer以减少系统开支2、拼接字符串时要小心，少任何半个括号或错任何标点，都会导致json数据出错，页面也将显示不出树。操作操作dynatree1、树的数据结构2、dynatree的方法3、对树对象的操作4、对树节点的操作树的操作树的操作树节点的数据结构 使用var nodes = $(“#tree”).dynatree(“getSelectedNode

11、s”);得到被选中的节点。节点数据结构：节点数据结构：数据全部放在data属性中，children属性保存了其子节点的信息。附:cookie数据结构通过tree.getPersistData()得到的cookie对象 包括数据：最近活动的节点key值，最近获得焦点的节点key值，selectedKeyList为最近被选中的节点key值集合。dynatree方法方法$.ui.dynatree.getNode(el)参数参数el是是DOM元素或元素或jquery对象对象$(#tree).dynatree(disable)设置树为不可用状态(对应的方法为enable)$(“#tree”).dynat

12、ree(“option”,”属性名”,”属性值” )动态设置树的属性$(#tree).dynatree(getTree)得到整棵树对象$(#tree).dynatree(getRoot)得到树的根节点$(#tree).dynatree(getActiveNode)得到当前被选中的节点$(#tree).dynatree(getSelectedNodes)得到树种被选中的节点树对象的操作树对象的操作tree.count()树节点数树节点数tree.disable() 设置树不可用tree.enable()设置树可用tree.enableUpdate(enable) 设置树是否可以更新tree.ge

13、tActiveNode() 得到树中当前活动的节点tree.getNodeByKey(key) 通过key值得到树tree.getRoot() 得到根节点tree.getSelectedNodes(stopOnParents)得到全部被选中的节点，级联时跳过父节点被选中的子节点tree.reload()重新加载树tree.visit(fn, includeRoot)遍历整棵树，对每个节点的操作在fn(function)中单独进行树节点的操作树节点的操作树节点的操作（1）node.activate()将节点设为activate，并触发activate事件node.activateSilently

14、()将节点设为activate，不触发activate事件node.addChild(nodeData, beforeNode)为节点添加子节点node.appendAjax(ajaxOptions)Ajax方式扩展节点node.countChildren()子节点数目node.deactivate()让节点失去activate状态node.expand(flag)设置节点是否展开node.focus()设置节点为焦点node.getLevel() 获得节点层次，root为0层node.getChildren() 获得该节点的子节点node.hasChildren()该节点子节点是否存在树节点

15、的操作树节点的操作树节点的操作（2）node.isActive()节点是否是activate状态node.isFocused() 节点是否是焦点node.isChildOf(otherNode)节点是否是另一个节点的子节点node.isDescendantOf(otherNode)节点是否是另外一个节点的后代节点node.isExpanded() 该节点expand属性的状态node.isFirstSibling() 该节点是否为同辈节点的第一个node.isLastSibling() 该节点是否为同辈节点的最后一个node.isLazy() 该节点lazy属性的状态node.isSelect

16、ed() 该节点selected属性状态node.isVisible()节点是否可见node.makeVisible() 展开所有的父节点，并使节点可见node.move(targetNode, mode) 移动节点到目标节点，mode为child，before，after树节点的操作树节点的操作树节点的操作（3）node.reloadChildren(callback)重新加载本节点及其子节点，node属性必须为lazynode.remove() 移除nodenode.removeChildren() 移除所有子节点node.resetLazy() 重置lazy属性，移除该节点的全部子节点n

17、ode.select(flag) 设置节点select属性node.setLazyNodeStatus(status)设置lazy节点点击样式：包括3种DTNodeStatus_Loading：等待样式DTNodeStatus_Error：加载错误样式DTNodeStatus_Ok：移除lazy属性node.setTitle(title) 设置节点title属性node.sortChildren(cmp, deep) 对子节点进行排序，cmp为排序函数，deep为涉及到的子节点深度，true为全部子节点树节点的操作树节点的操作树节点的操作（4）node.toDict(recursive, ca

18、llback) 将节点转换为javaScript对象，recursive设置为true时包涵子节点，Callback为转换过程中的函数操作node.toggleExpand()切换展开状态，展开一个lazy节点并触发onLazyRead的相关函数node.toggleSelect() 切换勾选状态，（反选）node.visit(fn, includeSelf) 同tree的visit函数，访问所有子节点node.visitParents(fn, includeSelf) 访问全部父节点的visit函数常见问题及解决方案常见问题及解决方案常见问题： 1、正常加载后不显示数据：（1）检查json数据是否拼写错误，括号标点（推荐使用firebug查看响应信息）（2）页面title标签是否为空，为空时会出现不显示树结构的问题。 2、不同版本的树支持的方法不完全相同，如onPostInit在某些简化版本中得不到支持 3、如何让节点初始化时被选中（1）使用onPostInit函数（2）在构造树json数据时判断并添加“select”:true属性 4、关于树的root，树的实际根节点的key为_1,且目前我没有修改的手段，显示上有的显示没有根节点，其数据类型是以children:开头，而如果要显示根节点，则数据格式应