对https://blog.csdn.net/Archer__13/article/details/127144489进行优化，对数据进行添加、删除、修改，并将数据分页显示。
一. 添加
1.Controller
@PostMapping("/manage/addBook")
@ResponseBody
public R addBook(Book book){
try {
boolean addResult = bookService.save(book);
if(addResult){
return R.success("添加成功");
}
} catch (Exception e) {
e.printStackTrace();
}
return R.error("添加失败");
}2. 页面
① 增加【添加】按钮
<!-- 添加 -->
<div>
<button type="button" class="btn btn-primary" id="addBookBtn"><span class="glyphicon glyphicon-plus"></span> 添加</button>
</div>② 编写模态窗口：
<!-- 添加的模态窗口，使用的是bootstrap中已经定义好的样式 -->
<div class="modal fade" role="dialog" id="addBookModal" > <!-- modal用来标识模态窗口，fade是弹出时的动画效果（淡入淡出效果）， role="dialog"标识对话框 -->
<div class="modal-dialog" role="document" style="width: 85%;"> <!-- class="modal-dialog"：模态窗口的第二层容器 -->
<div class="modal-content"> <!-- class="modal-content"：模态窗口的第三层容器 -->
<div class="modal-header"> <!-- class="modal-header"：模态窗口的头部 -->
<button type="button" class="close" data-dismiss="modal"> <!-- data-dismiss：通过点击该元素关闭指定目标，即点击叉号关闭class=modal的模态窗口 -->
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">添加书籍</h4>
</div>
<div class="modal-body"> <!-- class="modal-body"：模态窗口的主体内容 -->
<form class="form-horizontal" role="form" id="addBookForm">
<div class="form-group">
<label class="col-sm-2 control-label">书名<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="addBookName">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">价格<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="addBookPrice">
</div>
</div>
</form>
</div>
<div class="modal-footer"> <!-- class="modal-footer"：模态窗口的页脚内容 -->
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="saveBookBtn">保存</button>
</div>
</div>
</div>
</div>③ 给【添加】按钮绑定点击事件，当点击添加按钮时，弹出模态窗口，然后在模态窗口内输入信息；给模态窗口的【保存】按钮绑定单击事件，当点击保存按钮时，向后端发送请求
//给添加按钮添加单击事件
$("#addBookBtn").click(function (){
//重置表单（表单内容清空）
$("#addBookForm").get(0).reset();
//弹出添加的模态窗口
$("#addBookModal").modal("show");
});
//给保存按钮添加单击事件
$("#saveBookBtn").click(function (){
//收集参数
var name = $.trim($("#addBookName").val());
var price = $.trim($("#addBookPrice").val());
//表单验证
if(name==""){
alert("书名不能为空");
return;
}
var priceRequest = /^(([1-9]\d*)|0)$/;
if(!priceRequest.test(price)){
alert("价格只能是非负整数");
return;
}
$.ajax({
url:'[[@{/manage/addBook}]]',
data:{
bookName:name,
price:price
},
type:'post',
dataType:'json',
success:function (data){
if(data.code=="1"){
//关闭模态窗口
$("#addBookModal").modal("hide");
//刷新列表，显示第一页数据，保持每页数显示条数不变
queryBookForPage(1, $("#page").bs_pagination('getOption', 'rowsPerPage'));
}else{
//模态窗口不关
$("#addBookModal").modal("show");
}
}
});
});二. 删除
1. Controller
@RequestMapping("/manage/deleteBook")
@ResponseBody
public R deleteBook(String[] id){
try {
boolean deleteResult = bookService.removeByIds(Arrays.asList(id));
if(deleteResult){
return R.success("删除成功");
}
} catch (Exception e) {
e.printStackTrace();
}
return R.error("删除失败");
}2. 页面
①增加【删除】按钮
<!-- 删除 -->
<div>
<button type="button" class="btn btn-danger" id="deleteBookBtn"><span class="glyphicon glyphicon-minus"></span> 删除</button>
</div>② 给【删除】按钮绑定点击事件
//给全选按钮添加单击事件
$("#checkAll").click(function (){
//如果全选按钮是选中状态，则列表中所有checkbox都选中(即列表中每条数据的checkbox和全选按钮的值保持一致)
$("#bookTableRow input[type='checkbox']").prop("checked", this.checked);
});
//如果列表中的所有checkbox都选中，则全选按钮也选中，否则如果至少一个每有选中，则全选按钮也不选中
//由于列表中的数据是查询之后才加载出来的，晚于其他元素，所以用on的方式
$("#bookTableRow").on("click", "input[type='checkbox']", function (){
if($("#bookTableRow input[type='checkbox']").size() == $("#bookTableRow input[type='checkbox']:checked").size()){
$("#checkAll").prop("checked", true);
}else{
$("#checkAll").prop("checked", false);
}
});
//给删除按钮添加单击事件，删除选中的数据
$("#deleteBookBtn").click(function (){
//获取列表中所有被选中的checkbox
var checkedIds = $("#bookTableRow input[type='checkbox']:checked");
if(checkedIds.size() == 0){
alert("清选择要删除的书");
return;
}
if(window.confirm("确定删除吗？")){
var ids = "";
$.each(checkedIds, function (){
ids += "id="+this.value+"&";
});
ids = ids.substr(0, ids.length-1);
$.ajax({
url:'[[@{/manage/deleteBook}]]',
data:ids,
type: 'post',
dataType: 'json',
success:function (data){
if(data.code == "1"){
//刷新列表，显示第一页数据，保持每页数显示条数不变
queryBookForPage(1, $("#page").bs_pagination('getOption', 'rowsPerPage'));
}else{
alert(data.message);
}
}
});
}
});三. 修改
1. Controller
@PostMapping("/manage/queryBookById")
@ResponseBody
public R queryBookById(String id){
Book book = bookService.getById(id);
if(book != null){
return R.success(book);
}
return R.error("未查询到该书");
}
@RequestMapping("/manage/updateBook")
@ResponseBody
public R updateBook(Book book){
try {
boolean updateResult = bookService.updateById(book);
if(updateResult){
return R.success("修改成功");
}
} catch (Exception e) {
e.printStackTrace();
}
return R.error("更新失败");
}2. 页面
① 增加【修改】按钮
<!-- 修改 -->
<div>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#updateBookModal" id="updateBookBtn"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
</div>② 编写模态窗口：
<!-- 修改的模态窗口 -->
<div class="modal fade" role="dialog" id="updateBookModal" >
<div class="modal-dialog" role="document" style="width: 85%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">修改书籍</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<input type="hidden" id="bookId"> <!-- 使用隐藏域来存储获取到的id -->
<div class="form-group">
<label class="col-sm-2 control-label">书名<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="updateBookName">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">价格<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="updateBookPrice">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" id="updateBtn">更新</button>
</div>
</div>
</div>
</div>③ 给【修改】按钮绑定点击事件，当点击修改按钮时，弹出模态窗口，然后在模态窗口内输入信息；给模态窗口的【更新】按钮绑定单击事件，当点击更新按钮时，向后端发送请求
//给修改按钮添加单击事件
$("#updateBookBtn").click(function (){
var checkId = $("#bookTableRow input[type='checkbox']:checked");
if(checkId.size() == 0){
alert("请选择要修改的数据");
return;
}
if(checkId.size() > 1){
alert("每次只能修改一条数据");
return;
}
var id = checkId[0].value;
$.ajax({
url:'[[@{/manage/queryBookById}]]',
data:{
id:id
},
type:'post',
dataType:'json',
success:function (data){
if(data.code=="1"){
//把信息显示到修改模态窗口的对应位置
$("#bookId").val(data.objectData.id);
$("#updateBookName").val(data.objectData.bookName);
$("#updateBookPrice").val(data.objectData.price);
//弹出修改的模态窗口
$("#updateBookModal").modal("show");
}else{
alert(data.message);
}
}
});
});
//给更新按钮添加单击事件
$("#updateBtn").click(function (){
//收集参数
var id = $("#bookId").val();
var name = $.trim($("#updateBookName").val());
var price = $.trim($("#updateBookPrice").val());
//表单验证
if(name==""){
alert("书名不能为空");
return;
}
var priceRequest = /^(([1-9]\d*)|0)$/;
if(!priceRequest.test(price)){
alert("价格只能是非负整数");
return;
}
$.ajax({
url:'[[@{/manage/updateBook}]]',
data:{
id:id,
bookName:name,
price:price
},
type:'post',
dataType:'json',
success:function (data){
if(data.code=="1"){
//关闭模态窗口
$("#updateBookModal").modal("hide");
//刷新列表，保持页号和每页数显示条数不变
queryBookForPage($("#page").bs_pagination('getOption', 'currentPage'), $("#page").bs_pagination('getOption', 'rowsPerPage'));
}else{
//模态窗口不关
alert(data.message);
$("#updateBookModal").modal("show");
}
}
});
});
});
扫一扫
3239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
