• JQuery Easyui Tree的oncheck事件


    最近项目中有用到Easyui Tree,我想要checkbox的选中事件,但是api只提供了一个onClick事件,我百度、google之后,额,还是看js吧

     

    用firebug查看其生成html,发现其checkobx是假的,只是一个span,来回的变样式而已,汗

     

    $(".tree-checkbox", tree).unbind(".tree").bind("click.tree"function() {
                
    if ($(this).hasClass("tree-checkbox0")) {
                    $(
    this).removeClass("tree-checkbox0").addClass("tree-checkbox1");
                } 
    else {
                    
    if ($(this).hasClass("tree-checkbox1")) {
                        $(
    this).removeClass("tree-checkbox1").addClass("tree-checkbox0");
                    } 
    else {
                        
    if ($(this).hasClass("tree-checkbox2")) {
                            $(
    this).removeClass("tree-checkbox2").addClass("tree-checkbox1");
                        }
                    }
                }
                _2eb($(
    this).parent());
                _2ec($(
    this).parent());
                
    return false;
    });

    然后再看其onClick事件脚本

    代码
    $(".tree-node", tree)
    ....
    bind(
    "click.tree"function() {
                $(
    ".tree-node-selected", tree).removeClass("tree-node-selected");
                $(
    this).addClass("tree-node-selected");
                
    if (opts.onClick) {
                    
    var _2ea = this;
                    
    var data = $.data(this"tree-node");
                    opts.onClick.call(
    this, { id: data.id, text: data.text, attributes: data.attributes, target: _2ea });
                }
            })

    相应的修改其check脚本

     $(".tree-checkbox", tree).unbind(".tree").bind("click.tree"function() {

                if ($(this).hasClass("tree-checkbox0")) {
                    $(
    this).removeClass("tree-checkbox0").addClass("tree-checkbox1");
                } 
    else {
                    
    if ($(this).hasClass("tree-checkbox1")) {
                        $(
    this).removeClass("tree-checkbox1").addClass("tree-checkbox0");
                    } 
    else {
                        
    if ($(this).hasClass("tree-checkbox2")) {
                            $(
    this).removeClass("tree-checkbox2").addClass("tree-checkbox1");
                        }
                    }
                }
                _2eb($(
    this).parent());
                _2ec($(
    this).parent());
                
    return false;
            }).bind(
    "click.tree"function() {//gzl增加
                if ($(this).hasClass("tree-checkbox1"&& opts.onCheck) {
                    
    var _2e9 = this;
                    
    var data = $.data(this"tree-node");
                    opts.onCheck.call(
    this, { id: data.id, text: data.text, attributes: data.attributes, target: _2e9 });
                }
            });

    可是怎么也取不到Data值,以为是this不对,我用$(this).parent(),还是取不到,死活取不到,哪位大牛给看看,为啥?

    最后只能在$(this).parent()的上面找事件加判断,使用其dblclick事件,把check转到它上面,定义一个变量flag,ckeck时候置true,dblclick判断后并复位,这样就可以了

     1 function _2e7(_2e8) {
     2         var opts = $.data(_2e8, "tree").options;
     3         var tree = $.data(_2e8, "tree").tree;
     4         var flag = false//是否check事件转过来 gzl修改
     5         $(".tree-node", tree).unbind(".tree").bind("dblclick.tree"function() {
     6             $(".tree-node-selected", tree).removeClass("tree-node-selected");
     7             $(this).addClass("tree-node-selected");
     8             if (flag) {//判断并复位 gzl修改
     9                 flag = false;
    10                 if (opts.onCheck) {
    11                     var _2e9 = this;
    12                     var data = $.data(this"tree-node");
    13                     opts.onCheck.call(this, { id: data.id, text: data.text, attributes: data.attributes, target: _2e9 });
    14                 }
    15             }
    16             else {//不是的时候走dbclick事件 gzl修改
    17                 if (opts.onDblClick) {
    18                     var _2e9 = this;
    19                     var data = $.data(this"tree-node");
    20                     opts.onDblClick.call(this, { id: data.id, text: data.text, attributes: data.attributes, target: _2e9 });
    21                 } 
    22             }
    23         }).bind("click.tree"function() {
    24             $(".tree-node-selected", tree).removeClass("tree-node-selected");
    25             $(this).addClass("tree-node-selected");
    26             if (opts.onClick) {
    27                 var _2ea = this;
    28                 var data = $.data(this"tree-node");
    29                 opts.onClick.call(this, { id: data.id, text: data.text, attributes: data.attributes, target: _2ea });
    30             }
    31         }).bind("mouseenter.tree"function() {
    32             $(this).addClass("tree-node-hover");
    33             return false;
    34         }).bind("mouseleave.tree"function() {
    35             $(this).removeClass("tree-node-hover");
    36             return false;
    37         });
    38         $(".tree-hit", tree).unbind(".tree").bind("click.tree"function() {
    39             var node = $(this).parent();
    40             _2e5(_2e8, node);
    41             return false;
    42         }).bind("mouseenter.tree"function() {
    43             if ($(this).hasClass("tree-expanded")) {
    44                 $(this).addClass("tree-expanded-hover");
    45             } else {
    46                 $(this).addClass("tree-collapsed-hover");
    47             }
    48         }).bind("mouseleave.tree"function() {
    49             if ($(this).hasClass("tree-expanded")) {
    50                 $(this).removeClass("tree-expanded-hover");
    51             } else {
    52                 $(this).removeClass("tree-collapsed-hover");
    53             }
    54         });
    55         $(".tree-checkbox", tree).unbind(".tree").bind("click.tree"function() {
    56             if ($(this).hasClass("tree-checkbox0")) {
    57                 $(this).removeClass("tree-checkbox0").addClass("tree-checkbox1");
    58             } else {
    59                 if ($(this).hasClass("tree-checkbox1")) {
    60                     $(this).removeClass("tree-checkbox1").addClass("tree-checkbox0");
    61                 } else {
    62                     if ($(this).hasClass("tree-checkbox2")) {
    63                         $(this).removeClass("tree-checkbox2").addClass("tree-checkbox1");
    64                     }
    65                 }
    66             }
    67             _2eb($(this).parent());
    68             _2ec($(this).parent());
    69             return false;
    70         }).bind("click.tree"function() {// gzl修改
    71             flag = true;
    72             $(this).parent().dblclick();
    73         });

    然后再初始化的时候,js如下

    $('#tt').tree({

                    checkbox: true,

                    url: myurl,

                    onClick: function(node) {

                        。。。

                    },

                    onDblClick: function(node) {

                        alert("dbclick" + node.text);

                    },

                    onCheck: function(node) {

                        alert("check" + node.text);

                    }

                }); 


    希望出个新版本!  

  • 相关阅读:
    Android之BroadcastReceiver1
    contentprovider提供程序间共享数据的统一接口
    Android之访问下载文件
    Android之SQLite
    Android之Handler
    sql server异地备份数据库
    Android常用控件
    Android学习笔记02
    Android学习笔记01
    java多线程的使用2
  • 原文地址:https://www.cnblogs.com/gzlisme/p/jquery_easyui_tree_oncheck.html
Copyright © 2020-2023  润新知