实现图书修改更新功能
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");
标签:27,bookId,title,SpringMVC,layui,editor,MyBatis,id,图书 From: https://blog.csdn.net/a1057258361/article/details/139188800