bootstrapTable 扩展后台合计列

最新推荐文章于 2025-06-25 09:09:55 发布

原创最新推荐文章于 2025-06-25 09:09:55 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrapTable

js插件专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何扩展bootstrap table以支持后台计算合计列。主要步骤包括在load方法中保存原始数据，增加getOrlData方法获取数据，以及在resetFooter中调用此方法。在初始化时，根据数据是否存在orlData属性来决定使用新逻辑。要求field必须一致，footer为对象而非数组。若要支持多个合计列，需要进一步扩展。数据示例展示了数据结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于bootstrap table 不提供后台计算合计列所以需要扩展，以下是简单的扩展。

1、再load方法里增加 orlData属性

 BootstrapTable.prototype.load = function (data) {
        var fixedScroll = false;
        // junlei.shan add
        this.options.orlData = data;
        // junlei.shan end 
        // #431: support pagination
        if (this.options.sidePagination === 'server') {
            this.options.totalRows = data[this.options.totalField];
            fixedScroll = data.fixedScroll;
            data = data[this.options.dataField];
        } else if (!$.isArray(data)) { // support fixedScroll
            fixedScroll = data.fixedScroll;
            data = data.data;
        }
        
        this.initData(data);
        this.initSearch();
        this.initPagination();
        this.initBody(fixedScroll);
    };

由于插件只保存 data.data 的数据，增加的data.footer 没有保存下来，所以需要增加一个 orlData属性，存放后台返回的数据。

2、增加 getOrlData 方法

//junlei.shan add 
    BootstrapTable.prototype.getOrlData = function () {
    	return this.options.orlData;
    };
    //junlei.shan end

增加该方法，用于获取数据。

3、再 resetFooter方法中增加调用 getOrlData()

 BootstrapTable.prototype.resetFooter = function () {
        var that = this,
            data = that.getData(),
            html = [];
        //junlei.shan add
        var orlData = that.getOrlData();
        //junlei.shan end

4、元素初始化的时候根据判断是否执行新的逻辑

// junlei.shan modify
            if(orlData&&orlData.footer){
            	if(column.footerFormatter){
            		html.push(calculateObjectValue(column, column.footerFormatter, [data,rolData.footer],'&nbsp;') || '&nbsp;');
            	}else{
            		html.push(orlData.footer[column.field]);
            	}
            }else{
            	html.push(calculateObjectValue(column, column.footerFormatter, [data], '&nbsp;') || '&nbsp;');
            }
            //junlei.shan modify end

如果原始数据不存在 orlData 就用老的方式，如果存在判断是否需要格式化方法，都不需要直接获取值现实。

总结：

这个方法可以实现后台计算合计列，要求field必须一致，并且footer是个对象不是数组。

如果想支持多个合计列，需要继续扩展。

数据格式如下：

{data:[{
uid: "7791",
name: "keenleung1",
age: "26",
height: "165",
description: "描述"
},
{
uid: "7792",
name: "keenleung2",
age: "26",
height: "165",
description: "描述"
},
{
uid: "7793",
name: "keenleung3",
age: "26",
height: "165",
description: "描述"
},
{
uid: "7794",
name: "keenleung4",
age: "26",
height: "165",
description: "描述"
},
{
uid: "7795",
name: "keenleung5",
age: "26",
height: "165",
description: "描述"
},
],footer:{