LayUI数据表格实现数据删除的一套流程

在LayUI的数据表格中有数据行工具栏，里面是有删除功能的，那如何实现呢？

也是要通过事件的监听的，然后对其进行发送ajax异步请求给后端。

先看前端代码：

<script type="text/html" id="hangbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit">编辑</i></a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-delete">删除</i></a>
</script>

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

            if(layEvent === 'detail'){ //查看
                //do somehing，现在还有没有此接口，预留以备使用
            } else if(layEvent === 'delete'){ //删除
                layer.confirm('真的删除吗？',{icon:2}, function(index){

                    //向服务端发送删除指令
                    $.get("/admin/deleteStudent",{"id":data.studentID},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 if(layEvent === 'edit'){ //编辑
                //do something
                // console.log(obj.data);//得到当前行的所有的相关数据
                openUpdateStudentPage(data);
                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            }
        });

核心的发送异步请求的操作是：

//向服务端发送删除指令
                    $.get("/admin/deleteStudent",{"id":data.studentID},function (result) {
                        if (result.success) {
                            layer.alert(result.message,{icon:1});
                            //刷新表格
 tableIns.reload();    tableIns是一个变量，绑定的是数据表格，这里的reload是layui的数据表格的刷新方法，可以不用再刷新页面的情况下对数据表格实现刷新功能。
                        } else {
                            layer.alert(result.message,{icon:2})
                        }
                    },"json");
                    //关闭当前行，把该行的下标索引给他
                    layer.close(index);

现在根据前端的数据接口，查看后端实现：

controller层：

    @RequestMapping("/deleteStudent")
    public String deleteStudentFunction(int id) {


        HashMap<String, Object> map = new HashMap<String, Object>();
        这里使用的是map采用键值对的形式保存设置的数据信息。
        由于前台是异步请求是有返回的数据信息的（success、message）这些的判断与信息都是需要来自后台的
        所以使用map实现，最后使用toJSONString将其转换为JSON类型。 if (studentsService.deleteStudentByIDService(id) > 0) {
            map.put("success",true);
            map.put("message","删除成功！");
        } else {
            map.put("success",false);
            map.put("message","删除失败！");
        }

        return JSON.toJSONString(map);
    }

service层：

    /**
     * 删除学生信息
     * @param studentID
     * @return
     */
    public int deleteStudentByIDService(int studentID) {
        return studentsMapper.deleteStudentByID(studentID);
    }

mapper层：

    <delete id="deleteStudentByID">
        delete from splitpage.students where studentID = #{arg1}
    </delete>