Dynatree-树控件基础详解

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

非常适用于创建拥有大量节点的树形控件(DOM元素当真正有需要的时候才会创建).可编程提供一个面向对象接口支持通过Ajax实现树节点懒加载支持为树节点添加Checkboxes和层级选择支持拖放操作（drag和drop）支持持久化保存支持键盘Keyboard操作可以从HTML代码、JSON或JavaScript对象初化构建树构造dynatree1、简单构造一棵树2、相关属性介绍3、服务器端数据传递4、树对象常用方法介绍5、延时加载和一次性加载树结构原理简单构造一棵树构造一颗简单树需要的元素：1、页面中有一个div在加载这可树<divid="tree"> </div>2、导入四个js文件和一个css样式3、要编写$(“#tree”).dynatree({...});函数显示相关属性介绍Tips：isFolder和expand功能是相反的，但由于默认值的缘故，要想初始化子节点是展开的，就必须要设置expand为true，isFolder默认为false节点node具有两种状态：focus和activateTip：keyboard导航的是focus状态，activate状态不变，另外碰到noLink属性项将无法导航服务器端数据传递1、传值方式：AjaxinitAjax:{//树的初始化函数

url:"/dynatree/department/nowTree",//urldata:{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}]}]}3、服务器端设置返回值为JSONimport

grails.converters.JSONrenderresultasJSON

（result要求是ArrayList类型）补充：1、grails中将String类型转换为JSON类型：defjsonData=JSON.parse(resultStr)renderjsonDataasJSON2、java中要继承ruixin-core.jar包中的 SimpleActionSupport类使用super.renderText(resultStr)方法发送数据FireBug中查看到的json数据树中常见的方法还有一些响应事件处理同js中是事件处理，如onDblClick，onKeydown，onFocus等等initAjax:{ url:"/dynatree/department/nowTree",data:{mode:"funnyMode"}},onSelect:function(select,node){varselNodes=node.tree.getSelectedNodes();varselKeys=$.map(selNodes,function(node){return"'"+node.data.title+"'";});$("#echoSelect").text(selKeys.join(","));},ajaxDefaults:{cache:true,dataType:"json"},strings:{loading:"Loading...",loadError:"Loaderror!"}应用举例：延时加载和一次性加载树结构原理：1、延迟加载就是initAjax函数只取有限的节点和子节点层数，当需要时点击再通过onLazyRead函数得到初次未加载的节点，优点是当树比很大时，可以有效减少数据传输量2、一次性加载就是在initAjax时循环将所有节点得到并通过生成json数据将所有节点的json传到页面构建完整的树结构，优点是当树比较小的时候，可以减少ajax的次数Java及groovy后台递归原理：1、通过数据库查询得到需要的数据，再使用StringBuffer循环递归拼接全部的json信息。2、通过sql多次查询需要的数据，在拼接成字符串，可以减少递归，但不能减少循环次数。代码见示例Tip：1、这里需要多次拼接字符串，请使用StringBuffer以减少系统开支2、拼接字符串时要小心，少任何半个括号或错任何标点，都会导致json数据出错，页面也将显示不出树。操作dynatree1、树的数据结构2、dynatree的方法3、对树对象的操作4、对树节点的操作树的操作树节点的数据结构

使用varnodes=$(“#tree”).dynatree(“getSelectedNodes”);得到被选中的节点。节点数据结构：数据全部放在data属性中，children属性保存了其子节点的信息。附:cookie数据结构通过tree.getPersistData()得到的cookie对象

包括数据：最近活动的节点key值，最近获得焦点的节点key值，selectedKeyList为最近被选中的节点key值集合。dynatree方法树对象的操作树节点的操作树节点的操作树节点的操作树节点的操作常见问题及解决方案常见问题：1、正常加载后不显示数据：（1）检查json数据是否拼写错误，括号标点（推荐使用firebug查看响应信息）（2）页面title标签是否为空，为空时会出现不显示树结构的问题。2、不同版本的树支持的方法不完全相同，如onPostInit在某些简化版本中得不到支持3、如何让节点初始化时被选中（1）使用onPostInit函数（2）在构造树json数据时判断并添加“select”:true属性4、关于树的root，树的实际根节点的key为_1,且目前我没有修改的手段，显示上有的显示没有根节点，其数据类型是以children:[]开头，而如果要显示根节点，则数据格式应以{title:””,…}开始。5、initAjax函数和onLazyRead函数传的参数均是以get方式传递，注意get方式传参的长度限制，另外参数可以写成data:{}方式传递，也可以直接加在url后面传递如url:“${base}/xtgl/yhgl/getSslTree?type=${type}&szxxqy=${szxxqy}&sslcids=${sslcids}”（这里的${XXX}为EL表达式）作业通过List信息构造一颗树//List数据privateList<List>getList(){List<List>list=newArrayList<List>();Listssl1=newArrayList();Listssl2=newArrayList();ssl1.add("安师大宿舍1#");//title属性

ssl1.add("asd1#");//key属性

ssl1.add(3);//children个数（楼层数） //表示为楼层1，楼层2，楼层3

ssl2.add("安师大北2#");//同上

s