SpringBoot+BootStrapTable+PageHelper使用者新增，刪除，修改
阿新 • • 發佈：2019-01-02
擼完程式碼，成功執行的那一刻，激動、興奮、高興地點了個外賣，，琢磨著要記錄下來遇到的坑，但是突然發現。不知道該寫什麼了。。那就先寫幾個記憶比較深刻的坑，記錄下來提醒自己，以及幫助遇到同樣問題的旁友
前面已經配置好其他環境，現在就是在iframe中使用BootStrapTable
使用者管理頁面：增加，批量刪除，修改，分頁，修改是使用模態框獲取一行資料
爬爬遇到的坑
1、使用BootStrapTable傳遞到後臺時，分頁時，queryParam方法傳遞pageNumber和pageSize傳遞到後臺死活傳不過去，找了好久，
加上這句method:"POST", //極為重要，缺失無法執行queryParams，傳遞page引數 contentType : "application/x-www-form-urlencoded", dataType:"json", url:'/user/pageInfo', queryParams:queryParam, pagination:true,//顯示分頁條：頁碼，條數等 striped:true,//隔行變色 pageNumber:1,//首頁頁碼 pageSize:10,//分頁，頁面資料條數
contentType : "application/x-www-form-urlencoded",2、BootStrapTable獲取一個表單中填入的值
var param = $("#addUserForm").serializeArray();var rows = $("#dataGrid").bootstrapTable('getSelections');
//獲取選中行的資料 var rows = $("#dataGrid").bootstrapTable('getSelections'); if(rows.length!=1){ document.getElementById("tipContent").innerText="請選擇一行資料"; $("#Tip").modal('show'); } else{ var row = rows[0]; $('#editId').val(row.id); $('#editAccount').val(row.account); $('#editPassword').val(row.password); $('#editName').val(row.name); $('#editSex').val(row.sex); $('#editEmail').val(row.email); $('#editPhone').val(row.phone); $('#editStates').val(row.states); $('#editCreated_at').val(row.created_at); $("#editModal").modal("show"); }
#editId是模態框裡面input的id，row.id中的id是模態框一個input中的name屬性。匯入import com.alibaba.fastjson.JSONObject;List<User> users =userService.getUserList(); int total = users.size(); PageHelper.startPage(pageNumber,pageSize); List<User> pageInfo=userService.getUserList(); JSONObject result = new JSONObject(); result.put("rows",pageInfo); result.put("total",total); System.out.println(result.toJSONString()); return result.toJSONString();
5、批量刪除無非存入多個id，到後臺迴圈呼叫刪除。
function deleteUser(){
var rows = $("#dataGrid").bootstrapTable("getSelections");
var ids = [];
var len = rows.length;
debugger;
for(var i=0;i<len;i++){
ids.push(rows[i].id);
}
debugger;
$.ajax({
url:"/user/deleteUser",
dataType:"json",
traditional: true,//屬性在這裡設定
method:"post",
data:{
"ids":ids
},
success:function(data){
document.getElementById("tipContent").innerText="刪除成功";
$("#Tip").modal('show');
$("#dataGrid").bootstrapTable("refresh");
},
error:function(){
document.getElementById("tipContent").innerText="刪除失敗";
$("#Tip").modal('show');
}
});
}String[] list=request.getParameterValues("ids");
6、SpringBoot中templates使用thymeleaf時，<,>都報錯，使用了<，用了for，最後還是放到了別的包下面。這樣在html裡面就不會使用<,>
就記得這麼些了。。
貼程式碼：index.html
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="back/header">
<title>Insert title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<section class="content-header">
<h1>使用者管理</h1>
</section>
<section class="content table-content">
<form class="form-inline" >
<!-- 工具欄 -->
<div id="toolbar">
<input type="button" value="新增使用者" id="addBtn" data-toggle="modal" data-target="#addUserModal" class="btn btn-primary"></input>
<input type="button" value="修改使用者" id="editBtn" data-toggle="modal" data-target="#editUserModal" class="btn btn-primary" onclick="editUser()"></input>
<input type="button" value="刪除使用者" id="deleteBtn" data-toggle="modal" data-target="#deleteUserModal" class="btn btn-primary" onclick="deleteUser()"></input>
</div>
<!-- bootstrapTable -->
</form>
<table id="dataGrid">
</table>
</section>
<!-- 新增使用者的模態框，在修改使用者中將獲取一行的值放入input中，改變一些引數繼續使用 -->
<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3>新增使用者</h3>
</div>
<div class="modal-body">
<form id="addUserForm" action="/user/addUser" method="post" class="form-horizontal">
<div class="form-group">
<label for="inputAccount" class="col-sm-2 control-label">賬戶</label>
<div class="col-sm-7">
<input type="account" name="account" class="form-control" id="inputAccount" placeholder="賬戶"/>
</div>
<label id="errorAccount" for="inputAccount" class="col-sm-3 control-label"></label>
</div>
<div class="form-group" >
<label for="inputPassword" class="col-sm-2 control-label">密碼</label>
<div class="col-sm-7">
<input type="text" name="password" class="form-control" id="inputPassword" placeholder="密碼"/>
</div>
<label id="errorPassword" for="inputPassword" class="col-sm-3 control-label"></label>
</div>
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-7">
<input type="name" name="name" class="col-sm-4 form-control" id="inputName" placeholder="姓名"/>
</div>
<label id="errorName" for="inputName" class="col-sm-3 control-label"></label>
</div>
<div class="form-group">
<label for="inputSex" class="col-sm-2 control-label">性別</label>
<div class="col-sm-7">
<input type="sex" name="sex" class="col-sm-4 form-control" id="inputSex" placeholder="性別"/>
</div>
<label id="errorSex" for="inputSex" class="col-sm-3 control-label"></label>
</div>
<div class="form-group">
<label for="inputPhone" class="col-sm-2 control-label">手機</label>
<div class="col-sm-7">
<input type="phone" name="phone" class="col-sm-4 form-control" id="inputPhone" placeholder="手機"/>
</div>
<label id="errorPhone" for="inputPhone" class="col-sm-3 control-label"></label>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">郵箱</label>
<div class="col-sm-7">
<input type="email" name="email" class="col-sm-4 form-control" id="inputEmail" placeholder="郵箱"/>
</div>
<label id="errorEmail" for="inputEmail" class="col-sm-3 control-label"></label>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="conf" class="btn btn-default" onclick="addUser()">確定</button>
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="resetAddModal()">取消</button>
</div>
</div>
</div>
</div>
<!-- 修改使用者的模態框 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3>修改使用者</h3>
</div>
<div class="modal-body">
<form id="editForm" method="post" class="form-horizontal">
<div class="form-group" style="display:none">
<label for="editId" class="col-sm-2 control-label">ID</label>
<div class="col-sm-7">
<input type="id" name="id" class="form-control" id="editId" placeholder="ID" />
</div>
<label id="errorId" for="editId" class="col-sm-3 control-label"></label>
</div>
<div class="form-group">
<label for="inputAccount" class="col-sm-2 control-label">賬戶</label>
<div class="col-sm-7">
<input type="account" name="account" class="form-control" id="editAccount" placeholder="賬戶"/>
</div>
<label id="errorAccount" for="inputAccount" class="col-sm-3 control-label"></label>
</div>
<div class="form-group" >
<label for="inputPassword" class="col-sm-2 control-label">密碼</label>
<div class="col-sm-7">
<input type="text" name="password" class="form-control" id="editPassword" placeholder="密碼"/>
</div>
<label id="errorPassword" for="inputPassword" class="col-sm-3 control-label"></label>
</div>
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-7">
<input type="name" name="name" class="col-sm-4 form-control" id="editName" placeholder="姓名"/>
</div>
<label id="errorName" for="inputName" class="col-sm-3 control-label"></label>
</div>
<div class="form-group">
<label for="inputSex" class="col-sm-2 control-label">性別</label>
<div class="col-sm-7">
<input type="sex" name="sex" class="col-sm-4 form-control" id="editSex" placeholder="性別"/>
</div>
<label id="errorSex" for="inputSex" class="col-sm-3 control-label"></label>
</div>
<div class="form-group">
<label for="inputPhone" class="col-sm-2 control-label">手機</label>
<div class="col-sm-7">
<input type="phone" name="phone" class="col-sm-4 form-control" id="editPhone" placeholder="手機"/>
</div>
<label id="errorPhone" for="inputPhone" class="col-sm-3 control-label"></label>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">郵箱</label>
<div class="col-sm-7">
<input type="email" name="email" class="col-sm-4 form-control" id="editEmail" placeholder="郵箱"/>
</div>
<label id="errorEmail" for="inputEmail" class="col-sm-3 control-label"></label>
</div>
<div class="form-group">
<label for="inputStates" class="col-sm-2 control-label">狀態</label>
<div class="col-sm-7">
<input type="states" name="states" class="col-sm-4 form-control" id="editStates" placeholder="狀態"/>
</div>
<label id="errorStates" for="inputStates" class="col-sm-3 control-label"></label>
</div>
<div class="form-group" style="display:none">
<label for="inputCreated_at" class="col-sm-2 control-label">建立時間</label>
<div class="col-sm-7">
<input type="created_at" name="created_at" class="col-sm-4 form-control" id="editCreated_at" placeholder="建立時間" />
</div>
<label id="errorCreated_at" for="inputCreated_at" class="col-sm-3 control-label"></label>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="conf" class="btn btn-default" onclick="updateUser()">確定</button>
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="resetAddModal()">取消</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="Tip" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3>提示</h3>
</div>
<div class="modal-body" align="center">
<h4 id="tipContent">新增成功</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">確定</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="updateEnd" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3>提示</h3>
</div>
<div class="modal-body" align="center">
<h4 id="al">修改成功</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">確定</button>
</div>
</div>
</div>
</div>
<div th:include="back/footer"></div>
</body>
<script type="text/javascript">
$(function() {
//初始載入
initDataGrid();
});
function initDataGrid() {
//建立bootstrapTable
$("#dataGrid").bootstrapTable({
method:"POST",
//極為重要，缺失無法執行queryParams，傳遞page引數
contentType : "application/x-www-form-urlencoded",
dataType:"json",
url:'/user/pageInfo',
queryParams:queryParam,
pagination:true,//顯示分頁條：頁碼，條數等
striped:true,//隔行變色
pageNumber:1,//首頁頁碼
pageSize:10,//分頁，頁面資料條數
uniqueId:"id",//Indicate an unique identifier for each row
sidePagination:"server",//在伺服器分頁
height:tableModel.getHeight(),
toolbar:"#toolbar",//工具欄
columns : [{
checkbox:"true",
field : "box"
}, {
title : "ID",
field : "id",
visible: false
}, {
title : "賬戶",
field : "account"
}, {
title : "密碼",
field : "password"
}, {
title : "姓名",
field : "name"
}, {
title : "性別",
field : "sex"
}, {
title : "手機",
field : "phone"
}, {
title : "郵箱",
field : "email"
}, {
title : "狀態",
field : "states"
}, {
title : "建立時間",
field : "created_at",
sortable : true
}],
search : true,//搜尋
searchOnEnterKey : true,
showRefresh : true,//重新整理
showToggle : true//
});
}
function queryParam(params){
var param = {
limit : this.limit, // 頁面大小
offset : this.offset, // 頁碼
pageNumber : this.pageNumber,
pageSize : this.pageSize
};
return param;
}
//點選取消後清空表單中已寫資訊
function resetAddModal(){
document.getElementById("addUserForm").reset();
}
//新增使用者
function addUser(){
var param = $("#addUserForm").serializeArray();
debugger;
$("#conf").attr("onclick","addUser()");
$.ajax({
url:"/user/addUser",
method:"post",
data:param,
dataType:"json",
success:function(data){
if(data.state=="success"){
document.getElementById("al").innerText="新增成功";
$("#addEnd").modal('show');
$("#addUserModal").modal('hide');
$("#dataGrid").bootstrapTable('refresh');
}
},
error:function(){
document.getElementById("al").innerText="新增失敗";
$("#addEnd").modal('show');
}
});
}
//修改使用者
function editUser(){
//獲取選中行的資料
var rows = $("#dataGrid").bootstrapTable('getSelections');
if(rows.length!=1){
document.getElementById("tipContent").innerText="請選擇一行資料";
$("#Tip").modal('show');
}
else{
var row = rows[0];
$('#editId').val(row.id);
$('#editAccount').val(row.account);
$('#editPassword').val(row.password);
$('#editName').val(row.name);
$('#editSex').val(row.sex);
$('#editEmail').val(row.email);
$('#editPhone').val(row.phone);
$('#editStates').val(row.states);
$('#editCreated_at').val(row.created_at);
$("#editModal").modal("show");
}
}
function updateUser(){
var param = $("#editForm").serializeArray();
//設為disable則無法獲取
$.ajax({
url:"/user/updateUser",
method:"post",
data:param,
dataType:"json",
success:function(data){
if(data.state=="success"){
$("#editModal").modal("hide");
document.getElementById("tipContent").innerText="修改成功";
$("#Tip").modal('show');
}
},
error:function(data){
alert("wrong");
}
});
}
</script>
</html>/**
*
*/
function deleteUser(){
var rows = $("#dataGrid").bootstrapTable("getSelections");
var ids = [];
var len = rows.length;
debugger;
for(var i=0;i<len;i++){
ids.push(rows[i].id);
}
debugger;
$.ajax({
url:"/user/deleteUser",
dataType:"json",
traditional: true,//屬性在這裡設定
method:"post",
data:{
"ids":ids
},
success:function(data){
document.getElementById("tipContent").innerText="刪除成功";
$("#Tip").modal('show');
$("#dataGrid").bootstrapTable("refresh");
},
error:function(){
document.getElementById("tipContent").innerText="刪除失敗";
$("#Tip").modal('show');
}
});
}package com.damionew.website.controller.back;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSONObject;
import com.damionew.website.model.back.User;
import com.damionew.website.service.back.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.github.pagehelper.PageHelper;
@Controller
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
@RequestMapping("/insert")
public void insert(User user) {
System.out.println("before");
userService.addUser(user);
System.out.println("after");
}
@RequestMapping("/index")
public String index(User user) {
return "back/user/index";
}
@ResponseBody
@RequestMapping(value="getUser",produces="html/text;charset=UTF-8")
public String queryUserList() {
List<User> users =userService.getUserList();
System.out.println();
JSONObject result = new JSONObject();
result.put("rows", users);
System.out.println(result.toJSONString());
return result.toJSONString();
}
@ResponseBody
@RequestMapping(value="pageInfo",produces="html/text;charset=UTF-8")
public String pageInfo(@RequestParam int pageNumber,int pageSize,HttpServletResponse response) {
response.setContentType("text/json");
response.setCharacterEncoding("utf-8");
List<User> users =userService.getUserList();
int total = users.size();
PageHelper.startPage(pageNumber,pageSize);
List<User> pageInfo=userService.getUserList();
JSONObject result = new JSONObject();
result.put("rows",pageInfo);
result.put("total",total);
System.out.println(result.toJSONString());
return result.toJSONString();
}
@ResponseBody
@RequestMapping("/addUser")
public String addUser(User user) {
Date date = new Date();
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-mm-dd HH:mm:ss");
String time = dateFormat.format(date);
user.setCreated_at(time);
user.setStates("1");
System.out.println(user.getName());
userService.addUser(user);
System.out.println("success");
JSONObject result = new JSONObject();
result.put("state", "success");
return result.toJSONString();
}
@ResponseBody
@RequestMapping("/updateUser")
public String updateUser(User user) {
userService.updateUser(user);
JSONObject result = new JSONObject();
result.put("state", "success");
return result.toJSONString();
}
@ResponseBody
@RequestMapping("/deleteUser")
public String deleteUser(HttpServletRequest request) {
String[] list=request.getParameterValues("ids");
System.out.println(list);
for (int i = 0; i < list.length; i++) {
String id = list[i];
System.out.println(id);
userService.deleteUser(id);
}
JSONObject result = new JSONObject();
result.put("state", "success");
return result.toJSONString();
}
}<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.damionew.website.dao.back.UserDao">
<select id="insert" parameterType="string" resultType="User">
insert into user(name,email) values("2","3")
</select>
<select id="getUserList" parameterType="string" resultType="User">
select * from user
</select>
<select id="addUser">
insert into user(account,password,name,sex,phone,email,states,created_at)
values
(#{account},#{password},#{name},#{sex},#{phone},#{email},#{states},#{created_at})
</select>
<select id="updateUser">
update user set account=#{account},password=#{password},name=#{name},sex=#{sex},phone=#{phone},
email=#{email},states=#{states},created_at=#{created_at}
where id = #{id}
</select>
<select id="deleteUser">
delete from user where id = #{id}
</select>
</mapper>