bootstrap table footerFormatter合并单元格

首先开启表格页脚

showFooter: true,

其次在列参数中添加footerFormatter

{
    field: 'state',
    radio: true,
    align: 'center',
    valign: 'middle',
    footerFormatter:function (data) {
        return "平均分";
    }
}

然后自定义合并内容:

//合并页脚
function merge_footer() {
    var footer_tbody = $('.fixed-table-footer table tbody');
    var footer_tr = footer_tbody.find('>tr');
    var footer_td = footer_tr.find('>td');
    var footer_td_1 = footer_td.eq(0);
    //第一列为:'平均分',第二列为平局分内容
    for(var i=2;i<footer_td.length;i++) {
        footer_td.eq(i).hide();
    }
    footer_td_1.attr('colspan', 3).show();
}

其中fixed-table-footer table tbody 为bootstrap table生成页脚之后的表格内容,此合并方法参照插件中的mergeCells方法

BootstrapTable.prototype.mergeCells = function (options) {
    var row = options.index,
        col = $.inArray(options.field, this.getVisibleFields()),
        rowspan = options.rowspan || 1,
        colspan = options.colspan || 1,
        i, j,
        $tr = this.$body.find('>tr'),
        $td;

    if (this.options.detailView && !this.options.cardView) {
        col += 1;
    }

    $td = $tr.eq(row).find('>td').eq(col);

    if (row < 0 || col < 0 || row >= this.data.length) {
        return;
    }

    for (i = row; i < row + rowspan; i++) {
        for (j = col; j < col + colspan; j++) {
            $tr.eq(i).find('>td').eq(j).hide();
        }
    }

    $td.attr('rowspan', rowspan).attr('colspan', colspan).show();
};

然后将方法调用放到表格插件的onPostBody回调中

onPostBody:function () {
    //合并页脚
    merge_footer();
}

合并效果:

bootstrap table footerFormatter合并单元格