前端开发 - BootstrapTable使用指南

设置高度为灵活高度

添加高度属性

    height: $(window).height() * 0.68,

添加数据统计

分为两步：

第一步

    showFooter: true,

第二步

            footerFormatter: function (value) {
                var count = 0;
                for (var i in value){
                    count += parseFloat(value[i].hBorrow);
                }
                return xiaoshu(count);
            }

不显示某些列

        onLoadSuccess: function(){
            if(type == 2){
                $table.bootstrapTable('hideColumn', 'abstractName');
            }
        }

给每一行添加属性

    rowAttributes: function (row, index) {
        return {"data-acc": row.acc};
    }

完整示例代码

$('#table').bootstrapTable({
    // data:data,
    idField: 'id',
    dataType: 'jsonp',
    height: $(window).height() * 0.68,//设置高度为页面的68%
    showFooter: true,//设置启用统计功能
    columns: [
        {field: 'id', title: '科目代码', width: '150px',
            footerFormatter: function (value) {
                return "汇总";
            }},
        {field: 'subjectName', title: '科目名称',},
        {field: 'dir1', title: '方向', width: '40px', align: 'center'},
        {field: 'startBalance', title: '期初余额', align: 'right', width: '140px',
            footerFormatter: function (value) {
                var count = 0;
                for (var i in value){
                    count += parseFloat(value[i].startBalance);
                }
                return xiaoshu(count);
            }},
        {field: 'hBorrow', title: '借方发生', align: 'right', width: '140px',
            footerFormatter: function (value) {
                var count = 0;
                for (var i in value){
                    count += parseFloat(value[i].hBorrow);
                }
                return xiaoshu(count);
            }},
        {field: 'hLoad', title: '贷方发生', align: 'right', width: '140px',
            footerFormatter: function (value) {
                var count = 0;
                for (var i in value){
                    count += parseFloat(value[i].hLoad);
                }
                return xiaoshu(count);
            }}
    ],
    showHeader: true,
    onPreBody: function (data) {
        if (data.length > 0){
            for (var i in data) {
                data[i].startBalance = xiaoshu(data[i].startBalance);
                data[i].hBorrow = xiaoshu(data[i].hBorrow);
                data[i].hLoad = xiaoshu(data[i].hLoad);
            }
        }
    },
    //在哪一列展开树形
    treeShowField: 'id',
    //指定父id列
    parentIdField: 'pid',
    onResetView: function (data) {
        $table.treegrid({
            initialState: 'collapsed',// 所有节点都折叠
            treeColumn: 0,
            onChange: function () {
                $table.bootstrapTable('resetWidth');
            }
        });
    },
    rowStyle: function (row, index) {
        return {classes: 'setli'};
    },
    //给每一行添加属性
    rowAttributes: function (row, index) {
        return {"data-acc": row.acc};
    }
});

使用onProBody()方法修改从服务器端拉取的数据

onProBody()方法可以在表格渲染之前触发，于是可以在这里更改表格的数据

但是 onProBody()方法被运行了两次，

如下例：

function printTable(insertRow) {
    $table.bootstrapTable({
        method: "POST",
        cache: false,
        url: ctx + "/admin/cashierManager/getCashierDataList",
        contentType: "application/x-www-form-urlencoded",
        pageSize: 5,
        pageNumber: 1, 
        pageList: [5, 10, 20],
        dataSidePagination: "server",
        sidePagination: "server",
        dataType: 'json',
        pagination: true, //分页
        paginationLoop: false,
        showPaginationSwitch: false,
        paginationPreText: '上一页',
        paginationNextText: '下一页',
        responseHandler: function (res) {
            return {
                "rows": res.content,
                "total": res.totalElements
            };
        },
        columns: [
            {field: 'code', title: '单据号', width: '100px', align: 'center',},
            {field: 'time', title: '日期', width: '100px', align: 'center',},
            {field: 'type', title: '单据类型', width: '100px', align: 'center',},
            {field: 'abstractName', title: '摘要', align: 'center',},
            {field: 'borrow', title: '借方', width: '130px', align: 'right',},
            {field: 'loan', title: '贷方', width: '130px', align: 'right',},
            {field: 'endBalance', title: '余额', width: '130px', align: 'right',},
           ],
        onPreBody: function (data) {
            console.log(data); // 1
            if (data.length > 0){
                // console.log(data);
                var balance = accAdd(insertRow.endBalance, 0);
                var insertRowBalance = accAdd(data[0].endBalance, balance);
                for (var i in data) {
                    if (i == 0){
                        balance = balance + data[i].endBalance;
                    }
                    balance = balance + data[i].borrow - data[i].loan;
                    data[i].endBalance = balance;
                }
                //如果是第一页，要在行首加一条数据
                if (this.pageNumber == 1) {
                    newRow = $.extend(true, insertRow.type, insertRow);
                    newRow.endBalance = insertRowBalance;
                    data.unshift(newRow);
                }
            }
        }
    });
}

在onProBody()方法中使用console.log()方法打印

会打印两次data，data是一个列表

第一次打印一个空列表

第二次打印从后端返回的数据

然后下面的操作data时，由于data为空，会报data[0].endBalance不存在的错

解决办法：

添加判断

    if (data.length > 0){
        
    }

解决bootstrapTable的load方法不可用的问题

迁移系统后使用bootstrapTable的load方法加载数据

$table.bootstrapTable('load',data);

方法无效；（确认可以查询到数据且打印在前端但是没有渲染到bootstrap table上）

解决办法：

table.bootstrapTable('removeAll');
table.bootstrapTable('append',data.data);

使用先清空再添加的方法解决该问题。