Layui treetable复选框联动解决方案

2025-06-06前端开发
163

我们都知道layui treetable.js没有checked做联动。我们要实现layui 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);
		}
	}
 
}
The End
layui treetable

相关推荐

layui实现图片上传成功后回显点击放大图片功能
layui实现图片上传成功后回显点击放大图片功能,html代码部分: !-- html代码--div class="layui-form-item" label class="layui-form-label"上传图片/label div class="layui-input-block" button type="button" class="layui-btn" id="license-auth-letter-...
2025-09-06 前端开发
202

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图
Layui实现数据表格中鼠标悬停图片放大离开时恢复原图的效果,最终效果如下图所示: 实现代码如下,在done函数中调用hoverOpenImg方法 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/postData', //width : 150...
2025-09-04 前端开发
112

layui点击文本输入框调起弹出选择框并选择内容的两种方法参考
我们在用到layui时候,需要点击文本输入框调起弹出选择框并选择内容,这个要怎么操作呢?以下两种方法可以参考: 1、点击名称,弹出信息弹框,选择表格中的某一行,实现效果如下: html页面代码 !--计量器具弹出层-- div id="equipment" lay-filter="equipmen...
2025-09-02 前端开发
167

Layui treetable复选框联动解决方案
我们都知道layui treetable.js没有checked做联动。我们要实现Layui treetable复选框联动要怎么操作呢?实现的最终效果如下: 1. 在当前HTML文档checked监听函数中增加以下代码: //联动 table.on('checkbox(quan_list)', function(obj){ //console.log(obj);...
2025-06-06 前端开发
163

Layui中实现开关按钮的效果
按钮代码如下: {field: 'state', title: '状态', width: 85, templet: function (data) { if (data.state == 0) { return 'div input type="checkbox" checked="" name="codeSwitch" lay-skin="switch" id="open" lay-filter="switchTest" switchId=' + data...
2025-04-13 前端开发
112

layui.open属性打开一个弹出层
核心方法 var index = layer.open({ type : 2, title : title, maxmin : true, offset: '100px', area : [ '600px', '500px' ], content : prefix + url// iframe的url }); layer.full(index); //最小化 type - 基本层类 类型:Number,默认:0 layer提供了5...
2025-02-25 前端开发
82