layui table表格跨页多选

最新推荐文章于 2024-05-22 16:42:57 发布

其斤r

最新推荐文章于 2024-05-22 16:42:57 发布

阅读量941

点赞数

文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/weixin_38817361/article/details/132896346

版权

需求：表格数据进行批量操作，支持跨页多选

layui版本号：layui-v2.5.4

直接上代码：

html：

<table class="layui-table" id="table" lay-filter="tableUser"></table>

layui渲染table内容，在done回调方法中对选中数据进行渲染：

// 先设置全局变量 ids 和 tableIds
var ids = []; // 用户存储选中的数据信息
var tableIds = []; // 当前页全部数据信息
layui.table.render({
	elem: '#table',
	url: 'api/user',
	where: {},
	cellMinWidth: 80,
	page: {
		theme: '#23b7e5'
	},
	cols: [
        [{ // 表格复选框
			type: 'checkbox',
			width: 70
		},
        {...}]
    ],
	done: function (res, aa, bb, cc) {

		// 设置当前页全部数据id到全局变量
		tableIds = res.data.map(function (value) {
			return value.userId;
		});
		// console.log("tableIds",tableIds);
		// 设置当前页选中项
		$.each(res.data, function (idx, val) {
			if (ids.indexOf(val.userId) > -1) {
				val["LAY_CHECKED"] = 'true';
				//找到对应数据改变勾选样式，呈现出选中效果
				let index = val['LAY_TABLE_INDEX'];
				$('tr[data-index=' + index + '] input[type="checkbox"]').click();
				layui.form.render('checkbox'); //刷新checkbox选择框渲染
			}
		});
		// 获取表格勾选状态，全选中时设置全选框选中
		let checkStatus = layui.table.checkStatus('tableUser');
		if (checkStatus.isAll) {
			$('.layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
			layui.form.render('checkbox'); //刷新checkbox选择框渲染
		}
	}
});

监听表格勾选事件：

layui.table.on('checkbox(tableUser)', function (obj) {
	// console.log("obj", obj);
	if (obj.checked == true) { // 选中
		if (obj.type == 'one') { // 单行点击事件
			ids.push(obj.data.userId);
		} else { // 全选
			for (let i = 0; i < tableIds.length; i++) {
				//当全选之前选中了部分行进行判断，避免重复
				if (ids.indexOf(tableIds[i]) == -1) {
					ids.push(tableIds[i]);
				}
			}
		}
	} else { // 取消选中
		if (obj.type == 'one') { // 单行点击事件
			let i = ids.length;
			while (i--) {
				if (ids[i] == obj.data.userId) {
					ids.splice(i, 1);
				}
			}
		} else { // 全选
			let i = ids.length;
			while (i--) {
				if (tableIds.indexOf(ids[i]) != -1) {
					ids.splice(i, 1);
				}
			}
		}
	}
});