由于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"}
};