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和limit
            uniqueId:"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,"删除成功");
}