本文共 9827 字,大约阅读时间需要 32 分钟。
package com.antrain.restful.controller;import com.antrain.restful.entity.User;import com.antrain.restful.service.UserService;import com.antrain.restful.util.PageResult;import com.antrain.restful.util.PageUtil;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.*;import javax.annotation.Resource;import java.util.Map;@Controller@RequestMapping("/adminAjax")public class UserController2 { @Resource private UserService userService2; @GetMapping("/userPage") public String list(){ return "admin/userManager"; } //@ResponseBody 作用是将结果以json形式传送给前端 @ResponseBody @GetMapping("/users") public PageResult userList(@RequestParam Mapparams){ PageResult pageResult = userService2.queryUsers(new PageUtil(params)); return pageResult; } public boolean valid(User user) { return user==null||user.getId()==null||user.getUsername() == null || user.getPassword() == null || user.getBirth() == null || user.getSex() == null; } @ResponseBody @PostMapping("/user") public String add(@RequestBody User user){ // @RequestBody 从请求体拿数据,不加出错 return String.valueOf(userService2.insert(user)); } @ResponseBody @GetMapping("/user/{id}") public User toEdit(@PathVariable("id") Integer id){ return userService2.queryById(id); } @ResponseBody @PutMapping("/user") public int update(@RequestBody User user){ //System.out.println(user); return userService2.update(user); } @ResponseBody @DeleteMapping("/user/{id}") public int del(@PathVariable("id") Integer id){ return userService2.del(id); }}
Restful测试
专项管理
$('#tb_users').bootstrapTable({ url: "http://localhost:8080/adminAjax/users", // 请求的后台URL(*) method: 'get', // 请求方式:get/post(*) toolbar: '#toolbar', // 工具按钮用哪个容器 cache: false, // 是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) showRefresh: false, // 是否显示刷新按钮 sortable: false, // 是否启用排序 sortOrder: "asc", // 排序方式 minimumCountColumns: 2, // 最少允许的列数 showToggle: false, // 是否显示详细视图和列表视图的切换按钮 showColumns: false, // 是否显示列操作按钮 detailView: false, // 是否显示详细视图 striped: true, // 设置为true会有隔行变色效果 dataType: "json", // 服务器返回的数据类型 pagination: true, // 设置为true会在底部显示分页条 // queryParamsType : "limit", // 设置为limit则会发送符合RESTFull格式的参数 singleSelect: true, // 设置为true将禁止多选 clickToSelect: true, // 是否启用点击选中行 cardView: false, // 是否显示详细视图 paginationLoop: true, maintainSelected: true, // contentType : "application/x-www-form-urlencoded", // 发送到服务器的数据编码类型 pageSize: 2, // 如果设置了分页,每页数据条数 pageList: [2, 5, 10], // 可供选择的每页的行数(*) pageNumber: 1, // 如果设置了分布,首页页码 search: false, // 是否显示搜索框 uniqueId: "id", // 每一行的唯一标识,一般为主键列 sidePagination: "server", // 设置在哪里进行分页,可选值为"client" 或者 "server" queryParams: function(params) { return { // 说明:传入后台的参数包括offset开始索引,limit步长,sort排序列,order:desc或者,以及所有列的键值对 limit: params.limit, pageSize: params.pageSize, offset: params.offset, }; }, responseHandler: function(res) { //console.log(res); return { //return bootstrap-table能处理的数据格式 "total": res.totalCount, "rows": res.list } }, // 请求服务器数据时,你可以通过重写参数的方式添加一些额外的参数,例如 toolbar 中的参数 如果 // queryParamsType = 'limit' ,返回参数必须包含 // limit, offset, search, sort, order 否则, 需要包含: // pageSize, pageNumber, searchText, sortName, // sortOrder. // 返回false将会终止请求 columns: [{ title: '序号', field: 'id', align: 'left', valign: 'center', width: '10%', formatter: function(value, row, index) { return index + 1; } }, { title: '用户ID', field: 'id', align: 'left', valign: 'center', }, { title: '用户姓名', field: 'username', align: 'center', valign: 'center', cellStyle: function(value, row, index) { return { css: { "word-wrap": "break-word", "word-break": "normal" } }; } },{ title: '性别', field: 'sex', align: 'center', valign: 'center', formatter: function (value, row, index) { return value=='M'?'男':'女'; } //格式化日期 }, { title: '出生日期', field: 'birth', align: 'center', valign: 'center', // formatter: function (value, row, index) { // return ; // } //格式化日期 },{ title: 'Item Operate', align: 'center', field: 'id', clickToSelect: false, formatter: function operateFormatter(value, row, index) { var btn = '' return btn; } }]});// 删除用户function delUser(dom) { var message = confirm("确认删除嘛?"); if (message == true) { $.ajax({ url : '/adminAjax/user/' + $(dom).attr("userId"), type : 'delete', success : function(data) { alert("删除成功"); $('#tb_users').bootstrapTable('refresh');//刷新表格 }, error : function(data){ alert("服务器繁忙") } }); }}// 编辑用户function updUser(id) { $("#modalTitle").text("编辑"); $.ajax({ url : '/adminAjax/user/' +id, type : 'get', success : function(data) { $('#userOfId').show().attr('readonly',"readonly").val(data.id); $("#username").val(data.username); $('#password').attr('hidden','hidden').val(data.password); if(data.sex=='M'){ $('#sexM').attr("checked","checked"); } else { $('#sexF').attr("checked","checked"); } $('#birth').val(data.birth); $("#modalEdit").modal("show"); }, error : function(data){ alert("服务器繁忙") } }); //console.log("测试");}//"新增"按钮$(".btn-add").click(function() { $("#modalTitle").text("添加新用户"); $('#idDiv').hide(); $("#username").val("antRain"); $('#password').val("123456").removeAttr('hidden'); $('#sexM').attr("checked","checked"); $('#birth').val('1999-02-23'); $("#modalEdit").modal("show"); //利用bootstrap 的model });$("#saveButton").click(function () { var modalTitle = $("#modalTitle").html(); var method ="post"; var username = $('#username').val(); var password = $('#password').val(); var id = $('#userOfId').val(); var sex =$('input[name="sex"]:checked').val(); var birth = $("#birth").val(); var user ={ "username":username, "password":password, "sex":sex, "birth":birth }; if(modalTitle=="编辑"){ method = 'put'; user.id = id; } $.ajax({ url : '/adminAjax/user', type : method, contentType: "application/json; charset=utf-8", data: JSON.stringify(user),//把 JavaScript 对象转换为字符串。 success : function(data) { $('#tb_users').bootstrapTable('refresh');//刷新表格 }, error : function(data){ alert("服务器繁忙") } }); $("#modalEdit").modal("hide");});
在thymeleaf 标签不能有两个class
:: 后面可以通过css选择器选取
a.ajax is not a function
版本不对bootstraptable json数据加载不出来
json格式{ "totalCount": 13, "pageSize": 10, "totalPage": 2, "currPage": 0, "list": [{ "id": 1, "username": "cogles0", "password": "g9saZ4BJ9Xn", "sex": "M", "birth": "2009-06-11" }, { "id": 2, "username": "kboor1", "password": "QxTltEzxz", "sex": "F", "birth": "2005-06-23" }]}
解决:添加方法
responseHandler: function(res) { console.log(res); return { //return bootstrap-table能处理的数据格式 "total": res.totalCount, "rows": res.list } },
或者最好在服务端传送数据格式
return Json("{\"total\":数据条数,\"rows\":显示的数据}")
BootstrapTable分页
转载地址:http://ohden.baihongyu.com/