设置bootstrap table footerStyle表格底部样式

上一篇我们讲解了通过showFooter和footerFormatter来显示表格底部。这节我们通过footerStyle来设置底部行每一列的样式，footerStyle支持设置style内联样式和定义class名称。通过以下代码设置StockNum列的class为 classex、ProductName列为红色。

footerStyle定义

function footerStyle(column) {
  return {
      StockNum: 
      {
        classes: 'classex'
      },
      ProductName:
       {
        css: {color: 'red'}
      }
    }[column.field]
 }

完整代码

//设置需要显示的列
var columns = [{
    field: 'Id',
    title: '编号'
}, {
    field: 'ProductName',
    title: '产品名称',
    footerFormatter: productNameFormatter //底部统计函数
}, {
    field: 'StockNum',
    title: 'Item 库存',
    footerFormatter: stockNumFormatter  //底部统计函数
}];


//需要显示的数据
var data = [{
    Id: 1,
    ProductName: '香蕉',
    StockNum: '100'
}, {
    Id: 2,
    ProductName: '苹果',
    StockNum: '200'
}];
//bootstrap table初始化数据
$('#table').bootstrapTable({
    columns: columns,
    data: data,
    showFooter: true, //显示隐藏头部
    footerStyle: footerStyle //底部样式函数
});
function productNameFormatter(data) {
    return "总类：" + data.length
}
function stockNumFormatter(data) {
    var total = 0;
    var field = this.field;
    for (var i = 0; i < data.length; i++) {
        total = total + parseInt(data[i][field]);
    }
    return "总计：" + total
}
function footerStyle(column) {
    return {
        StockNum:
        {
            classes: 'classex'
        },
        ProductName:
        {
            css: { color: 'red' }
        }
    }[column.field]
}

在线试一试