layui table行监听和多选框冲突问题解决

问题描述

项目使用layui table，由于项目需要设置多选框并且开启行监听，这样就会有一个问题，点击多选框时候，行监听也会执行。

修改目标是点击多选框的时候不触发行监听。

解决方法：不使用原生的行监听部分代码，使用js自己写监听。多选框部分不用修改。

监听部分：

// 原生的
table.on('row(declarationDetailsTable)', function(obj){

// 修改后的
$(document).on("click", "div[lay-id='tableName'] .layui-table-body table.layui-table tbody tr", function () {

监听方法中设置监听对象的样式：

// 原生的
obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
// 修改后的
$(this).addClass('layui-table-click').siblings().removeClass('layui-table-click');

监听方法中获取td里面的值:

// 原生的写法
var data = obj.data;
var name = data.name;

// 修改后的获取值的方法
var name = $(this).find("td[data-field='name']").attr("data-content");

最后加 对td的单击事件进行拦截

// 对td的单击事件进行拦截停止
$(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
    e.stopPropagation();
});

这样点击多选框的时候，就不会触发行监听事件