Jquery报表Flexigrid插件扩展—增加汇总行

在做报表时我们总有一种需求就是在最后一行增加汇总信息。通常情况下我们会在数据库做这种工作，但是也有一种需求，就是在客户端执行这种工作。

一般的汇总包括，求和、平均值、最大值、最小值，我们针对以上功能对Flexigrid插件进行扩展。

1.我们在定义报表列中新增属性stats，它有四种值：sum(求和)、avg(平均值)、max(最大值)、min(最小值)：

eg:

　　{ display: '购买数量', name: 'BuyCount', 100 } 修改后 { display: '购买数量', name: 'BuyCount', 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="' + 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="' + cm.width + 'px">' + statsValue + '</div>';
                            else
                                temp.innerHTML = '<div>' + statsValue + '</div>';
                        }
                        $(tr).append(temp);
                    }

                    $(tfoot).append(tr);
                    $(t).prepend(tfoot);
        　　}
　　},

5.实现后效果