var params = $(‘#queryForm’).serializeObject();
params.limit = param.limit;
params.offset = param.offset;
params.search = param.search;
params.sort = param.sort;
params.order=param.order;
return params;
},
columns:[{
checkbox: true //多选框
},{
field: ‘id’, //每列的字段名
title: ‘id’, //表头所显示的名字
halign: ‘center’, //表头的对齐方式
valign: ‘middle’, //表格对齐方式居中
order: ‘asc’, //默认排序方式
sortable: true, //设置可以排序
align: ‘center’ //表格数据对齐方式
},{
field: ‘name’,
title: ‘姓名’,
valign: ‘middle’,
halign: ‘center’,
align: ‘center’
},{
field: ‘username’,
title: ‘用户名’,
valign: ‘middle’,
halign: ‘center’,
align: ‘center’
}]
});
//设置表格高度
function tableHeight() {
return $(window).height() - 100;
}
其中url是设置请求数据源地址。
queryParams属性是设置传递请求携带的参数。
height属性设置表格的高度，可以写固定值，也可以使用JS方法，返回一个高度。
columns属性是设置显示数据字段内容，其中field属性值需要和实体类对应。
student/page请求数据源后台方法（这里持久层框架是用的Spring-Data-Jpa，只要最后返回的JSON数据格式一样就可以，下面有JSON数据格式样式）。
@RequestMapping(value=“/page”)
@ResponseBody
public Object page(TablePageable pageParam, StudentForm form) {
PageRequest pageable = pageParam.bulidPageRequest();
Specification spec = buildSpec(form);
Page page = studentService.findAll(spec, pageable);
return AjaxResult.bulidPageResult(page);
}
//动态查询，可以写查询条件
public Specification buildSpec(StudentForm form){
return null;
}
其中page方法中接收参数的TablePageable类是接收分页和排序参数类，其中还包含了几个分页排序处理的方法。StudentForm中的字段和实体类中字段一样，主要用于接收查询条件。Student为实体类。buildSpec方法为查询方法。
TablePageable类代码如下。
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Sort;
import org.springframework.data.domain.Sort.Direction;
import org.springframework.data.domain.Sort.Order;
public class TablePageable{
private Integer limit; //分页
private Integer offset;//首记录号（从0开始）
private String sort; //排序字段
private String order; //顺序，逆序
private Integer page; //分页
public Integer getPage() {
return page;
}
public void setPage(Integer page) {
this.page = page;
}
public Integer getLimit() {
return limit;
}
public void setLimit(Integer limit) {
this.limit = limit;
}
public Integer getOffset() {
return offset;
}
public void setOffset(Integer offset) {
this.offset = offset;
}
public String getSort() {
return sort;
}
public void setSort(String sort) {
this.sort = sort;
}
public String getOrder() {
return order;
}
public void setOrder(String order) {
this.order = order;
}
public PageRequest bulidPageRequest() {
int page = (offset != null && limit != null) ? offset / limit : 0;
int size = limit != null ? limit : 10;
if(sort == null) {
return PageRequest.of(page, size);
}else {
Order order2 = new Order(Direction.fromString(order), sort);
Sort sort2=Sort.by(order2);
return PageRequest.of(page, size, sort2 );
}
}
public PageRequest myBulidPageRequest() {
int page = getPage();
int size = limit != null ? limit : 10;
if(sort == null) {
return PageRequest.of(page, size);
}else {
Order order2 = new Order(Direction.fromString(order), sort);
Sort sort2 = Sort.by(order2);
return PageRequest.of(page, size, sort2 );
}
}
public PageRequest bulidPageable(Sort sort) {
int page = (offset != null && limit != null) ? offset / limit : 0;
int size = limit != null ? limit : 10;
return PageRequest.of(page, size, sort);
}
public Sort bulidSort() {
Order order2 = new Order(Direction.fromString(order), sort);
Sort sort2 = Sort.by(order2);
return sort2;
}
}
返回的AjaxResult类为返回提示的一个类。bulidPageResult方法，是返回表格所需要的格式数据。代码如下。
import java.util.HashMap;
import org.springframework.data.domain.Page;
public class AjaxResult {
private Boolean success;
private String msg;
public Boolean getSuccess() {
return success;
}
public void setSuccess(Boolean success) {
this.success = success;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public AjaxResult(String msg) {
super();
this.success=true;
this.msg = msg;
}
public AjaxResult(Boolean success, String msg) {
super();
this.success = success;
this.msg = msg;
}
public AjaxResult(boolean success) {
this.success=success;
}
@SuppressWarnings(“rawtypes”)
public static HashMap<String, Object> bulidPageResult(Page page) {
HashMap<String, Object> result=new HashMap<>();
result.put(“total”, page.getTotalElements());
result.put(“rows”, page.getContent());
return result;
}
}
数据源得到了，就可以看到渲染表格的效果了，如图。
单表的基本数据显示是没有问题了，但关联表的数据怎么显示呢。下面来看一下关联表数据的显示。
在渲染表格的JS中的columns属性值中添加如下代码。
{
field: ‘tbClass’,
title: ‘班级’,
valign: ‘middle’,
halign: ‘center’,
align: ‘center’,
formatter: “tbClassName”
}
formatter属性值对应的是一个方法名，此方法返回需要显示关联表中的数据。
其中参数value表示field对应实体类中的值，row为当前行的数据，index为当前行的索引。因为tbClass为实体类中关联的班级表，索引直接通过value.name就可以得出班级名称。
//班级名称
function tbClassName(value, row, index){
return value?value.name: ‘’;
}
效果图如下。
得到数据源的JSON格式数据。
数据显示基本就这些了，下一步就是对数据进行操作了（增删改查）
定义操作按钮，代码如下。
新增
修改
删除
在渲染表格的JS中通过toolbar属性和和表格绑定，显示在表格的左上角位置。toolbar的属性值为选中操作按钮的DOM元素。toolbar: ‘#toolbar’
效果如下。
功能实现
新增add()方法，新增一个modal弹框，用JQ插入到body中，弹框中显示新增页面，弹框关闭时把弹框删除。代码如下。
//新增
function add(){
var dialog = $(‘
’);dialog.load(“student/edit”);
$(“body”).append(dialog);
/弹出模态框,绑定关闭后的事件/
dialog.modal().on(‘hidden.bs.modal’, function () {
//删除
dialog.remove();
});
}
student/edit请求新增页面的方法，新增和修改后台用的一个方法，id为null，是新增，不为null为修改，根据传递的id查询需要修改的对象，之后把对象数据传递到前台。代码如下。
@RequestMapping(value=“/edit”)
public void edit(StudentForm form, ModelMap map) throws InstantiationException, IllegalAccessException {
//把所有班级查询出来传递到前台
map.put(“tbClass”, tbClassService.findAll());
Student model = new Student();
Integer id = form.getId();
if (id != null) {
model = studentService.findById(id);
}
map.put(“model”, model);
}
新增和修改页面也是共用的一个，减少代码的重复性。edit.thml为新增和修改页面。代码如下。
×
学生管理
确定
关闭
其中options为字段不为空的效验，采用的是BootstrapValidator验证。
提交数据保存后，保存成功就关闭弹框，刷新表格给出提示信息。
student/save后台保存数据方法，新增的保存方法也是和修改保存的方法共用的一个_。
@RequestMapping(value=“/save”)
@ResponseBody
public Object save(StudentForm form) throws InstantiationException, IllegalAccessException {
try {
Student model = new Student();
Integer id = form.getId();
if(id!=null) {
model = studentService.findById(id);
}
//把form中的数据copy到model中，除id以外。form和model中的字段一样
BeanUtils.copyProperties(form, model,“id”);
studentService.save(model);
return new AjaxResult(“数据保存成功”);
} catch (Exception e) {
return new AjaxResult(false,“数据保存失败”);
}
}
返回的AjaxResult类是一个返回提示类，返回统一规范了一下。可以根据自己需求返回内容。AjaxResult代码如下。
import java.util.HashMap;
import org.springframework.data.domain.Page;
public class AjaxResult {
private Boolean success;
private String msg;
public Boolean getSuccess() {
return success;
}
public void setSuccess(Boolean success) {
this.success = success;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public AjaxResult(String msg) {
super();
this.success=true;
this.msg = msg;
}
public AjaxResult(Boolean success, String msg) {
super();
this.success = success;
this.msg = msg;
}
public AjaxResult(boolean success) {
this.success=success;
}
@SuppressWarnings(“rawtypes”)
public static HashMap<String, Object> bulidPageResult(Page page) {
HashMap<String, Object> result=new HashMap<>();
result.put(“total”, page.getTotalElements());
result.put(“rows”, page.getContent());
return result;
}
}
修改edit()方法。和新增方法一样，请求修改页面时，需要带上需要修改行的id，其他后台方法和前台页面都是和新增共用的。
通过$(“#stu_table”).bootstrapTable(‘getSelections’);获取到选中的行。
//修改
function edit(){
var str = $(“#stu_table”).bootstrapTable(‘getSelections’);
if(str.length != 1){
bootbox.alert(“请选中一行进行编辑”);
return ;
}
var dialog = $(‘
’);var id = str[0].id;
dialog.load(“student/edit?id=”+id);
/添加到body中/
$(“body”).append(dialog);
/弹出模态框,绑定关闭后的事件/
dialog.modal().on(‘hidden.bs.modal’, function () {
//删除模态框
dialog.remove();
$(“#stu_table”).bootstrapTable(‘refresh’);
});
}
新增和修改效果图。
修改。
最后一个就是删除了，也是最简单的。
如果是单个删除的话就直接把选中的id传递到后台，根据id删除即可。如果是批量删除，可以把选中行的id拼接起来传递到后台，后天拆分后依次删除。
前台删除JS方法（这里是批量删除）
/删除/
function del(){
var str = $(“#stu_table”).bootstrapTable(‘getSelections’);
if(str.length < 1){
bootbox.alert(“请选中行进行删除”);
}else{
bootbox.confirm(“确定删除选中的”+str.length+“行数据吗?”, function(result){
if(result){
var ids = “”;
for(i = 0; i < str.length; i++){
ids += str[i].id+“,”;
}
if(ids.length > 0){
ids = ids.substring(0, ids.length-1);
}
$.post(‘student/delete1’,{id : ids},function(result){
/* refresh刷新 */
$(“#stu_table”).bootstrapTable(‘refresh’);
bootbox.alert(‘
’+result.msg+‘
’);});
}
});
}
}
后台对应的删除方法。
@RequestMapping(value = “delete1”)
@ResponseBody
public Object delete(String id) {
try {
String[] split = id.split(“,”);
for (int i = 0; i < split.length; i++) {
studentService.deleteById(Integer.parseInt(split[i]));
}
return new AjaxResult(“数据删除成功”);
} catch (Exception e) {
return new AjaxResult(false, “数据删除失败”);
}
}
效果图。
除了在表格上方定义按钮对表格进行操作外，还可以在表格中定义操作按钮对表格进行操作。
在渲染表格的JS中的columns属性值中添加如下代码。在表格中添加操作按钮。
{
field: ‘operation’,
title: ‘操作’,
valign: ‘middle’,
halign: ‘center’,
align: ‘center’,
events: ‘operateEvents’, //给按钮注册事件
formatter: ‘addFunctionAlty’ //表格中增加按钮
}
addFunctionAlty方法为按钮样式，在表格中显示的样式。
//表格中按钮样式
function addFunctionAlty(value, row, index) {
return [
‘修改’,
‘删除’,
].join(‘’);
}
监听表格中按钮的点击事件，通过按钮的id进行对应的按钮监听。
//监听表格中按钮的点击事件
window.operateEvents = {
//修改
“click #update”:function(ev,value,row,index){
var dialog = $(‘
’);var id = row.id;
dialog.load(“student/edit?id=”+id);
/添加到body中/
$(“body”).append(dialog);
/弹出模态框,绑定关闭后的事件/
dialog.modal().on(‘hidden.bs.modal’, function () {
//删除模态框
dialog.remove();
$(“#stu_table”).bootstrapTable(‘refresh’);
});
},“click #del”:function(ev,value,row,index){ //删除
bootbox.confirm(“确定删除当前行数据吗?”, function(result){
if(result){
$.post(‘student/delete1’,{id : row.id},function(result){
/* refresh刷新 */
$(“#stu_table”).bootstrapTable(‘refresh’);
bootbox.alert(‘
’+result.msg+‘
’);});
}
});
}
};
效果图如下，实现了修改和删除功能。
自定义的新增，修改和删除功能都实现了，下面就剩下查询功能了。BootStrapTable右上角是自带的有一个查询框的，我们可以直接用，在后台写上对应的查询方法即可。
前台需要在渲染表格时，queryParams属性需要传递search参数，BootStrapTable指定的查询参数名。即：
后台请求数据的page方法中已经写了查询的方法，只需要在那个方法中添加查询条件即可。在StudentForm中需要添加一个search字段，用于接收传递过来的参数值。查询方法代码如下。search不为空，就进行模糊查询，为空就不查询。
public Specification buildSpec(StudentForm form) {
Specification specification = new Specification() {
private static final long serialVersionUID = 1L;
@Override
public Predicate toPredicate(Root root, CriteriaQuery<?> query, CriteriaBuilder cb) {
HashSet rules = new HashSet<>();
if (StringUtils.hasText(form.getSearch())) {
Predicate name2 = cb.like(root.get(“name”), “%” + form.getSearch() + “%”);
Predicate username2 = cb.like(root.get(“username”), “%” + form.getSearch() + “%”);
Predicate or = cb.or(name2, username2);
rules.add(or);
}
return cb.and(rules.toArray(new Predicate[rules.size()]));
}
};
return specification;
}
效果图如下。
写到这里，肯定有些小伙伴就要说如果我想自定义查询可不可以呢！答案当然是可以的。下面来看一下自定义查询。
自定义查询可以把查询框用弹框显示，和新增一样，可以在表格上方显示（根据项目需求而定）。
这里是在表格上方定义的查询，样式自己随便写了一下。代码如下。
查询
清空
效果如下。
查询和条件同样在queryParams属性中添加，查询时只需刷新表格就可以了，清空时，只需要把查询的form表单清空即可。
查询条件参数。
查询和清空的JS方法。
//查询
function findSearch() {
$(“#stu_table”).bootstrapTable(‘refresh’);
最后
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数Java工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Java开发知识点，不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！
如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
-search" aria-hidden=“true”> 查询
清空
效果如下。
查询和条件同样在queryParams属性中添加，查询时只需刷新表格就可以了，清空时，只需要把查询的form表单清空即可。
查询条件参数。
查询和清空的JS方法。
//查询
function findSearch() {
$(“#stu_table”).bootstrapTable(‘refresh’);
最后
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数Java工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-gDfDqGfk-1715281957639)]
[外链图片转存中…(img-C60gh9FM-1715281957640)]
[外链图片转存中…(img-pfKKrBeC-1715281957640)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Java开发知识点，不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！
如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
8146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
