easyUI树改造(实现点击父节点,选中子节点,并可以只选择父节点)

1.取消节点层叠选择属性,默认是开启的

cascadeCheck:false

2.点击父节点时触发onCheck事件(注意:$('#'+currentValue.domId)有可能不一样,改成自己的id名)

onCheck:function(node, checked){
                var childList = $(this).tree('getChildren',node.target);
                if(childList.length>0){
                    // 节点被勾选
                    var checkedTrue = function(){
                        childList.map(function(currentValue){
                            $('#'+currentValue.domId).find(".tree-checkbox").removeClass("tree-checkbox0").addClass("tree-checkbox1");
                        })
                    };
                    // 节点取消勾选
                    var checkedFalse = function(){
                        $.each(childList,function(index,currentValue){
                            $('#'+currentValue.domId).find(".tree-checkbox").removeClass("tree-checkbox1").addClass("tree-checkbox0");
                        })
                    };
                    // 判断是否为checked
                    var checkChangeProperties = checked==true ? checkedTrue() : checkedFalse();
                }
            }

总结:

tree-checkbox2 有子节点被选中
tree-checkbox1 节点被选中
tree-checkbox0 节点未选中

主要根据父节点是否被选中,来通过点击事件,改变tree的样式,将该父节点下的子节点选中。

扩展:

由于tree被改造,$('#orgTree').tree('getChecked', ['checked','indeterminate']);的方式不能获取到所有选中的节点,

所以重新写个方法,来获取tree所以被选中的节点。

// 获取tree所有打上勾的节点
function getAllChecked() {

    var keyValues = new Array();

    // 由于easyuitree被改造,所以采用以下方式获取已选中的节点
    $(".tree-checkbox1").parent('.tree-node').each(function(){
        keyValues.push($('#orgTree').tree('getNode',this));
    });

    return keyValues;
}

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值