SpringBoot+BootStrapTable+PageHelper用户新增，删除，修改
来源：互联网 发布：淘宝2017虚假交易处罚 编辑：程序博客网 时间：2024/06/06 01:58
撸完代码，成功运行的那一刻，激动、兴奋、高兴地点了个外卖，，琢磨着要记录下来遇到的坑，但是突然发现。不知道该写什么了。。那就先写几个记忆比较深刻的坑，记录下来提醒自己，以及帮助遇到同样问题的旁友
前面已经配置好其他环境，现在就是在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();BootStrapTable获取选中一行数据var rows = $("#dataGrid").bootstrapTable('getSelections');3、获取选中一行的数据到模态框中
//获取选中行的数据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属性。4、后台传递从数据库查到的数据需要转为json
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();导入import com.alibaba.fastjson.JSONObject;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');}});}后台获取ajax传的数组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 rowsidePagination:"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>引入user.js/** * */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');}});}后台Controllerpackage 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(); }}UserMapper.xml<?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>阅读全文
0 0
- SpringBoot+BootStrapTable+PageHelper用户新增，删除，修改
- ORACLE新增，授权，修改，删除用户
- Oracle用户的新增、修改、删除及授权
- LINQ -- 新增 修改 删除
- 触发器新增、修改、删除
- mysql新增用户，用户授权，删除用户
- Linux、Unix新增删除用户
- XML 修改 新增 删除 插入
- extjs4 grid 新增、删除、修改
- extjs4 grid 新增、删除、修改
- PageHelper集成SpringBoot
- springboot+mybatis+pagehelper分页
- springboot集成PageHelper
- springboot 集成pagehelper
- pageHelper+springboot/spring+mapper
- MySQL 新增、删除用户和权限分配-直接修改mysql.user表
- oracle导入dmp文件命令、sql文件命令, Oracle用户的新增、修改、删除及授权
- java中用户对应多个角色时的新增、修改、删除处理操作
- “GridView1”上同时定义了 DataSource 和 DataSourceID。请移除一个定义。
- 关于anaconda 找包，安装包的一些总结（关于Anaconda中PackageNotFoundError： '' Package missing in current win-64 channe）
- JAVA安装
- [ETH]以太坊突破400美元关口创历史新高
- java克隆或者说复制做个记录
- SpringBoot+BootStrapTable+PageHelper用户新增，删除，修改
- apache hive + sentry测试
- java代码获取服务器的地址
- php根据GD库生成透明背景图和和合成图片
- 末尾0的个数
- SolrDemo
- 20. Valid Parentheses
- 欢迎使用CSDN-markdown编辑器
- 华为笔试题--LISP括号匹配 解析及源码实现
