在做报表时我们总有一种需求就是在最后一行增加汇总信息。通常情况下我们会在数据库做这种工作，但是也有一种需求，就是在客户端执行这种工作。
一般的汇总包括，求和、平均值、最大值、最小值，我们针对以上功能对Flexigrid插件进行扩展。
1.我们在定义报表列中新增属性stats，它有四种值：sum(求和)、avg(平均值)、max(最大值)、min(最小值)：
eg:
{ display: '购买数量', name: 'BuyCount', width: 100 } 修改后 { display: '购买数量', name: 'BuyCount', width: 100, stats: 'sum' }
2.我们在flexigrid2.js的p定义中新增开关，用于控制是否开启汇总功能：
eg:
p = $.extend({
statistics: false, //是否统计 ....
....
onSubmit: false // 调用自定义的计算函数
}, p);
在页面中开启汇总功能： flexigridOption.statistics = true;
3.在addData方法中修改代码：
eg:
if (p.onSuccess) p.onSuccess(); 后新增代码 if (p.statistics) this.addStatistics();
4.增加addStatistics方法如下：
eg:
addStatistics: function () {
if (p.colModel) {
var tfoot = document.createElement('tfoot');
var tr = document.createElement('tr');
for (i = 0; i < p.colModel.length; i++) { //遍历定义的报表列
var cm = p.colModel[i];
var temp = document.createElement('td');
temp.style.background = '#E3E5ED';
if (i == 0 && p.checkbox) { //如果报表存在多选列，汇总行新增一个空列
$(tr).append(temp);
temp = document.createElement('td');
temp.style.background = '#E3E5ED';
}
if (i == 0) { //汇总行第一列显示“汇总：”
if (cm.width)
temp.innerHTML = '<div style="width:' + cm.width + 'px">汇总：</div>';
else
temp.innerHTML = "<div>汇总：</div>";
} else {
var statsValue = 0;
if (cm.stats) { //判断stats的值
switch (cm.stats) {
case "sum": //求和
$(t).find('tbody > tr').find('td:eq(' + i + ')').each(function () {
var value = $(this).text();
if (isNaN(value)) return;
statsValue += parseFloat(value);
});
statsValue = '总和：' + statsValue;
break;
case "avg": //平均值
$(t).find('tbody > tr').find('td:eq(' + i + ')').each(function () {
var value = $(this).text();
if (isNaN(value)) return;
statsValue += parseFloat(value);
});
statsValue = '平均：' + Math.floor((statsValue / $(t).find('tbody > tr').length) * 100) / 100;
break;
case "max": //最大值
$(t).find('tbody > tr').find('td:eq(' + i + ')').each(function () {
var value = $(this).text();
if (isNaN(value)) return;
if (parseFloat(value) > statsValue)
statsValue = parseFloat(value);
});
statsValue = '最大：' + statsValue;
break;
case "min": //最小值
$(t).find('tbody > tr').find('td:eq(' + i + ')').each(function () {
var value = $(this).text();
if (isNaN(value)) return;
if (parseFloat(value) < statsValue)
statsValue = parseFloat(value);
});
statsValue = '最小：' + statsValue;
break;
default:
statsValue = '';
break;
}
} else {
statsValue = '';
}
if (cm.width)
temp.innerHTML = '<div style="width:' + cm.width + 'px">' + statsValue + '</div>';
else
temp.innerHTML = '<div>' + statsValue + '</div>';
}
$(tr).append(temp);
}
$(tfoot).append(tr);
$(t).prepend(tfoot);
}
},
5.实现后效果
