Layui treetable 复选框联动解决方案

标注: treetable.js没有checked做联动。于是自己基于treetable开发的一个小功能。写的不好,多多见谅。

1. 在当前HTML文档checked监听函数中增加以下代码

        //联动
        table.on('checkbox(quan_list)', function(obj){
            //console.log(obj);
            //当前id
            var id = obj.data.id;
            var status = obj.checked;
            //所有子类选中
            children_check(id,status);
            //所有父类选中
            parent_check(id,status);
        });

2. 当前HTML文档增加两个自定义函数(名字可以随便起)

/**
 * 递归
 * 当前权限下所有的子权限
 * @param id 当前权限id
 * @param status  checked 状态
 */
function  children_check(id,status){
	//所有子类
	var children_list = $('.layui-table').find('span[lay-tpid='+id+']');
	for (var i=0;i<children_list.length;i++){
		var this_id = $(children_list[i]).attr('lay-tid');
		if($('.layui-table').find('span[lay-tpid='+this_id+']').length > 0){
			children_check(this_id,status);
		}
	}
	children_list.parents('td').prev().find('input').next().toggleClass("layui-form-checked");;
	children_list.parents('td').prev().find('input').prop('checked', status);
}


/**
 * 递归
 * 当前权限下所有的父元素
 * @param id 当前权限id
 * @param status  checked 状态
 */
function  parent_check(id,status){
	// 父级
	var pid = $('.layui-table').find('span[lay-tid='+id+']').attr('lay-tpid');
	//最高层停止
	if(pid == 0){
		return false;
	}
	//查看同级元素是否还有选中的
	var x_list = $('.layui-table').find('span[lay-tpid='+pid+']');
	var check_num = 0
	for (var i=0;i < x_list.length;i++){
		if($(x_list[i]).parents('td').prev().find('input').prop('checked')){
			check_num ++;
		}
	}
	//修改父级状态
	var parent_list = $('.layui-table').find('span[lay-tid='+pid+']');
	if(status){
		//选中样式
		if(check_num == 1){
			parent_list.parents('td').prev().find('input').next().addClass("layui-form-checked");
			parent_list.parents('td').prev().find('input').prop('checked', true);
			//查看父级是否还有父级
			parent_check(pid,status);
		}
	}else{
		if(check_num == 0) {
			parent_list.parents('td').prev().find('input').next().removeClass("layui-form-checked");
			parent_list.parents('td').prev().find('input').prop('checked', false);
			//查看父级是否还有父级
			parent_check(pid,status);
		}
	}

}

最终效果:

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

最初的M

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值