dynatree的基础应用PPT演示课件

树形控件Dynatree,1,1,Jquery树形控件介绍Dynatree的主要特性Dynatree的基本用法,2,3,Jquery的树型控件,jstreesimpletreetreeviewdynatree,Jstree与simpletree,Jstree优点：功能强大，基本上树型操作里面的所有功能都包含缺点：样式一般simpletree功能相当简单，就是个树的展示,treeview与dynatree,Treeview功能摆在中间，能满足一些基本的要求，但是对于复杂的树控制还是有些显得功能单薄Dynatree功能基本能满足要求，代码也比较清楚,1,Jquery树形控件介绍Dynatree的主要特性Dynatree的基本用法,2,3,树形控件Dynatree,Dynatree是一个jQuery插件能够实现使用JavaScript动态创建HtmlTree控件。主要特性：非常适用于创建拥有大量节点的树形控件(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文件：,dynatree控件的用法,3添加这样的div,dynatree控件的用法,4在js中：$(function()/这是为了在打开页面时就调用这个方法initTree(););,dynatree控件的用法,functioninitTree()/初始化树状结构$(#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/xtgl/gggl/getJgTreeChildren,data:childId:dtnode.data.key,type:dtnode.data.type););,dynatree控件的用法,5把此树的key发送到后台的方法：利用隐藏域onSelect:function(select,dtnode)varselNodes=dtnode.tree.getSelectedNodes();varselKeys=$.map(selNodes,function(node)returnnode.data.key;);$(#mkids).val(selKeys.join(,);,dynatree控件的用法,5把此树的key发送到后台的方法：利用链接页面时传参onSelect:function(select,dtnode)varselNodes=dtnode.tree.getSelectedNodes();varselKeys=$.map(selNodes,function(node)returnnode.data.key;);varseltitles=$.map(selNodes,function(node)if(node.data.type!=1)returnnode.data.title;);,dynatree控件的用法,5把此树的key发送到后台的方法：利用链接页面时传参varseltypes=$.map(selNodes,function(node)returnnode.data.type;);varstr=;for(vari=0;iselKeys.length;i+)if(seltypesi!=1)str+=selKeysi+,+seltypesi+;$(#selectValue).val(str);$(#selectTitle).val(seltitles.join(,);,dynatree控件的用法,$(#ok).click(function()varnodes=$(#tree).dynatree(getSelectedNodes);if(nodes.length$jgmcs,$jgids););,dynatree控件的用法,functionpassValueAndCloseWin(selectValue,selectTitle,eleName,eleCode)varjgmcs=dialogArguments.document.getElementById(eleName);varjgids=dialogArguments.document.getElementById(eleCode);if(selectTitle.length!=0)jgmcs.value=selectTitle;els