layui数据表格单击行勾选（多选或者单选行）选项的功能

最新推荐文章于 2024-04-13 22:05:43 发布

转载最新推荐文章于 2024-04-13 22:05:43 发布 · 9.6k 阅读

收录于

Layui

本文介绍如何使用jQuery实现表格行点击时自动选中或取消选中对应的Checkbox或Radio按钮，通过监听表格行的点击事件并找到对应的数据索引，进而控制复选框或单选框的状态。同时，通过事件阻止防止重复触发。

实现效果：单击行，自动选中或取消勾选

–对于复选框按钮点击行的选中功能：

//单击行勾选checkbox事件
$('.DetailDiv').on("click",".layui-table-body table.layui-table tbody tr", function () {
	/*当单击表格行时,把单选按钮设为选中状态*/
	var tableDiv;
    var index = $(this).attr('data-index');
    var tableBox = $(this).parents('.layui-table-box');
    //存在固定列
    if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length>0) {
        tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
    } else {
        tableDiv = tableBox.find(".layui-table-body.layui-table-main");
    }
    var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
    if (checkCell.length>0) {
        checkCell.click();
    }
});

//对td的单击事件进行拦截停止，防止事件冒泡再次触发上述的单击事件 
$('.DetailDiv').on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
    e.stopPropagation();
});

–对于单选框按钮点击行的选中功能：

$('.DetailDiv').on("click",".layui-table-body table.layui-table tbody tr", function () {
	/*当单击表格行时,把单选按钮设为选中状态*/
	var tableDiv;
	var index = $(this).attr('data-index');
	var tableBox = $(this).parents('.layui-table-box');
	//存在固定列
	if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length>0) {
		tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
	} else {
		tableDiv = tableBox.find(".layui-table-body.layui-table-main");
	}
	var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.layui-table-cell div.layui-form-radio I");
	if (checkCell.length>0) {
		checkCell.click();
	}
});
	//对td的单击事件进行拦截停止，防止事件冒泡再次触发上述的单击事件  将此代码在页面初始化后执行一次即可以。
	$('.DetailDiv').on("click", "td div.layui-table-cell div.layui-form-radio", function (e) {
		e.stopPropagation();
	});

参考原文原文：https://blog.csdn.net/damosk/article/details/79609272

标签

#layui #web前端