layui Tree勾选控制 唯一选中。

关于layui Tree控制只能单选的需求,附带解决展开节点时三角号无法正确切换的问题。

话不多说 直接上demo!
注意:代码中的 _.xx方法 使用的lodash.js 的函数

.transform-r90:after {
    transform: rotate(90deg);
}
var status = true;
tree.render({
        elem: '#test1'
        , showCheckbox: true
        , showLine: false //连接线
        , id: 'zhxxTree'
        , data: data1
        , click: function (obj) { //点击回调
            console.log(obj);
            var _isI = $(obj.elem).find('i')[0];
            if (obj.state === 'open') {
                $(_isI).addClass('transform-r90');
            } else {
                $(_isI).removeClass('transform-r90');
            }
        }
        , oncheck: function (obj) { //复选框回调
            //确保勾选的是唯一的
            // var zhxxTreeArr = tree.getChecked('zhxxTree');
            // for (var i = 0; i < zhxxTreeArr.length; i++) {
            //     status = i >= 1 ? false : true;
            //     if (status) {
            //         for (var j = 0; j < zhxxTreeArr[i].children.length; j++) {
            //             status = j >= 1 ? false : true;
            //         }
            //     }
            // }
            //当status为真即只勾选了一个的时候
            // if (status) {
            //     var val = obj.data; //得到当前点击的节点数据
            //     database_name = val.database_name;
            //     console.log(val.database_name);
            // } else {
            //     layui.layer.msg('只可选择一种', {'time': 1000});
            // }

            var data = obj.data; //得到当前点击的节点数据
            var state = obj.checked;
            var name = data.database_name; //勾选单个节点
            var childrenData = data.children; //勾选父节点
            if (state) {
                if (!childrenData) {
                    //防止多次添加图层
                    for (var i = 0; i < databaseNameArr.length; i++) {
                        if (databaseNameArr[i] === name) {
                            return false;
                        }
                    }
                    databaseNameArr.push(name);
                } else {
                    for (var j = 0; j < childrenData.length; j++) {
                        var childrenName = childrenData[j].database_name;
                        //防止多次添加图层
                        for (var i = 0; i < databaseNameArr.length; i++) {
                            if (databaseNameArr[i] === childrenName) {
                                return false;
                            }
                        }
                        databaseNameArr.push(childrenName);
                    }
                }

            } else {
                if (!childrenData) {
                    //删除符合要求的值,并返回为真值的所有元素
                    _.remove(databaseNameArr, function (n) {
                        return n === name;
                    })
                } else {
                    for (var j = 0; j < childrenData.length; j++) {
                        var childrenName = childrenData[j].database_name;
                        //删除符合要求的值,并返回为真值的所有元素
                        _.remove(databaseNameArr, function (n) {
                            return n === childrenName;
                        })
                    }
                }

            }
            // console.log(databaseNameArr);
            // console.log(obj.data); //得到当前点击的节点数据
            // console.log(obj.checked); //得到当前节点的展开状态:open、close、normal
            // console.log(obj.elem); //得到当前节点元素
        }
    });
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值