一 列表展示
官方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标签成组件
javascript">$('#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 实体类 – 记录列表数据与总数
java">@Setter
@Getter
@NoArgsConstructor
@AllArgsConstructor
public class TableDataInfo {//总记录数private long total;//列表数据private List<?> rows;
}
6 后台控制器方法需返回JSON格式数据
java">@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 搜索点击事件处理
javascript">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>
javascript">function addOp(){$('input[name]').val('');$("#modalTitle").html("权限新增");$('.modal').modal('show');
}
四 编辑功能
添加编辑点击事件,需要将数据回显到对话框中
javascript">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请求
javascript">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格式数据
java">@RequestMapping("/saveOrUpdate")
@ResponseBody
public JsonResult saveOrUpdate(Permission permission) {if (permission.getId() == null) { // 新增permissionService.save(permission);} else {permissionService.update(permission);}// 重定向return new JsonResult(true,"操作成功");
}
六 删除功能
1 加删除按钮点击事件
javascript">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格式数据
java">@RequestMapping("/delete")
@ResponseBody
public JsonResult delete(Long id) {if (id != null) {permissionService.delete(id);}return new JsonResult(true,"删除成功");
}
