2022-02-23 工作记录--LayUI-表格行内容中的多选框根据需要进行展示（部分不展示） + 实现批量删除_layui表格多选

一、LayUI-表格行内容中的多选框根据需要进行展示（部分不展示）

一、实现效果：

1. 未被删除的行内容左侧展示复选框，可被批量删除；
2. 被删除的行内容左侧不展示复选框，不可被批量删除。
   

二、实现代码

1、若想实现：表格行内容中的多选框根据需要进行展示，layui内置没有该功能，所以只能自己通过templet实现；（见下图中第一个红色框框里的内容）

2、实现全选功能。（见下图中第二个红色框框里的内容）

对应代码：

// 自己通过templet实现复选框
{
    templet: "#checkbd",
    title: "<input type='checkbox' name='siam_all' title='' lay-skin='primary' lay-filter='siam_all'> ",
    width: 60,
}
1
2
3
4
5
6

// 实现全选功能
form.on("checkbox(siam_all)", function () {
    var status = $(this).prop("checked");
    $.each($("input[name=siam_one]"), function (i, value) {
        $(this).prop("checked", status);
    });
    form.render();
});
1
2
3
4
5
6
7
8

3、实现：在哪些条件下，行内容左侧可显示复选框

对应代码：

<script type="text/html" id="checkbd">
    {{#  if (d.del_status === 0){ }}
    <input type="checkbox" name="siam_one" title="" lay-skin="primary" data-id = "{{ d.id }}">
    {{#  } }}
</script>
1
2
3
4
5

CSS

.laytable-cell-checkbox .layui-disabled.layui-form-checked i {
   background: #fff !important;
}
1
2
3

4、获取选中复选框对应行内容的id

var ids = [];
$.each($("input[name=siam_one]:checked"), function (i, value) {
   ids[i] = $(this).attr("data-id");  // 如果需要获取其他的值 需要在模板中把值放到属性中 然后这里就可以拿到了
});
1
2
3
4

参考自优秀的博文：https://blog.csdn.net/qq_32837111/article/details/106603149

二、【补充知识】实现批量删除的代码

详情参考我的另外一篇博文【均实现批量删除，但提示内容有所不同】

HTML

<!--头工具栏内容-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-xs btn_delete" lay-event="batchdel"><i class="layui-icon layui-icon-delete"></i>批量删除</button>
    </div>
</script>
1
2
3
4
5
6

JS

// 头工具栏事件
// 批量删除
table.on('toolbar(test)', function(obj){ //注：toolbar 是头工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    // var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
       case 'batchdel':
                        
       // 获取到的数据：id数组
       var ids = [];
       $.each($("input[name=siam_one]:checked"), function (i, value) {
            ids[i] = $(this).attr("data-id");  // 如果需要获取其他的值 需要在模板中把值放到属性中 然后这里就可以拿到了
       });
       console.log(ids)

       if(ids == ''){
            layer.alert('请选择删除项');return;
       }
       layer.prompt({title: '请填写删除出勤率原因（注：必填项）',},function (value,index, elem) {
            $.ajax({
                url:"{:url('teacherDetailDel')}",
                type:'post',
                dataType:'json',
                data:{
                    id: ids,
                    reason: value
                },
                success:function(res){
                    if(res.sta == 2000){
                      layer.msg(res.msg,{
                          icon: 1,
                          time: 2000 //2秒关闭（如果不配置，默认是3秒）
                      },function () {
                          layer.close(index);
                          // 表格重载
                          var name = $('input[name=name]').val()
                          var starttime = $('input[name=starttime]').val()
                          let obj = {
                              name,starttime
                          }
                          active.reload(obj)
                        });
                     }else{
                        layer.msg(res.msg,{icon:2});
                     }
                  }
                 })
              })
        break;
     }
 });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50