SpringBoot+BootStrapTable+PageHelper用户新增,删除,修改
转自:http://blog.****.net/damionew/article/details/78630895
前面已经配置好其他环境,现在就是在iframe中使用BootStrapTable
用户管理页面:增加,批量删除,修改,分页,修改是使用模态框获取一行数据
爬爬遇到的坑
1、使用BootStrapTable传递到后台时,分页时,queryParam方法传递pageNumber和pageSize传递到后台死活传不过去,找了好久,
- <span style="white-space:pre"> </span>method:"POST",
- <span style="white-space:pre"> </span>//极为重要,缺失无法执行queryParams,传递page参数
- <span style="white-space:pre"> </span>contentType : "application/x-www-form-urlencoded",
- <span style="white-space:pre"> </span>dataType:"json",
- <span style="white-space:pre"> </span>url:'/user/pageInfo',
- <span style="white-space:pre"> </span>queryParams:queryParam,
- <span style="white-space:pre"> </span>pagination:true,//显示分页条:页码,条数等
- <span style="white-space:pre"> </span>striped:true,//隔行变色
- <span style="white-space:pre"> </span>pageNumber:1,//首页页码
- <span style="white-space:pre"> </span>pageSize:10,//分页,页面数据条数
- contentType : "application/x-www-form-urlencoded",
2、BootStrapTable获取一个表单中填入的值
- var param = $("#addUserForm").serializeArray();
- var rows = $("#dataGrid").bootstrapTable('getSelections');
- <span style="white-space:pre"> </span>//获取选中行的数据
- 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属性。
- List<User> users =userService.getUserList();
- <span style="white-space:pre"> </span>int total = users.size();
- <span style="white-space:pre"> </span>PageHelper.startPage(pageNumber,pageSize);
- <span style="white-space:pre"> </span>List<User> pageInfo=userService.getUserList();
- <span style="white-space:pre"> </span>JSONObject result = new JSONObject();
- <span style="white-space:pre"> </span>result.put("rows",pageInfo);
- <span style="white-space:pre"> </span>result.put("total",total);
- <span style="white-space:pre"> </span>System.out.println(result.toJSONString());
- <span style="white-space:pre"> </span>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>