Java研学-BootStrapTable插件

一 列表展示

官方Bootstrap Table参考文档

1 Bootstrap Table相关的CSS和JS文件

<!-- bootstrap-table 表格插件 -->
<link href="/js/bootstrap-table/bootstrap-table.min.css?v=20210202" rel="stylesheet"/>
<script src="/js/bootstrap-table/bootstrap-table.min.js?v=20210202"></script>
<script src="/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=20210202"></script>
<script src="/js/bootstrap-table/extensions/mobile/bootstrap-table-mobile.min.js?v=20210202"></script>

2 编写table代码

<table id="table"></table>

3 将渲染table标签成组件

$('#table').bootstrapTable({url: '/permission/listData',method: 'GET',   //数据请求方式sidePagination:'server',//服务端分页pagination:true,//开启分页pageNumber:1, //当前地基页pageSize:5, //每页显示数据条数// 默认分页给后台传递的是offset和limituniqueId:"id",columns: [{field: 'id',title: '编号'}, {field: 'name',title: '权限名称'}, {field: 'expression',title: '权限表达式'}, {title: '操作',align: 'center',formatter: function(value, row, index) {var actions = [];actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" οnclick="editOp('+row.id+')"><i class="fa fa-edit"></i>编辑</a> ');actions.push('<a class="btn btn-danger btn-xs btn-delete" href="javascript:void(0)" οnclick="deleteOp('+row.id+')"><i class="fa fa-remove"></i>删除</a> ');return actions.join('');}}]});

4 后台返回组件所需数据格式要求

{"total":8,"rows":[{},{},{}]}

5 实体类 – 记录列表数据与总数

@Setter
@Getter
@NoArgsConstructor
@AllArgsConstructor
public class TableDataInfo {//总记录数private long total;//列表数据private List<?> rows;
}

6 后台控制器方法需返回JSON格式数据

@RequestMapping("/list")
public String list() {return "permission/list";
}
@RequestMapping("/listData")
@ResponseBody
public TableDataInfo listData(QueryObject qo)
{PageHelper.offsetPage(qo.getOffset(),qo.getLimit());//设置分页信息PageInfo<Permission> pageInfo = permissionService.query(qo);return new TableDataInfo(pageInfo.getTotal(),pageInfo.getList());
}

二 高级查询

1 新增输入框和查询按钮

关键字:<input type="text" name="key">
<a href="#" class="btn btn-success btn-input" style="margin: 10px" onclick="searchOp()"><span class="glyphicon glyphicon-search"></span> 检索
</a>

2 bootstrapTable配置信息

queryParams:function(params) {params.key=$("[name=key]").val();return params;
},

3 搜索点击事件处理

function searchOp(){$('#table').bootstrapTable('refresh');
}

三 新增功能

  添加按钮增加点击事件

<a href="#" class="btn btn-success btn-input" style="margin: 10px" onclick="addOp()"><span class="glyphicon glyphicon-plus"></span> 添加
</a>

function addOp(){$('input[name]').val('');$("#modalTitle").html("权限新增");$('.modal').modal('show');
}

四 编辑功能

  添加编辑点击事件,需要将数据回显到对话框中

function editOp(id){var row=$('#table').bootstrapTable('getRowByUniqueId',id);$('input[name]').val('');$('input[name=id]').val(row.id);$('input[name=name]').val(row.name);$('input[name=expression]').val(row.expression);$("#modalTitle").html("权限编辑");$('.modal').modal('show');
}

五 保存功能

1 点击保存发送AJAX请求

function saveOp(){$.ajax({url: "/permission/saveOrUpdate",type: "post",dataType: "json",data: $('#dataForm').serialize(),success: function(result) {if(result.success){$('#table').bootstrapTable('refresh');$('.modal').modal('hide');}else{Swal.fire({text: result.data,icon: 'warning',})}}})
}

2 需返回JSON格式数据

@RequestMapping("/saveOrUpdate")
@ResponseBody
public JsonResult saveOrUpdate(Permission permission) {if (permission.getId() == null) { // 新增permissionService.save(permission);} else {permissionService.update(permission);}// 重定向return new JsonResult(true,"操作成功");
}

六 删除功能

1 加删除按钮点击事件

function deleteOp(id){Swal.fire({title: '确认删除',text: "此操作不可逆",icon: 'warning',showCancelButton: true,confirmButtonColor: '#2875d6',cancelButtonColor: '#d23',confirmButtonText: '确定',cancelButtonText: '取消'}).then((result) => {if(result.value) {$.ajax({url: "/permission/delete?id="+id,type: "get",dataType: "json",success: function(result) {if(result.success){$('#table').bootstrapTable('refresh');}else{Swal.fire({text: result.data,icon: 'warning',})}}})}});
}

2 后台控制器方法需返回JSON格式数据

@RequestMapping("/delete")
@ResponseBody
public JsonResult delete(Long id) {if (id != null) {permissionService.delete(id);}return new JsonResult(true,"删除成功");
}