Bootstrap Table实用配置

记录关于Bootstrap Table的一些实用配置。

html

引入相关文件

页面内容

    
    

        

            姓名：
            
        
        

            年龄：
            
        
        查询
        重置
        新增
    

    


    

使用js方式加载table

官方文档上提供了详尽的配置参数，以下记录几个比较常用的

url

后端数据交互url，要求返回json数据，且包含rows（查询内容）和total（数据总数）

queryParams

数据加载参数，必须要有offset和limit参数，支持通过json格式自定义查询参数
例，自定义name和age作为查询参数：

queryParams: function (params) {
    return {
        offset: params.offset,
        limit: params.limit,
        name: $('#queryNameText').val(),
        age: $('#queryAgeText').val()
    }
}

striped

当值为true显示行间隔条纹效果

pagination

当值为true显示分页条

sidePagination

可选值为'server'、'client'，分别表示服务端分页和客户端分页

pageSize

每页数量，默认值10

pageList

值为一个数组，提供每页可选数量的选择

rowStyle

对行样式的设置，对应函数的两个参数为row, index
例：

rowStyle: function (row, index) {
    var strClass = '';
    if (row.age < 18) {
        strClass = 'text-danger';
    }
    return {classes: strClass}
}

columns

表格列配置项，常用的有

列配置项	描述
field	json数据的列
title	列标题
titleTooltip	列标题提示
class	该列样式（class）
align	对齐方式（left、right、center）

例：

columns: [{
    field: 'id',
    title: '编号',
    titleTooltip: '编号提示',
    class: 'text-danger',
    align: 'center',
}]

还有一个非常有用的列配置项：formatter，可以在表格中写html，使表格内容不限于文本内容，对应函数的三个参数为value, row, index
例：

columns: [{
    formatter: function (value, row, index) {
        return [
          '' +
              '修改' +
          '',
          '' +
              '删除' +
          ''
        ].join('');
    },
    title: '操作'
}]

效果如图：

本例中使用的配置

var $testTable = $('#testTable');
$testTable.bootstrapTable({
    url: '/getPers',
    queryParams: function (params) {
        return {
            offset: params.offset,
            limit: params.limit,
            name: $('#queryNameText').val(),
            age: $('#queryAgeText').val()
        }
    },
    columns: [{
        field: 'id',
        title: '编号'
    }, {
        field: 'name',
        title: '姓名'
    }, {
        field: 'age',
        title: '年龄'
    }, {
        field: 'address',
        title: '地址'
    }, {
        formatter: function (value, row, index) {
            return [
                '' +
                    '修改' +
                '',
                '' +
                    '删除' +
                ''
            ].join('');
        },
        title: '操作'
    }],
    striped: true,
    pagination: true,
    sidePagination: 'server',
    pageSize: 10,
    pageList: [5, 10, 25, 50, 100],
    rowStyle: function (row, index) {
        var ageClass = '';
        if (row.age < 18) {
            ageClass = 'text-danger';
        }
        return {classes: ageClass}
    },
});

与分页插件pagehelper结合使用

服务端分页要求返回的json数据必须包含rows（查询内容）和total（数据总数）两项内容，点击页码按钮会向后端传递offset和limit参数，使用PageHelper.offsetPage(offset, limit);方法可以简单快速地进行分页。

分页内容工具类

/**
 * 用于返回分页结果
 */
public class PaginationResult {

    private long total;

    private List rows;

    public PaginationResult(long total, List rows) {
        this.total = total;
        this.rows = rows;
    }

    public long getTotal() {
        return total;
    }

    public void setTotal(long total) {
        this.total = total;
    }

    public List getRows() {
        return rows;
    }

    public void setRows(List rows) {
        this.rows = rows;
    }

    @Override
    public String toString() {
        return "PaginationResult{" +
                "total=" + total +
                ", rows=" + rows +
                '}';
    }
}

返回数据

仅在web层接收offset和limit参数就可以完美分页，使得对项目的侵入性非常小

    @RequestMapping("/getPers")
    public @ResponseBody
    PaginationResult getPers(int offset, int limit, String name, String age) {
        Page