DWZ (JUI) 教程 tree 控件的选中事件

DWZ (JUI) 教程 tree 控件的选中事件   

新浪微博 http://weibo.com/u/1534913940

最近有朋友留言问tree控件的选中事件是怎么处理的，今天我就简单说一下。

先简单说一下流程

第一步 当然是先定义好回调事件了

[javascript]  view plain copy

1. function checkCallback(json){  
2.      ...........  
3.      ...........  
4. }  

关键是回调函数返回的结构 {checked:布尔值, items:数组}

如果是选中事件 checked 为 true 否则为false

items 是个对象数组 [ {name:, value:, text: },{} ]   是返回是选中的节点，如果返回的checked 为false 就是反选事件 ，那么它的长度就会是0

name 就是节点名称  value 就是对应的值  text 就是节点对应的文本  对应 节点的 tname tvalue ，<a>text</a> 文本信息

tree控件自动是级联的，选中父节点，子节点也会选中，所以返回的的选中节点是个数组，当然如果是叶子节点，那么它的长度就是1

第二步 就是注册到dom元素上 

<ul class="tree treeFolder treeCheck expand" oncheck="checkCallback">

这样就可以了 其实使用起来 也挺方便。

下面我简单作一下源码的注释，这样大家就更加清楚了

[javascript]  view plain copy

1. setTimeout(function(){    
2.     if($this.hasClass("treeCheck")){    
3.         //获取选中事件 就是注册到dom元素上的事件    
4.         var checkFn = eval($this.attr("oncheck"));    
5.         if(checkFn && $.isFunction(checkFn)) {    
6.             $("div.ckbox", $this).each(function(){    
7.                 var ckbox = $(this);    
8.                 ckbox.click(function(){    
9.                     //返回是事件类型 是否为选中事件    
10.                     var checked = $(ckbox).hasClass("checked");    
11.                     var items = [];    
12.                     if(checked){    
13.                         //看一下源码结构 其实是获取到节点的li 元素    
14.                         var tnode = $(ckbox).parent().parent();    
15.                         //获取所有节点下才checkbox    
16.                         var boxes = $("input", tnode);    
17.                         if(boxes.size() > 1) {    
18.                             //对应我说的 返回的结构    
19.                             $(boxes).each(function(){    
20.                                 items[items.length] = {name:$(this).attr("name"), value:$(this).val(), text:$(this).attr("text")};    
21.                             });    
22.                         } else {    
23.                             items = {name:boxes.attr("name"), value:boxes.val(), text:boxes.attr("text")};    
24.                         }           
25.                     }    
26.                     //调用函数                                     
27.                     checkFn({checked:checked, items:items});                                                            
28.                 });    
29.             });    
30.         }    
31.     }   

1,x  关键的回调函数是有点单薄的，并且也有点不规范， 2.x 后 会有所改进   希望对大家有所帮助