DWZ (JUI) 教程 tree 控件的选中事件
新浪微博 http://weibo.com/u/1534913940
最近有朋友留言问tree控件的选中事件是怎么处理的,今天我就简单说一下。
先简单说一下流程
第一步 当然是先定义好回调事件了
- functioncheckCallback(json){
- ...........
- ...........
- }
如果是选中事件 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元素上的事件
- varcheckFn=eval($this.attr("oncheck"));
- if(checkFn&&$.isFunction(checkFn)){
- $("div.ckbox",$this).each(function(){
- varckbox=$(this);
- ckbox.click(function(){
- //返回是事件类型是否为选中事件
- varchecked=$(ckbox).hasClass("checked");
- varitems=[];
- if(checked){
- //看一下源码结构其实是获取到节点的li元素
- vartnode=$(ckbox).parent().parent();
- //获取所有节点下才checkbox
- varboxes=$("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});
- });
- });
- }
- }
1,x 关键的回调函数是有点单薄的,并且也有点不规范, 2.x 后 会有所改进 希望对大家有所帮助
转载请标明出处 http://blog.csdn.net/jiweigang1/article/details/8454474