bootstrapTable 扩展后台合计列

由于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],' ') || ' ');
            	}else{
            		html.push(orlData.footer[column.field]);
            	}
            }else{
            	html.push(calculateObjectValue(column, column.footerFormatter, [data], ' ') || ' ');
            }
            //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:{

uid:"合计",

name:"wu",

age:"123",

height:12321421,

description:"ss"}
    };

你可能感兴趣的:(js插件)