LayUI实现批量删除数据行

在对数据表格操作时，时常会出现一个需求，就是批量的删除数据行，那这个如何实现呢？

其实思路很简单，就是对数据表格进行监听，然后对选择的数据行的长度锦绣柠判断，若是长度小于等于0的话，就不能实现删除，若是长度大于0的话，就将其存在到一个数组里面，然后在前端把数组转换成字符串，因为前端的ajax技术是不能把数组传递到后台的，所以需要进行转换。

不说文字直接上代码：

<!-- 表头工具栏 -->
<script type="text/html" id="headbar">
    <a class="layui-btn layui-btn-xs" lay-event="add"><i class="layui-icon layui-icon-file">新增学生</i></a>
    <a class="layui-btn layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-edit">批量删除</i></a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete">批量导入</i></a>
</script>

        //监听数据头部工具栏的按钮
        table.on("toolbar(test)",function (obj) {
            switch (obj.event) {
                //添加学生页面
                case 'add':
                    openAddStudentPage();
                    break;
                //批量删除实现
                case 'del':
                    batchdelete();
                    break;
            }
        })

/**
         * 点击批量删除按钮实现功能
         */
        function batchdelete() {
            //获得数据表的对象
            var checkStatus = table.checkStatus('demo');
            if (checkStatus.data.length > 0) {  //有选择的的数据行

                var ids = [];//定义一个数组，用于存储选中行的id
                //使用for循环将选中的数据信息保存在数组中
                for (let i = 0; i < checkStatus.data.length; i++) {
                    ids[i] = checkStatus.data[i].studentID;
                }
                //实践证明，在这里ajax是不能向后台发送数组数据的，所以需要对数据进行转换，可以转换成字符串
                var idsString = ids.join(",");//分隔符，用啥分割，在后台就用啥拆分。

                //现在数组已经拿到了数据，那我下来就是看能否将数组传递给后台进行删除，删除之前进行判断确认
                layer.confirm("确认删除这" + checkStatus.data.length +"条数据吗？",{icon:3,title:"删除提示"},function (index) {
                    //确认之后，就开始执行ajax异步请求
                    $.post("/admin/batchdelete",{"ids":idsString},function (result) {
                        if (result.success) {
                            layer.alert(result.message,{icon:1})
                            //刷新表格
                            tableIns.reload();
                        } else {
                            layer.alert(result.message,{icon:2})
                        }
                    },"json");

                    //关闭弹出层页面
                    layer.close(index);
                });

            } else {
                layer.msg("请选择删除的数据！");
            }

        }

@RequestMapping("/batchdelete")
    public String batchdeleteStudentFunction(String ids) {

        int delSum = 0;
        HashMap<String, Object> map = new HashMap<String, Object>();
        //将字符串进行拆分
        String[] split = ids.split(",");
        for (int i = 0; i < split.length; i++) {
            int id = Integer.parseInt(split[i]);//将字符串转换为int类型数据
            //循环删除
            if (studentsService.deleteStudentByIDService(id) > 0) {
                map.put("success",true);
                map.put("message","删除成功！");
                delSum++;
            }
        }
        if (delSum <= 0) {
            map.put("success",false);
            map.put("message","删除失败！");
        }
        return JSON.toJSONString(map);

    }