Layui Table单击行勾选Checkbox功能实现

作者:百宝袋时间:2026-10-22 16:51:25浏览:273

本文介绍在Layui表格中实现单击行自动勾选复选框的方法。核心思路是通过jQuery监听表格行点击事件,获取行索引并定位到对应的checkbox控件。针对存在固定列导致checkbox位于不同table的情况进行了特殊处理,并阻止事件冒泡以避免重复触发,从而实现点击行即可选中或取消选中的交互效果。

具体实现方案如下。


//单击行勾选checkbox事件
$(document).on("click",".layui-table-body table.layui-table tbody tr", function () {
 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();
 }
});

$(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
 e.stopPropagation();
});

Layui Table单击行勾选实现原理

核心思路是为表格的行绑定单击事件,通过JavaScript操作DOM元素来完成勾选逻辑。

第一步,获取当前行的data-index属性值,该值用于后续定位具体的复选框控件。

第二步,判断表格是否存在固定列。若存在固定列,复选框会渲染在独立的固定列table中,因此需要优先从该区域查找;否则从普通表格区域查找。

第三步,结合table容器和data-index,通过CSS选择器“td div.laytable-cell-checkbox div.layui-form-checkbox I”定位到具体的checkbox元素。若找到该元素,则模拟触发其点击事件。

第四步,拦截td层面的单击事件并停止冒泡,防止事件再次向上触发导致上述逻辑重复执行。第五步,将此段代码在页面初始化完成后执行一次即可生效。

实现后的效果是:用户单击表格任意行时,该行对应的复选框会自动处于选中或取消选中的状态。

以上即为Layui表格单击行勾选复选框功能的完整实现方法,供开发者参考使用。

作者最新文章