SpringMVC+MyBatis 开发社交网站-27_实现图书更新功能

实现图书修改更新功能

imooc-reader 项目:

webapp\WEB-INF\ftl\management\

book.ftl  图书管理页面

<script src="/resources/layui/layui.all.js"></script>

<script>

    var table = layui.table; //table数据表格对象

    var $ = layui.$; //jQuery

    var editor = null; //wangEditor富文本编辑器对象

    //初始化图书列表

    table.render({

        elem: '#grdBook'  //指定div

        , id : "bookList" //数据表格id

        , toolbar: "#toolbar" //指定工具栏,包含新增添加

        , url: "/management/book/list" //数据请求地址

        , page: true //开启分页, 携带参数 ?page=1&limit=10

        , cols: [[ //表头

            { field: 'bookName', title: '书名', width: '300'}

            , { field: 'subTitle', title: '子标题', width: '200'}

            , { field: 'author', title: '作者', width: '200'}

            , { type: 'space', title: '操作', width: '200' , templet : function(d){

                  //为每一行表格数据生成"修改"与"删除"按钮, 并附加data-id属性(代表图书编号)

                    return "<button class='layui-btn layui-btn-sm btn-update'  data-id='" + d.bookId + "' data-type='update' οnclick='showUpdate(this)'>修改</button>" +

                        "<button class='layui-btn layui-btn-sm btn-delete'  data-id='" + d.bookId + "'   οnclick='showDelete(this)'>删除</button>";

                }

            }

        ]]

    });

    //显示更新图书对话框

    //obj对应点击的"修改"按钮对象

    function showUpdate(obj){

       //弹出"编辑图书"对话框

        layui.layer.open({

            id: "dlgBook", //指定div

            title: "编辑图书", //标题

            type: 1,

            content: $('#dialog').html(), //设置对话框内容,复制自dialog DIV

            area: ['820px', '730px'], //设置对话框宽度高度

            resize: false //是否允许调整尺寸

        })

        var bookId = $(obj).data("id"); //获取"修改"按钮附带的图书编号

        $("#dlgBook #bookId").val(bookId); //为表单隐藏域赋值,提交表单时用到

        editor = new wangEditor('#dlgBook #editor'); //初始化富文本编辑器

        editor.customConfig.uploadImgServer = '/management/book/upload' //设置图片上传路径

        editor.customConfig.uploadFileName = 'img'; //图片上传时的参数名

        editor.create(); //创建wangEditor

        //设置当前表单提交至"/management/book/update"

        $("#dlgBook #optype").val("update");