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.c

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

最终效果：
​​​​