Layui学习总结-批量删除功能

最新推荐文章于 2024-04-18 13:04:54 发布

zukxu

最新推荐文章于 2024-04-18 13:04:54 发布

阅读量1.1k

点赞数 2

文章标签： Layui 批量删除

本文链接：https://blog.csdn.net/zukxu123/article/details/103503232

版权

文章目录

Layui学习总结-批量删除功能

Layui学习总结-批量删除功能

一、思路设计

大家也可以去参考我之前写的第一篇关于Layui批量删除的博客

解决了上一篇文章中留下的bug,进一步完善这个功能
上一篇文章地址如下：
https://blog.csdn.net/zukxu123/article/details/101165761

该功能实现的核心代码如下：
就是获取所有选中的行的数据，遍历获取id值传给后端进行删除操作，获得返回结果之后重新渲染当前页面即可

 table.on('toolbar(table)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'delAll':
                        //定义数组存放批量删除的行的id
                        var listId = [];
                        //获得所有选中行的数据
                        var datas = checkStatus.data;
                        //进行遍历所有选中行数据，拿出每一行的id存储到数组中
                        $.each(datas, function (i, data) {
                            listId.push(data.id)
                        });
                   }
              });

二、代码实现

1、html代码

所有代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>批量删除</title>
  <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-header layui-bg-green">
      <div class="layui-row">
        <div class="layui-col-sm3">
          <span class="text-size-middle">批量删除</span>
        </div>
      </div>

    </div>
    <div class="layui-card-body">
      <table id="table" lay-filter="table"></table>
    </div>
  </div>
</div>

<!-- toolbar -->
<script type=" text/html" id="delAllToolbar">
<a class="layui-btn" lay-event="add" id="addAll"><i class="layui-icon layui-icon-upload"></i>批量添加</a>
<a class="layui-btn layui-btn-danger" lay-event="delAll">批量删除</a>
</script>
<!-- bar -->
<script type="text/html" id="actionBar">
<!--<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.all.js"></script>
<script>
$(function() {
  layui.use(['table', 'form', 'upload'], function() {
    const $ = layui.$,
      table = layui.table,
      upload = layui.upload,
      layer = layui.layer
    table.render({
      elem: '#table',
      //url: '/user/list',
      //method: 'get',
      url: 'info.json',
      toolbar: '#delAllToolbar',
      height: 575,
      cols: [
        [{
          type: 'checkbox',
          fixed: 'left'
        }, {
          field: 'id',
          title: '编号',
          sort: 'true'
        }, {
          field: 'name',
          title: '用户名',
          edit: 'text',
          width: 120
        }, {
          field: 'age',
          title: '年龄',
          sort: true
        }, {
          field: 'email',
          title: '邮箱',
          edit: 'text'
        }, {
          field: 'birthday',
          title: '生日',
          sort: true
        }, {
          field: 'details',
          title: '简介',
        }, {
          fixed: 'right',
          title: '操作',
          toolbar: '#actionBar',
          width: 150
        }]
      ],
      text: {
        none: '暂无相关数据'
      },
      page: true
    })

    upload.render({
      elem: '#addAll' //绑定元素
    })
    //头工具栏事件
    table.on('toolbar(table)', function(obj) {
      //获取选中的数据
      let checkStatus = table.checkStatus(obj.config.id)
      console.log(checkStatus)
      switch (obj.event) {
        case 'delAll':
          //定义数组存放批量删除的行的id
          let listId = []
          //获得所有选中行的数据
          const dataList = checkStatus.data
          console.log(dataList)
          //进行遍历所有选中行数据，拿出每一行的id存储到数组中
          $.each(dataList, function(i, data) {
            listId.push(data.id)
          })
          if (listId.length <= 0) {
            layer.msg('请选择要删除的行', {
              icon: 2
            })
          } else {
            layer.confirm('真的删除行么', function(index) {
              //向服务端发送删除指令
              layer.alert('向服务端发送删除指令')
              /* $.ajax({
                 url: '/user/delAll',
                 type: 'delete',
                 contentType: 'application/json;charset=UTF-8',
                 dataType: 'json',
                 data: JSON.stringify({
                   'ids': listId
                 }),
                 success: function(res) {
                   console.log(res)
                   if (res.code !== 200) {
                     table.reload('delAll', {
                       page: {
                         curr: $('.layui-laypage-em').next().html() //重新从当前页开始
                       }
                     })
                   }
                 }
               })*/
              console.log(listId)
              layer.close(index)
            })
          }
          break
        case 'addAll':
          const uploadInst = upload.render({
            url: '/user/addAll', //TODO 添加批量用户接口
            method: 'post',
            exts: 'xlsx|xls',//只允许上传Excel文件
            done: function(res) {
              layui.msg(res)
              table.reload('delAll', {
                page: {
                  curr: 1 //重新从第 1 页开始
                }
              })
            },
            error: function() {
              //请求异常回调
              layer.msg('error')
            }
          })
          break
      }
    })

    //监听单元格编辑
    table.on('edit(table)', function(obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
      console.log(obj.value) //得到修改后的值
      console.log(obj.field) //当前编辑的字段名
      console.log(obj.data) //所在行的所有相关数据
      $.ajax({
        url: '/user/updateUser',
        type: 'put',
        contentType: 'application/json;charset=UTF-8',
        dataType: 'json',
        data: JSON.stringify(obj.data),
        success: function(res) {
          console.log(res)
          if (res.code !== 200) {
            layer.msg(res.msg, {
              icon: 1
            })
          } else {
            layer.msg(res.msg, {
              icon: 2
            })
          }
        }
      })
    })

    //监听行工具条
    table.on('tool(table)', function(obj) { //注：tool 是工具条事件名，delAll 是 table 原始容器的属性 lay-filter="对应的值"
      const data = obj.data.id //获得当前行数据
      const layEvent = obj.event //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      const tr = obj.tr //获得当前行 tr 的 DOM 对象（如果有的话）

      if (layEvent === 'del') { //删除
        layer.confirm('真的删除行么', function(index) {
          /*     $.ajax({
                 url: '/user/delUser',
                 type: 'delete',
                 data: {
                   'id': data
                 },
                 success: function(res) {
                   console.log(res)
                   if (res.code !== 200) {
                     obj.del() //删除对应行（tr）的DOM结构，并更新缓存
                   }
                 }
               })*/
          console.log(obj)
          obj.del() //删除对应行（tr）的DOM结构，并更新缓存
          layer.close(index)
          //向服务端发送删除指令
        })
      }
    })
  }) //use
}) //全局
</script>
</body>
</html>

2、Json模拟数据

模拟数据文件如下

layui对于表格的返回数据格式有着严格的要求

{
  "code": "0",
  "msg": "",
  "count": "30",
  "data": [
    {
      "id": 935,
      "name": "江秀兰",
      "age": 4147017943049006,
      "birthday": "2014-03-16",
      "email": "m.idssl@rpbzxwrpky.cn",
      "details": "宋勇"
    },
    {
      "id": 970,
      "name": "毛敏",
      "age": 5116280338762030,
      "birthday": "2005-03-18",
      "email": "k.gohawnq@qjfetr.mx",
      "details": "贾明"
    },
    {
      "id": 369,
      "name": "孙娜",
      "age": 2763152458425208,
      "birthday": "1998-03-02",
      "email": "l.qit@rjhxeh.cd",
      "details": "杨平"
    },
    {
      "id": 13,
      "name": "曹伟",
      "age": 1356633505556362,
      "birthday": "1978-05-19",
      "email": "o.lwwbwkldet@jqgjfju.pg",
      "details": "崔平"
    },
    {
      "id": 320,
      "name": "史强",
      "age": 4886544367125658,
      "birthday": "1997-11-26",
      "email": "s.ufyr@xoeidymzv.bh",
      "details": "康敏"
    },
    {
      "id": 857,
      "name": "魏明",
      "age": 1449925015594196,
      "birthday": "1993-09-18",
      "email": "w.qstjngqsdu@jvteksoh.tv",
      "details": "江秀兰"
    },
    {
      "id": 474,
      "name": "邹静",
      "age": 88275121412674,
      "birthday": "1976-07-11",
      "email": "c.enymriu@ytgj.aw",
      "details": "石艳"
    },
    {
      "id": 710,
      "name": "龚静",
      "age": 4284522719231460,
      "birthday": "1976-08-21",
      "email": "o.tltwsvwi@xjtuubpe.sr",
      "details": "夏娟"
    },
    {
      "id": 957,
      "name": "蒋军",
      "age": 1316806026130408,
      "birthday": "2017-10-26",
      "email": "z.wfeu@optqumd.ke",
      "details": "石芳"
    },
    {
      "id": 583,
      "name": "阎伟",
      "age": 2813604300486156,
      "birthday": "1991-11-02",
      "email": "r.hpdl@kqvr.tf",
      "details": "姚刚"
    },
    {
      "id": 824,
      "name": "顾静",
      "age": 5189316257526176,
      "birthday": "1976-02-04",
      "email": "r.huifmcenxs@ltgkb.sn",
      "details": "白军"
    },
    {
      "id": 532,
      "name": "周超",
      "age": 5712563662333894,
      "birthday": "2015-06-07",
      "email": "v.mvri@sgjlwj.sl",
      "details": "秦桂英"
    }
  ]
}