Layui数据表点击某行选中当前行复选框并改变其背景颜色
第一种：单机窃听（推荐）
CSS：
.layui-table-click {
background-color:cadetblue !important;
color:white;
}
js:
getlist: function () {
var height = $("#tablist").height();
table.render({
elem: '#test'
, url: '/Product/Part_ProductList'
, id: 'scoollisttable'
, page: true //开启分页
, method: 'post'
, height: height
, fitColumns: true //表格自动适应屏幕
, even: true //隔行背景是否显示
, limits: [10, 20, 50, 100, 200, 500] //显示分页的条数
, limit: 10 //默认显示条数
, toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
, cols: [[ //表头
{ type: 'checkbox', sort: true, fixed: 'left' }
, { field: 'numbers', width: 50, title: '序号', type: 'numbers' }//序号列
, { field: 'ProductId', width: 110, title: '产品编号', sort: true }
, { field: 'ProductName', width: 110, title: '产品名称' }
, { field: 'ProductPrice', width: 110, title: '产品价格', sort: true }
, { field: 'ProductUnit', width: 80, title: '单位' }
, { field: 'ProductTypeName', width: 135, title: '产品类别名称' }
, { field: 'ProductWeight', width: 80, title: '重量', sort: true }
, { field: 'ProductSpec', width: 110, title: '产品规格' }
, { field: 'Barcode', width: 110, title: '商品条码' }
, { field: 'CreateUserId', width: 90, title: '创建人ID' }
, { field: 'CreateUserName', width: 110, title: '创建人姓名' }
, { field: 'CreateDate', width: 160, title: '创建时间' }
, { field: 'ModifyUserId', width: 90, title: '修改人ID' }
//, { field: 'ModifyUserName', width: 110, title: '修改人姓名' }
, { field: 'ModifyDate', width: 160, title: '修改时间' }
, { field: 'Remark', width: 100, title: '备注' }
]]
});
//监听行单击事件
table.on('row(test)', function (obj) {
//动态添加背景色
//hasClass：是否包含该样式
if (obj.tr.hasClass('layui-table-click')) {
obj.tr.removeClass('layui-table-click'); //删除背景色和字体色
obj.tr.find('.layui-form-checkbox').removeClass('layui-form-checked');//取消复选框选中样式
} else {
obj.tr.addClass('layui-table-click'); //设置背景色和字体色
obj.tr.find('.layui-form-checkbox').addClass('layui-form-checked'); //设置复选框选中样式
}
var index = obj.tr.data('index');
var tableData = table.cache.scoollisttable;//scoollisttable 是表格上面绑定数时设置的表格id
var trHasClass = obj.tr.hasClass('layui-table-click');
//循环判断class,选中checkbox
layui.each(tableData, function (i, item) {
if (trHasClass == true) {
if (index == i) {
item.LAY_CHECKED = true;
}
} else {
if (index == i) {
item.LAY_CHECKED = false;
}
}
});
});
功效图：
第二种：窃听
实施思路
直接改变checkbox选中状态和伪checkbox(DIV)类
并且调用checkStatus无法获取选中的行。
检查底层源代码。 checkStatus方法的实现是缓存数据中的属性来判断是否被选中。
于是循环缓存数据，利用索引找到操作数据变化javascript判断复选框，再次获取选中行即可获取。
html:
js:
getlist: function () {
var height = $("#tablist").height();//这是设置高度，你可以直接定义一个值
table.render({
elem: '#test'
, url: '/Product/Part_ProductList'
, id: 'scoollisttable'
, page: true //开启分页
, method: 'post'
, height: height
, fitColumns: true //表格自动适应屏幕
, even: true //隔行背景是否显示
, limits: [10, 20, 50, 100, 200, 500] //显示分页的条数
, limit: 10 //默认显示条数
, toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
, cols: [[ //表头
{ type: 'checkbox', sort: true, fixed: 'left' }
, { field: 'ProductId', width: 110, title: '产品编号', sort: true }
, { field: 'ProductName', width: 110, title: '产品名称' }
, { field: 'ProductPrice', width: 110, title: '产品价格', sort: true }
, { field: 'ProductUnit', width: 80, title: '单位' }
, { field: 'ProductTypeName', width: 135, title: '产品类别名称' }
, { field: 'ProductWeight', width: 80, title: '重量', sort: true }
, { field: 'ProductSpec', width: 110, title: '产品规格' }
, { field: 'Barcode', width: 110, title: '商品条码' }
, { field: 'CreateUserId', width: 90, title: '创建人ID' }
, { field: 'CreateUserName', width: 110, title: '创建人姓名' }
, { field: 'CreateDate', width: 160, title: '创建时间' }
, { field: 'ModifyUserId', width: 90, title: '修改人ID' }
//, { field: 'ModifyUserName', width: 110, title: '修改人姓名' }
, { field: 'ModifyDate', width: 160, title: '修改时间' }
, { field: 'Remark', width: 100, title: '备注' }
]]
});
table.on('row(test)', function (obj) {
var flag = !obj.tr.find(':checkbox:first').prop('checked');
obj.tr.find(':checkbox').prop('checked', flag);
if (flag) {
obj.tr.find('.layui-form-checkbox').addClass('layui-form-checked'); //设置复选框选中样式
$(obj.tr.selector).attr({ "style": "background:cadetblue;color:white" });//改变当前tr背景颜色和字体颜色
} else {
obj.tr.find('.layui-form-checkbox').removeClass('layui-form-checked');//取消复选框选中样式
$(obj.tr.selector).attr({ "style": "background:" });//取消当前tr颜色
}
//scoollisttable 为表格ID 注意此处如果ID不正确将导致你在监听复选框时获取不到你选择的数据，前面的只是添加或删除选中未选中样式以及设置背景色，字体颜色
layui.each(table.cache.scoollisttable, function (i, l) {
if (obj.tr.index() == l.LAY_TABLE_INDEX) {
l.LAY_CHECKED = flag;
}
});
});
功效图
第三种方法：点击行时选中复选框，
我真的不推荐它
$(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();
}
//选中背景色
$(this).siblings().css("background-color", "#FFFFFF");
$(this).css("background-color", "green");
});
$(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
e.stopPropagation();
});
功效图：
我对后端了解不多，只知道一些基础知识。 如果你对我写的有什么疑问javascript判断复选框，可以留言。 也希望各位路过的大佬能给我一些建议。 谢谢你，呵呵。
