bootstrap table 常用方法

参考资料： bootstrap table参数中文文档链接 - 作者：wyb880501

获取多选选中的数据

// json对象的数组
var rows = $('#table').bootstrapTable('getSelections');

修改没有数据的提示信息

$("#tableId").bootstrapTable({
	...
    formatNoMatches:function(){
        return "你的自定义文字说明";
    }
    ...
})

刷新列表

$('#table').bootstrapTable('refresh');

执行查询时刷新列表并返回第一页

踩过的坑：该方法在初次加载没有数据的情况下会失效。

$('#table').bootstrapTable('selectPage', 1);

推荐的方法：

$('#table').bootstrapTable('refreshOptions', {pageNumber: 1});

分页

function initTable(filter) {
    $('#table').bootstrapTable({
        classes: 'table table-no-bordered table-striped',  //类名，通常用来定义样式
        toolbar: '#toolbar',   //功能栏
        toolbarAlign: 'right',
        pagination: true,  //分页条显示
        paginationHAlign: 'left',
        paginationDetailHAlign: 'right',  //分页详情位置
        paginationPreText: '上一页',
        paginationNextText: '下一页',
        paginationLoop: false,  //分页是否循环，默认true
        formatNoMatches:function(){   //数据表中没有数据的显示文字
            return "暂无数据";
        },
        url: constants.baseUrl + '/file/listFile',  //请求数据的接口
        cache: false,  //数据缓存，默认true
        method: 'get',
        dataType: "json",
        sortOrder: 'desc',  //排序的方法，desc倒序，默认asc正序
        queryParams: function (params) {  //定义请求接口的参数
            var temp = {   // 这里的键的名字和控制器的变量名（接口传递的参数）必须一致
                size: params.limit,   // 页面大小
                page: params.offset / params.limit,  // 页码
                sortField: params.sort, // 排序列名
                sortBy: params.order.toUpperCase(),  //正道序, 后台传递字段为大写格式
            };
            return temp;
        },
        responseHandler: function (res) {  //返回成功后处理返回结果
            if (res.data) {
                return {
                    "rows" : res.data.content,
                    "total" : res.data.totalElements
                };
            } else {
                return {
                    "rows" : [],
                    "total" : 0
                };
            }
        },
        pageNumber: 1,
        pageSize: 10,
        pageList: [10, 25, 50, 100],
        sidePagination: 'server',  //设置在哪里分页，默认‘client’，不在服务器端分页，适合静态数据
        columns: [{
            checkbox: true
        }, {
            field: 'id',
            title: '序号',
            formatter: function (value, row, index) {
                var pageSize = $('#table').bootstrapTable('getOptions').pageSize;     // 得到每页多少条
                var pageNumber = $('#table').bootstrapTable('getOptions').pageNumber;   //页码
                return pageSize * (pageNumber - 1) + index + 1;
            },
            width: 50
        }, {
            field: 'name',
            title: '文件名称',
            formatter: function (value, row, index) {  //对返回值进行处理
                return '<span title="' + value + '">' + value + '</span>'
            }
        }, {
            field: 'type',
            title: '文件类型',
            width: 120,
            formatter: function (value, row, index) {
                if (value == 0) return '其他';
                if (value == 1) return '文档';
                if (value == 2) return '图片';
                if (value == 3) return '视频';
                if (value == 4) return '音频';
            }
        }, {
            field: 'operate',
            title: '操作',
            width: 160,
            formatter: function (value, row, index) {
                var hindleBtn = [
                    '<button class="btn btn-link btn-xs" οnclick="viewItem(\'' + row.id + '\')">查看</button>&nbsp;',
                    '<button class="btn btn-link btn-xs" οnclick="downloadItem(\'' + row.id + '\')">下载</button>&nbsp;',
                ];
                return hindleBtn.join('');
            }
        }]
    });
};

合并单元格(跨列)

效果图:

columns: [[ {
            field: "ship",
            title: '船舶营运人',
            align: 'center',
            valign: 'middle',
            rowspan: 2,
            colspan: 1
        }, {
            field: "vehicleNumber",
            title: '船舶类型',
            align: 'center',
            valign: 'middle',
            rowspan: 2,
            colspan: 1
        }, {
            field: "ferryVehicleNumber",
            title: '是否投入运营',
            align: 'center',
            valign: 'middle',
            rowspan: 1,
            colspan: 3
        }], 
        [{
            field: "ferryTurnover",
            title: '2019.2.9',
            align: 'center',
            valign: 'middle',
            rowspan: 1,
            colspan: 1
        }, {
            field: "ferrySeat",
            title: '2019.2.10',
            align: 'center',
            valign: 'middle',
            rowspan: 1,
            colspan: 1
        }, {
            field: "ferrySeat",
            title: '2019.2.11',
            align: 'center',
            valign: 'middle',
            rowspan: 1,
            colspan: 1
        }]];