欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-14 10:26:38
...

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;
}