问题描述
项目使用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(); });
这样点击多选框的时候,就不会触发行监听事件