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>