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

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

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

先简单说一下流程 

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

function checkCallback(json){
...........
...........
}
View Code

关键是回调函数返回的结构 {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">

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

setTimeout(function(){    
    if($this.hasClass("treeCheck")){    
        //获取选中事件 就是注册到dom元素上的事件    
        var checkFn = eval($this.attr("oncheck"));    
        if(checkFn && $.isFunction(checkFn)) {    
            $("div.ckbox", $this).each(function(){    
                var ckbox = $(this);    
                ckbox.click(function(){    
                    //返回是事件类型 是否为选中事件    
                    var checked = $(ckbox).hasClass("checked");    
                    var items = [];    
                    if(checked){    
                        //看一下源码结构 其实是获取到节点的li 元素    
                        var tnode = $(ckbox).parent().parent();    
                        //获取所有节点下才checkbox    
                        var boxes = $("input", tnode);    
                        if(boxes.size() > 1) {    
                            //对应我说的 返回的结构    
                            $(boxes).each(function(){    
                                items[items.length] = {name:$(this).attr("name"), value:$(this).val(), text:$(this).attr("text")};    
                            });    
                        } else {    
                            items = {name:boxes.attr("name"), value:boxes.val(), text:boxes.attr("text")};    
                        }           
                    }    
                    //调用函数                                     
                    checkFn({checked:checked, items:items});                                                            
                });    
            });    
        }    
    }  
View Code

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值