Layui表格开启分页与修改删除操作

最新推荐文章于 2025-02-06 11:08:22 发布

原创最新推荐文章于 2025-02-06 11:08:22 发布 · 1.1k 阅读

7 ·

CC 4.0 BY-SA版权

Layui 专栏收录该内容

2 篇文章

订阅专栏

在这里插入图片描述

html

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="/layui/css/layui.css" rel="stylesheet" media="all"/>

</head>
<body>
<!-- 隐藏的表格 -->
<div  class="layui-row" id="open_div" style="display:none;">
    <div id="add_form" class="layui-form" lay-filter="add" action="" style="margin-top: 20px;align:center;">
        <div class="layui-form-item" >
            <label class="layui-form-label">ID</label>
            <div class="layui-input-inline" style="width: 45%">
                <input id="bookId" lay-verify="number" type="text" name="bookId" placeholder="请输入图书Id"
                       autocomplete="off" class="layui-input" >
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">书 名</label>
            <div class="layui-input-inline" style="width: 45%">
                <input required lay-verify="required" id="bookName" type="text" name="bookName"
                       placeholder="请输入书名" autofocus
                       class="layui-input" autocomplete="off">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">作 者</label>
            <div class="layui-input-inline" style="width: 45%">
                <input id="bookAuthor" lay-verify="required" type="text" name="bookAuthor" placeholder="请输入作者"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">出版社</label>
            <div class="layui-input-inline" style="width: 45%">
                <input id="publish" lay-verify="required" type="text" name="publish"
                       placeholder="请输入出版社" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">页 数</label>
            <div class="layui-input-inline" style="width: 45%" >
                <input id="pages" lay-verify="required" type="text" name="pages"
                       placeholder="请输入页数" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">价 格</label>
            <div class="layui-input-inline" style="width: 45%">
                <input id="price" lay-verify="required" type="text" name="price" placeholder="￥"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">评分</label>
            <div class="layui-input-inline" style="width: 45%">
                <input id="bookGrade" lay-verify="number" type="text" name="bookGrade"
                       placeholder="请输入评分" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">ISBN</label>
            <div class="layui-input-inline" style="width: 45%">
                <input id="isbn" lay-verify="required" type="text" name="isbn"
                       placeholder="请输入ISBN" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">简 介</label>
            <div class="layui-input-inline" style="width: 45%" >
                    <textarea id="bookIntro" lay-verify="required" name="bookIntro" placeholder="请输入简介"
                              class="layui-textarea "
                              autocomplete="off"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="update_submit">立即提交</button>
            </div>
        </div>
    </div>
</div>



    <div class="layui-body " >
    
            <div class="demoTable">
                搜索书名：
                <div class="layui-inline">
                    <input class="layui-input" name="id" id="demoReload" autocomplete="off">
                </div>
                <button class="layui-btn" data-type="reload">搜索</button>
            </div>

            <div class="layui-row ">
                <table id="demo" lay-filter="test"></table>
            </div>
            <script type="text/html" id="barDemo">
                <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>
        </div>
        <div th:include="common/footer :: footer"></div>
    </div>
</div>

<script src="/scripts/jquery.min.js"></script>
<script src="/layui/layui.js"></script>
<script src="/scripts/admin/updateBook.js"></script>



</body>
</html>

Js

layui.use(['upload','element','layer','table','form'], function(){
    var $ = layui.jquery
        ,upload = layui.upload
        ,element = layui.element
        ,layer = layui.layer
        ,table = layui.table
        ,form = layui.form;

    table.render({
        elem: '#demo'
        // ,height: 800
        ,height: 'full-200'
        , width: 'full-200'
        ,url: '/updateBookPages' //数据接口
        ,page: true //开启分页
        ,limit: 20
        ,cols: [[ //表头
            {field: 'bookId', title: 'ID', width:125,}
            ,{field: 'bookName', title: '书名', width:145}
            ,{field: 'bookAuthor', title: '作者', width:140}
            ,{field: 'publish', title: '出版社', width:120}
            ,{field: 'pages', title: '页数', width:80}
            ,{field: 'price', title: '价格', width:80}
            ,{field: 'bookGrade', title: '评分', width:60}
            ,{field: 'isbn', title: 'ISBN', width:130}
            ,{field: 'bookIntro', title: '图书简介', width:130}
            ,{fixed: 'right', width:118,title: '操作', align:'center', toolbar: '#barDemo'}
        ]]
    });

    //执行重载
    var $ = layui.$, active = {
        reload: function(){
            var demoReload = $('#demoReload');
            table.reload('demo', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                        bookName: demoReload.val()
                }
            });
        }
    };

    $('.demoTable .layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });

    //监听工具条
    table.on('tool(test)', function(obj){
        var data = obj.data;
        // 删除
        if(obj.event === 'del'){
            layer.confirm('真的删除行么', function(index){
                $.ajax({
                    url: "/deleteByBookId",
                    type: "POST",
                    data: {bookId:data.bookId},
                    success: function (msg) {
                        if (msg.code === 0) {
                            //删除这一行
                            obj.del();
                            //关闭弹框
                            layer.close(index);
                            layer.msg("删除成功", {icon: 6});
                        } else {
                            layer.msg("删除失败", {icon: 5});
                        }
                    }
                });
            });
        }
        // 编辑
        else if(obj.event === 'edit'){
            // 回填数据到表单

            updateuser(obj,data);
        }
    });
    //编辑更新用户
    function updateuser(obj, data) {
        form.val("add", {
            "bookId": data.bookId
            , "bookName": data.bookName
            , "bookAuthor": data.bookAuthor
            , "publish": data.publish
            , "pages": data.pages
            , "price": data.price
            , "bookGrade": data.bookGrade
            , "isbn": data.isbn
            , "bookIntro": data.bookIntro
        });

        layer.open({
            async: false,
            //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
            type: 1,
            title: "修改图书信息",
            skin: 'layui-layer-molv',
            area: ['500px', '700px'],
            content: $("#open_div"),//引用的弹出层的页面层的方式加载修改界面表单
        });

        form.on('submit(update_submit)', function (massage) {
            console.log("message为：", massage);
            console.log(massage.field);
            var data1 = massage.field;

            $.ajax({
                type: "post",
                url: "/updateBook",
                data: JSON.stringify(massage.field),
                contentType: 'application/json',
                datatype: "json",
                success: function (msg) {
                    console.log(msg);
                    layer.closeAll();//关闭所有的弹出层
                    if (msg.code === 0) {
                        layer.msg("修改成功", {icon: 6});
                        //刷新数据
                        $(".layui-laypage-btn").click();
                    } else {
                        layer.msg("修改失败", {icon: 5});
                    }
                }
            })
            return false

        })
    }


});

controller

   /**
     * 管理员：更新图书
     * @param
     * @return
     */
    @GetMapping("/updateBookPages")
    @ResponseBody()
    public Map<String, Object> updateBookPage(@RequestParam("page") Integer page,Integer limit,@RequestParam(value = "bookName",required = false) String bookName){
        Page<Book> bookPage = null;
        if (bookName == ""|| bookName==null){
            bookPage=bookService.selectAllBooksByPage(page,limit);
        }else {
            bookPage = bookService.selectBookByBookNamePage(page, limit, bookName);
        }
        List<Book> records = bookPage.getRecords();
        Map<String, Object> map = new HashMap<>();
        map.put("data", records);
        map.put("code", 0);
        map.put("count", bookPage.getTotal());
        map.put("msg", "");
        return map;
    }

    /**
     * 管理员：返回更新图书页面
     * @param request
     * @return
     */
    @GetMapping("/updateBookPage")
    public String updateBookPages(HttpServletRequest request){
        return "admin/updateBook";
    }

    /**
     * 管理员：按图书id删除图书
     */
    @PostMapping("/deleteByBookId")
    @ResponseBody
    public Map<String,Object> deleteByBookId(@RequestParam("bookId") Integer bookId){
        HashMap<String, Object> map = new HashMap<>();
        Integer flag = bookService.deleteByBookId(bookId);
        if (flag!=0){
            map.put("code", 0);
        }else {
            map.put("code", 1);
        }
        return map;
    }

    /**
     * 管理员：更新图书信息
     * @param book
     * @return
     */
    @PostMapping("/updateBook")
    @ResponseBody
    public Map<String, Object> updateBook(@RequestBody Book book) {
        HashMap<String, Object> map = new HashMap<>();
        Integer flag = bookService.updateBook(book);
        if (flag!=0){
            map.put("code", 0);
        }else {
            map.put("code", 1);
        }
        return map;
    }