dynatree的基礎(chǔ)應(yīng)用.ppt

1、樹形控件Dynatree,1,Jquery樹形控件介紹 Dynatree的主要特性 Dynatree的基本用法,2,3,Jquery的樹型控件,jstree simpletree treeview dynatree,Jstree與simpletree,Jstree 優(yōu)點(diǎn)：功能強(qiáng)大，基本上樹型操作里面的所有功能都包含 缺點(diǎn)：樣式一般 simpletree 功能相當(dāng)簡(jiǎn)單，就是個(gè)樹的展示,treeview 與dynatree,Treeview 功能擺在中間，能滿足一些基本的要求，但是對(duì)于復(fù)雜的樹控制還是有些顯得功能單薄 Dynatree 功能基本能滿足要求，代碼也比較清楚,1,Jquery樹形控件介

2、紹 Dynatree的主要特性 Dynatree的基本用法,2,3,樹形控件Dynatree,Dynatree是一個(gè)jQuery插件能夠?qū)崿F(xiàn)使用JavaScript動(dòng)態(tài)創(chuàng)建Html Tree控件。 主要特性： 非常適用于創(chuàng)建擁有大量節(jié)點(diǎn)的樹形控件 (DOM元素當(dāng)真正有需要的時(shí)候才會(huì)創(chuàng)建).,樹形控件Dynatree,可編程提供一個(gè)面向?qū)ο蠼涌?支持通過(guò)Ajax實(shí)現(xiàn)樹節(jié)點(diǎn)延遲加載 支持為樹節(jié)點(diǎn)添加Checkboxes和層級(jí)選擇 支持拖放操作（drag和drop） 支持持久化保存 支持鍵盤Keyboard操作 可以從HTML代碼、JSON或JavaScript對(duì)象初化構(gòu)建樹,1,Jquery樹形控

3、件介紹 Dynatree的主要特性 Dynatree的基本用法,2,3,dynatree控件的用法,1 在后臺(tái)拼字符串產(chǎn)生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時(shí)產(chǎn)生的樹是展開的，當(dāng)為false時(shí)樹是閉合的。把這個(gè)json字符串放入map中在前臺(tái)展示。,dynatree控件的用法,2 引入css和js文件： ,d

4、ynatree控件的用法,3 添加這樣的div ,dynatree控件的用法,4 在js中： $(function() /這是為了在打開頁(yè)面時(shí)就調(diào)用這個(gè)方法 initTree(); ); ,dynatree控件的用法,function initTree() /初始化樹狀結(jié)構(gòu) $(#tree).empty(); $(#tree).dynatree( title:機(jī)構(gòu)轄區(qū)單位, rootVisible:false, minExpandLevel:1, checkbox:true, selectMode:3, fx: height:toggle, duration:200 , initAjax: u

5、rl:$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發(fā)送到后臺(tái)的方法： 利用隱藏域 onSelect: function(select, dtnode) var selNodes = dtnode.tree.getSelectedNodes();

6、 var selKeys = $.map(selNodes, function(node) return node.data.key; ); $(#mkids).val(selKeys.join(,); ,dynatree控件的用法,5 把此樹的key發(fā)送到后臺(tái)的方法： 利用鏈接頁(yè)面時(shí)傳參 onSelect:function (select, dtnode) var selNodes = dtnode.tree.getSelectedNodes(); var selKeys = $.map(selNodes, function (node) return node.data.key; ); v

7、ar seltitles = $.map(selNodes, function (node) if (node.data.type != 1) return node.data.title; );,dynatree控件的用法,5 把此樹的key發(fā)送到后臺(tái)的方法： 利用鏈接頁(yè)面時(shí)傳參 var seltypes = $.map(selNodes, function (node) return node.data.type; ); var str = ; for (var i = 0; i selKeys.length; i+) if (seltypesi != 1) str += selKeysi

8、 + , + seltypesi + ; $(#selectValue).val(str); $(#selectTitle).val(seltitles.join(,); ,dynatree控件的用法,$(#ok).click(function () var nodes = $(#tree).dynatree(getSelectedNodes); if (nodes.length $jgmcs, $jgids); );,dynatree控件的用法,function passValueAndCloseWin(selectValue, selectTitle, eleName, eleCode) var jgmcs = dialogArguments.document.getElementById(eleName); var jgids = dialogArguments.document.getElementById(eleCode); if (selectTitle.length != 0) jgmcs.value = selectTitle; else j