Bootstrap-table实现表格列求和功能

Bootstrap-table 实现列求和

在使用 Bootstrap-table 时，有时需要对某列的数据进行求和，并将结果展示在表格底部。以下是具体实现步骤：

• HTML 结构中，需要设置列属性以启用总计功能：

<th data-field="purchaseQuantity"
   data-align="center"
   data-footer-formatter="sumQuantityFormatter"

确保表格标签中包含 data-show-footer="true" 属性，以便显示表脚。

• Javascript 部分，定义求和函数：

/**
 * 计算采购数量总计
 * 
 * @param data - 数据数组
 * @returns {string} - 总计字符串
 */
function sumQuantityFormatter(data) {
    var field = this.field;
    var resultSumQuantity = parseFloat(data.reduce(function(sum, row) {
        return sum + (+row[field]);
    }, 0).toFixed(6)); // 保留六位小数
    return "采购数量总计: " + resultSumQuantity;
}

通过上述配置，可以在 Bootstrap-table 中轻松实现特定列的求和功能，并在表格底部显示总计信息。