layui实现点击table复选框时，为其添加背景色

1         .tr_bj_color {
2             background-color: #FFE7BA !important;
3         }

 1             table.on('checkbox(test)', function (obj) {
 2 
 3                 //全选时
 4                 if (obj.type == "all") {
 5                     if (obj.checked) {//全选中
 6                         var checkStatus = table.checkStatus('idTest');
 7                         var sdata = checkStatus.data;
 8                         if (sdata.length > 0) {//渲染背景颜色
 9                             $(".layui-table-body .layui-table tr").each(function () {
10                                 $(this).addClass("tr_bj_color");
11                             })
12                         }
13                     }
14                     else {//全部不选
15                         $(".layui-table-body .layui-table tr").each(function () {
16                             $(this).removeClass("tr_bj_color");
17                         })
18                     }
19                 }
20                 else {//单选
21                     var checkStatus = table.checkStatus('idTest');
22                     var sdata = checkStatus.data;
23                     if (obj.checked) {//选中
24                         obj.tr.addClass('tr_bj_color');
25                     }
26                     else {//取消选中
27                         obj.tr.removeClass('tr_bj_color');
28                     }
29                 }
30             });

 1                     table.on('radio(test)', function (obj) {
 2 
 3                         //移除所有背景色
 4                         $(".layui-table-body .layui-table tr").each(function () {
 5                             $(this).removeClass("tr_bj_color");
 6                         })
 7 
 8                         //选中时添加背景色
 9                         if (obj.checked) {
10                             obj.tr.addClass('tr_bj_color');
11                         }
12                     });

  1         layui.use('table',
  2                 function () {
  3                     var table = layui.table;
  4                     table.render({ //其它参数在此省略
  5                         elem: '#list',
  6                         id: 'idTest',
  7                         url: 'GetBasetaskPssList',
  8                         //toolbar: '#toolbarDemo',
  9                         defaultToolbar: [],
 10                         height: '270', //高度最大化减去差值
 11                         width: '970',
 12                         limit: 20,
 13                         where: { conn: Pub.getConn(), ck: Pub.getCK(), idspecs: $("#idspecs").val() },//如果无需传递额外参数，可不加该参数
 14                         //method: 'post' //如果无需自定义HTTP类型，可不加该参数
 15                         request: {
 16                             pageName: 'pageIndex', //页码的参数名称，默认：page
 17                             limitName: 'pageSize' //每页数据量的参数名，默认：limit
 18                         },//如果无需自定义请求参数，可不加该参数
 19                         response: {
 20                             statusName: "Code",
 21                             statusCode: 1, //规定成功的状态码，默认：0
 22                             msgName: 'Msg', //规定状态信息的字段名称，默认：msg
 23                             countName: 'TotalCount', //规定数据总数的字段名称，默认：count
 24                             dataName: 'Data' //规定数据列表的字段名称，默认：data
 25                         },//如果无需自定义数据响应名称，可不加该参数
 26                         page: false, //开启分页
 27                         cols: [[ //表头
 28                           { field: 'kid', type: 'radio' },
 29                           { field: 'worktask', title: '常规作业项', sort: true, width: "21.8%" },
 30                           { field: 'taskdesc', title: '作业目标描述', sort: true, width: "40%" },
 31                           { field: 'featuredesc', title: '属性', sort: true, width: "30%" }
 32                         ]],
 33                         done: function (res, curr, count) {
 34                             //如果是异步请求数据方式，res即为你接口返回的信息。
 35                             //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
 36                             console.log(res);
 37 
 38                             //得到当前页码
 39                             console.log(curr);
 40 
 41                             //得到数据总量  
 42                             console.log(count);
 43 
 44                             if ($("#idspecs_s").val() != "" && $("#idspecs_s").val() != null) {
 45 
 46                                 //获取表单中的所有数据
 47                                 let tableData = layui.table.cache["idTest"]
 48 
 49                                 //获取需要筛选匹配选中的数据
 50                                 let checkStatus = Pub.getCache("btasklistDtat");
 51 
 52                                 //进行循环判断
 53                                 for (var i = 0; i < tableData.length; i++) {
 54                                     //筛选需要选中的行
 55                                    if (tableData[i].idactivity == checkStatus[0].idtask) {
 56                                        $(".layui-table-view[lay-id='idTest'] .layui-table-body tr[data-index= '" + i + "' ] .layui-form-radio").click();
 57                                    }
 58                                }
 59                             }
 60                         }
 61                     });
 62 
 63                     //头工具栏事件
 64                     table.on('toolbar(test)',
 65                     function (obj) {
 66                         var checkStatus = table.checkStatus(obj.config.id);
 67                         switch (obj.event) {
 68                             case 'getCheckData':
 69                                 var data = checkStatus.data;
 70                                 layer.alert(JSON.stringify(data));
 71                                 break;
 72                             case 'getCheckLength':
 73                                 var data = checkStatus.data;
 74                                 layer.msg('选中了：' + data.length + ' 个');
 75                                 break;
 76                             case 'isAll':
 77                                 layer.msg(checkStatus.isAll ? '全选' : '未全选');
 78                                 break;
 79                         };
 80                     });
 81 
 82                     //监听行单击事件（单击事件为：row）
 83                     table.on('rowDouble(test)', function (obj) {
 84                         var data = obj.data;
 85                         console.log(obj.event);
 86                         Pub.win('台账详情', 'Equip/EquipmentInfo?conn=' + Pub.getConn() + '&ck=' + Pub.getCK() + '&idequip=' + data.idequip, 1120, 630);
 87                     });
 88 
 89                     //监听工具条
 90                     table.on('tool(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
 91                         var data = obj.data; //获得当前行数据
 92                         var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
 93                         var tr = obj.tr; //获得当前行 tr 的DOM对象
 94 
 95                         if (layEvent === 'info') { //详情
 96                             Pub.win('计划详情', 'Equip/EquipmentInfo?conn=' + Pub.getConn() + '&ck=' + Pub.getCK() + '&idequip=' + data.idequip, 1120, 630);
 97                         }
 98 
 99                         if (layEvent === 'update') { //二维码
100 
101                         }
102 
103                         if (layEvent === 'delete') { //删除
104                             Pub.confirm("您确认要删除所选项吗？", {
105                                 btn: ['确认删除', '我再想想'] //按钮
106                             }, function () {
107                                 var idvariety = [];
108                                 idvariety.push(data.idvariety);
109                                 var req = {
110                                     conn: Pub.getConn(),
111                                     ck: Pub.getCK(),
112                                     idvariety: idvariety
113                                 };
114                                 Pub.post({
115                                     url: 'Equip/DelVariety',
116                                     data: req,
117                                     success: function (res) {
118                                         console.log(res)
119                                         if (res.Code == 1 && res.WsCode == 1) {
120                                             Pub.showMsg(res.Msg, { icon: 1 });
121                                             location.reload();
122                                         } else {
123                                             Pub.showMsg(res.Msg, { icon: 5 });
124                                         }
125                                     },
126                                     error: function () {
127                                         Pub.showMsg("服务繁忙，请稍后再试！", { icon: 5 });
128                                     }
129                                 });
130                             })
131                         }
132                     });
133 
134 
135                     // 实现点击表格复选框时，为其添加背景色
136                     table.on('radio(test)', function (obj) {
137 
138                         //移除所有背景色
139                         $(".layui-table-body .layui-table tr").each(function () {
140                             $(this).removeClass("tr_bj_color");
141                         })
142 
143                         //选中时添加背景色
144                         if (obj.checked) {
145                             obj.tr.addClass('tr_bj_color');
146                         }
147                     });
148                 });