Ext Grid 的合计行解决

在实际的应用中，我们的用户经常会要求需要在展现数据的网格上，增加合计行这样的功能，Ext.Grid.GridPanel本身并不支持合计行，在EXT的官方论坛上，有一些plugin可以实现合计行的功能。但其解决的个人觉得不太好用，于是，只有自己手动来做了。
首先，我们要搞清楚，grid控件，是与ColumnModel,Store,GridView等对象一起协作地，所以要分析需要从什么地方入手解决问题。经过分析，我们不难看出，要解决我们的合计行，需要从以下几方面入手：
1.改变表格VIEW的header模板，增加我们的合计行元素
2.增加对表格数据的求和计算
3.考虑表格中数据变化时，刷新数据视图的问题
4.修改renderHeader方法，以支持合计行数据的渲染
以下为新增的CSS样式：
.x-grid3-row-sum {
    /*border:1px solid #dddddd;
    background: #efefef url(../images/default/grid/grid3-hrow-sum.gif) repeat-x left top;
    */
    border:1px solid #dddddd;
    background: url(../images/default/grid/grid3-hrow-sum.gif) repeat-x left top;
}

https://p-blog.csdn.net/images/p_blog_csdn_net/ynzhangyao/EntryImages/20081017/grid3-hrow-sum.gif

示例图：
https://p-blog.csdn.net/images/p_blog_csdn_net/ynzhangyao/EntryImages/20081017/ext_grid_sum.JPG

 

1. /*
2.  * Ext JS Library 2.1
3.  * Copyright(c) 2006-2008, Ext JS, LLC.
4.  * [email protected]
5.  * 
6.  * http://extjs.com/license
7.  */
9. /**
10.  * @class Ext.grid.EditorGridPanelEx
11.  * @extends Ext.grid.EditorGridPanel
12.  * @author 张尧伟
13.  * @version 1.0
14.  * 

    此类是为增加合计行而设计的

15.  * 
    
    Usage:
16.  * 

17.      function createPreplanDetailGrid()
18.     {
19.          var preplanDetailStore = new Ext.data.DWRStore({id:'preplanDetailStore',fn:UIPreContractReport.getPreContractDetail,
20.             fields: [
21.                {name: 'bar'},
22.                {name: 'itemName'},
23.                {name: 'storeAmount', type: 'float'},
24.                {name: 'endAmount',type:'float'},
25.                {name: 'currentRate',type:'float'},
26.                {name: 'weekPercent',type:'float'},
27.                {name: 'confirmAmount',type:'float'},
28.                {name: 'accPreAmount',type:'float'},
29.                {name: 'surplusTargetAmount',type:'int'},
30.                {name:'surplusHyearAmount',type:'float'}
31.             ]
32.         });
33.         
34.         var sm = new Ext.grid.CheckboxSelectionModel();
35.         var preplanDetailGrid = new Ext.grid.EditorGridPanelEx({
36.             id:'preplanDetailGrid',
37.             title:'卷烟规格明细',
38.             store: preplanDetailStore,
39.             cm: new Ext.grid.ColumnModelEx({sumheader:true,columns:[
40.                 sm,
41.                 {header: "卷烟条码", width:90,  sortable: true, dataIndex: 'bar',sumcaption:'合计'},
42.                 {header: "卷烟规格",  width:110,sortable: true,  dataIndex: 'itemName'},
43.                 {header: "预计划量",  width:100,sortable: true, dataIndex: 'endAmount',editor:new Ext.form.NumberField(),align:'right',renderer:Util.rmbMoney,issum:true},
44.                 {header: "商业库存",  width:100,sortable: true, dataIndex: 'storeAmount',align:'right',renderer:Util.rmbMoney},
45.                 {header: "到货存销比",  width:100,sortable: true, dataIndex: 'currentRate',align:'right',renderer:Util.rmbMoney},
46.                 {header: "周进度",  width:100,sortable: true, dataIndex: 'weekPercent',align:'right'},
47.                 {header: "商业请求量",  width:100,sortable: true, dataIndex: 'confirmAmount',align:'right',renderer:Util.rmbMoney,issum:true},
48.                 {header: "累计预计划量",  width:100,sortable: true, dataIndex: 'accPreAmount',align:'right',renderer:Util.rmbMoney},
49.                 {header: "剩余指标量",  width:100,sortable: true, dataIndex: 'surplusTargetAmount',align:'right',renderer:Util.rmbMoney,issum:true},
50.                 {header: "剩余协议量",  width:100,sortable: true, dataIndex: 'surplusHyearAmount',align:'right',renderer:Util.rmbMoney,issum:true}
51.             ]}),
52.             sm:sm,
53.             stripeRows: true,
54.             height:Util.getH(0.4),
55.             bbar:[
56.                 {pressed:true,text:'删除',handler:deletePreplanDetail},{xtype:'tbseparator'},
57.                 {pressed:true,text:'保存',handler:saveModified}
58.                 ]
59.         });
60.     
61.         return preplanDetailGrid;
62.     }
63.  
64.  * Notes: 
    
65.  * - Ext.grid.ColumnModel需要增加属性:sumheader:true以指示需要使用合计行
66.  * - Ext.grid.ColumnModel的columns属性中，需要增加sumcaption:'合计'属性，以指示需要显示的合计标题名称
67.  * - Ext.grid.ColumnModel的columns属性中，需要增加issum:true属性，以指示该列需要计算合计
68.  * - Ext.grid.ColumnModel的columns属性中，可选增加sfn:function(sumvalue,colvalue,record){return 计算结果;}，
69.  * 以指示该列需要使用用户自定义函数进行计算sumvalue:此列当前的合计值,colvalue当前计算的列值,record当前记录对象
70.  * 
    
71.  * @constructor
72.  * @param {Object} config The config object
73.  */
75. Ext.grid.GridPanelEx = Ext.extend(Ext.grid.GridPanel, {
76.   getView : function() {
77.         if (!this.view) {
78.             this.view = new Ext.grid.GridViewEx(this.viewConfig);
79.         }
80.         return this.view;
81.     },
82.   initComponent : function() {
83.     if (!this.cm) {
84.         
85.         this.cm = new Ext.grid.ColumnModelEx(this.columns);
86.         this.colModel = this.cm;
87.         delete this.columns;
88.     }
89.     if(!this.groupedHeaders)
90.     {
91.         this.groupedHeaders = this.groupedHeaders;
92.     }
93.     //在编辑完成后，需要更新合计列
94.     //this.on('afteredit',this.onAfteredit,this);
95.     Ext.grid.GridPanelEx.superclass.initComponent.call(this);
96.   },
97.   
98.   getGroupedHeaders : function(){
99.         return this.groupedHeaders;
100.   },
101.   /**
102.    * 处理修改后，更新合计
103.    * @param {} event
104.    * grid - This grid
105.    * record - The record being edited
106.    * field - The field name being edited
107.    * value - The value being set
108.    * originalValue - The original value for the field, before the edit.
109.    * row - The grid row index
110.    * column - The grid column index
111.    */
112.   onAfteredit:function(event){
113.     var grid = event.grid;
114.     var cm = grid.getColumnModel();
115.     if(false == cm.sumheader)
116.     {
117.         return;
118.     }
120.     var value = event.value;
121.     var origValue = event.originalValue;
122.     
123.     cm.config[event.column].sumvalue -= origValue;
124.     cm.config[event.column].sumvalue += value;
125.     grid.getView().updateHeaders();
126.   },
127.   /**
128.    * 重新计算合计列
129.    */
130.   recalculation:function(){
131.     var cm = this.getColumnModel();
132.     if(true != cm.sumheader)
133.     {
134.         return;
135.     }   
136.     var view = this.getView();
137.     view.recalculation(this.getStore());
138.   }
139. });
142. Ext.grid.EditorGridPanelEx = Ext.extend(Ext.grid.EditorGridPanel, {
143.   getView : function() {
144.         if (!this.view) {
145.             this.view = new Ext.grid.GridViewEx(this.viewConfig);
146.         }
147.         return this.view;
148.     },
149.   initComponent : function() {
150.     if (!this.cm) {
151.         
152.         this.cm = new Ext.grid.ColumnModelEx(this.columns);
153.         this.colModel = this.cm;
154.         delete this.columns;
155.     }
156.     if(!this.groupedHeaders)
157.     {
158.         this.groupedHeaders = this.groupedHeaders;
159.     }
160.     //在编辑完成后，需要更新合计列
161.     this.on('afteredit',this.onAfteredit,this);
162.     Ext.grid.EditorGridPanelEx.superclass.initComponent.call(this);
163.   },
164.   
165.   getGroupedHeaders : function(){
166.         return this.groupedHeaders;
167.   },
168.   /**
169.    * 处理修改后，更新合计
170.    * @param {} event
171.    * grid - This grid
172.    * record - The record being edited
173.    * field - The field name being edited
174.    * value - The value being set
175.    * originalValue - The original value for the field, before the edit.
176.    * row - The grid row index
177.    * column - The grid column index
178.    */
179.   onAfteredit:function(event){
180.     var grid = event.grid;
181.     var cm = grid.getColumnModel();
182.     if(false == cm.sumheader)
183.     {
184.         return;
185.     }
187.     var value = event.value;
188.     var origValue = event.originalValue;
189.     
190.     cm.config[event.column].sumvalue -= origValue;
191.     cm.config[event.column].sumvalue += value;
192.     grid.getView().updateHeaders();
193.   },
194.   /**
195.    * 重新计算合计列
196.    */
197.   recalculation:function(){
198.     var cm = this.getColumnModel();
199.     if(true != cm.sumheader)
200.     {
201.         return;
202.     }   
203.     var view = this.getView();
204.     view.recalculation(this.getStore());
205.   }
206. });
208. Ext.grid.GridViewEx = function(config) {
209.     Ext.apply(this, config);
210.     if (!this.templates) this.templates = {};
211.     
212.     
213.     //增加合计行模板
214.     if(!this.templates.header){
215.             this.templates.header = new Ext.Template(
216.                     '',
217.                     '{cells}{sumcells}',
218.                     ""
219.                     );
220.     }
221.     
222.     if(!this.templates.sumcells){
223.             this.templates.sumcells = new Ext.Template(
224.                     '', '',
225.                     '{value}', '', '',
226.                     "

"

                    );

    }

    

    

    Ext.grid.GridViewEx.superclass.constructor.call(this);

};

Ext.extend(Ext.grid.GridViewEx, Ext.grid.GridView, {

    

    insertRows : function(ds, firstRow, lastRow, isUpdate){

        if(!isUpdate && firstRow === 0 && lastRow == ds.getCount()-1){

            this.refresh();

        }else{

            if(!isUpdate){

                this.fireEvent("beforerowsinserted", this, firstRow, lastRow);

            }

            var html = this.renderRows(firstRow, lastRow);

            var before = this.getRow(firstRow);

            if(before){

                Ext.DomHelper.insertHtml('beforeBegin', before, html);

            }else{

                Ext.DomHelper.insertHtml('beforeEnd', this.mainBody.dom, html);

            }

            if(!isUpdate){

                this.fireEvent("rowsinserted", this, firstRow, lastRow);

                this.processRows(firstRow);

            }

        }

    },

    onUpdate : function(ds, record){

        this.refreshRow(record);

    },

        // private

    refreshRow : function(record){

        var ds = this.ds, index;

        if(typeof record == 'number'){

            index = record;

            record = ds.getAt(index);

        }else{

            index = ds.indexOf(record);

        }

        var cls = [];

        this.insertRows(ds, index, index, true);

        this.getRow(index).rowIndex = index;

        this.onRemove(ds, record, index+1, true);

        this.fireEvent("rowupdated", this, index, record);

        /*

        if(true == record.dirty && true == this.cm.sumheader){

            var cm = this.cm;

            var colCount =  cm.getColumnCount();

            for(var i=0; i

            {

                var c = cm.config[i];

                if( true == c.issum && typeof record.modified[c.dataIndex] !== 'undefined'){

                    var value = record.get(c.dataIndex);

                    var origValue = record.modified[c.dataIndex];

                    if(origValue){

                        cm.config[i].sumvalue -= origValue;

                        cm.config[i].sumvalue += value;

                    }

                }

            }

            this.updateHeaders();

        }*/

    },

    onRemove : function(ds, record, index, isUpdate){

        if(isUpdate !== true){

            this.fireEvent("beforerowremoved", this, index, record);

        }

        this.removeRow(index);

        if(isUpdate !== true){

            this.processRows(index);

            this.applyEmptyText();

            this.fireEvent("rowremoved", this, index, record);

            

            //处理删除行时的合计行问题

            this.processSumForRemoved(ds,record,index);

        }

    },

    

    //Template has changed and we need a few other pointers to keep track

    doRender : function(cs, rs, ds, startRow, colCount, stripe){

        var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1;

        var tstyle = 'width:'+this.getTotalWidth()+';';

        // buffers

        var buf = [], cb, c, p = {}, rp = {tstyle: tstyle}, r;

        //如果不是在编辑状态下，则需要将合计列的数据清0        

        if(false == rs[0].dirty && true ==(rs.length == ds.getCount())){

            this.clearSumZero();

        }

        for(var j = 0, len = rs.length; j < len; j++){

            r = rs[j]; cb = [];

            var rowIndex = (j+startRow);

            for(var i = 0; i < colCount; i++){

                c = cs[i];

                p.id = c.id;

                p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');

                p.attr = p.cellAttr = "";

                p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);

                p.style = c.style;

                if(p.value == undefined || p.value === "") p.value = " ";

                if(r.dirty && typeof r.modified[c.name] !== 'undefined'){

                    p.css += ' x-grid3-dirty-cell';

                }

                cb[cb.length] = ct.apply(p);

                

                //处理求和问题

                if(true == this.cm.sumheader)

                {

                    if(true == this.cm.config[i].issum && false == r.dirty)

                    {//如果是求和列且不为脏数据

                        if(!this.cm.config[i].sumvalue){

                                this.cm.config[i].sumvalue = 0.0;

                        }

                        if(this.cm.config[i].sfn)

                        {//如果存在求和函数，则调用

                            this.cm.config[i].sumvalue = this.cm.config[i].sfn(this.cm.config[i].sumvalue,r.get(c.name),r);

                        }

                        else

                        {//否则，直接累计

                            if(r.data[c.name]){

                                this.cm.config[i].sumvalue += r.data[c.name];

                            }

                        }

                    }

                }

                

            }

            var alt = [];

            if(stripe && ((rowIndex+1) % 2 == 0)){

                alt[0] = "x-grid3-row-alt";

            }

            if(r.dirty){

                alt[1] = " x-grid3-dirty-row";

            }

            rp.cols = colCount;

            if(this.getRowClass){

                alt[2] = this.getRowClass(r, rowIndex, rp, ds);

            }

            rp.alt = alt.join(" ");

            rp.cells = cb.join("");

            buf[buf.length] =  rt.apply(rp);

        }

        

        //如果有合计行，则需要重新渲染表头

        if(true == this.cm.sumheader)

        {

            this.updateHeaders();

        }

        return buf.join("");

    },

     /**

     * 将求和的列清0

     */

    clearSumZero:function(){

        this.hasSumColumn = false;

        var cm = this.cm;

        for(var i=0; i

        {

            if(cm.config[i].issum)

            {

                this.hasSumColumn = true;

                this.cm.config[i].sumvalue = 0.0;

            }

        }

    },

    renderHeaders : function(){

        var cm = this.cm, ts = this.templates;

        var ct = ts.hcell;

        var cb = [], sb = [],lb = [], lsb = [], p = {};

        for(var i = 0, len = cm.getColumnCount(); i < len; i++){

            p.id = cm.getColumnId(i);

            p.value = cm.getColumnHeader(i) || "";

            p.style = this.getColumnStyle(i, true);

            p.tooltip = this.getColumnTooltip(i);

            if(cm.config[i].align == 'right'){

                p.istyle = 'padding-right:16px';

            } else {

                delete p.istyle;

            }

            cb[cb.length] = ct.apply(p);

        }

        

        //处理合计行表头

        if(true == cm.sumheader)

        {

            sb = this.buildSumHeaders(cm,ts);

        }

        

        return ts.header.apply({cells: cb.join(""), sumcells: sb.join(""),tstyle:'width:'+this.getTotalWidth()+';'});

        

        //return [ts.header.apply({cells: cb.join(""), sumcells: sb.join(""), tstyle:'width:'+(tw-lw)+';'}),

        //ts.header.apply({cells: lb.join(""), sumcells: lsb.join(""), tstyle:'width:'+(lw)+';'})];

        

        //return ts.header.apply({cells: cb.join(""), tstyle:'width:'+this.getTotalWidth()+';'});

    },

    

    

    /**

     * 生成合计表头

     * @param {} cm

     * @param {} ts

     * @param {} tw

     * @param {} lw

     * @return {}array

     */

    buildSumHeaders:function(cm,ts){

        var ct = ts.hcell;

        var sb = [], sp = {};

        for (var i = 0, len = cm.getColumnCount(); i < len; i++) {

            sp.id = 'sum' + cm.getColumnId(i);

            if(cm.config[i].sumcaption){

                sp.value = cm.config[i].sumcaption;

            }else{

                sp.value = " ";

            }

            

            //cm.config[i].sumcaption = " ";

            if (true == cm.config[i].issum && typeof cm.config[i].sumvalue == 'number'){

                if(cm.config[i].renderer)

                {

                    sp.value = cm.config[i].renderer(cm.config[i].sumvalue);

                }else{

                    sp.value = cm.config[i].sumvalue;

                }

            }

            

            

            sp.style = this.getColumnStyle(i, false);

            sp.tooltip = this.getColumnTooltip(i);

            

            if (cm.config[i].align == 'right') {

                sp.istyle = 'padding-right:16px';

            }

             sb[sb.length] = ct.apply(sp);

        }

        return sb;

    },

    /**

     * 处理删除行时，更新合计行的数据

     * @param {} ds

     * @param {} record

     * @param {} index

     */

    processSumForRemoved: function(ds,record,index){

        var cm = this.cm;

        if(true != cm.sumheader){

            return;

        }

        

        var cfg = cm.config;

        for(var i=0; i

            if(true == cfg[i].issum && cfg[i].sumvalue){

                var val = record.get(cfg[i].dataIndex);

                if(val){

                    cfg[i].sumvalue -= val;

                }

            }

        }

        this.updateHeaders();

    },

    /**

     * 重新计算合计列

     */

    recalculation:function(ds){

        

        this.clearSumZero();

        if(true != this.hasSumColumn){

            return;

        }

        var colCount = this.cm.getColumnCount();

        var records = ds.getRange();

        for(var k=0; k

            record = records[k];

            for(var i=0; i<this.cm.config.length; ++i){

                if(true == this.cm.config[i].issum){

                    var val = record.get(this.cm.config[i].dataIndex);

                    if(typeof val == 'number'){

                        this.cm.config[i].sumvalue += val;

                    }

                }

            }

        };

        

        this.updateHeaders();

        

    }

    

});

Ext.grid.ColumnModelEx = function(config) {

    

    Ext.grid.ColumnModelEx.superclass.constructor.call(this, config);

    //alert('config.groupedHeaders ' + config.groupedHeaders);

    //this.groupedHeaders = config.groupedHeaders;

    

};

Ext.extend(Ext.grid.ColumnModelEx, Ext.grid.ColumnModel, {

    /**

     * Returns true if the specified column menu is disabled.

     * @param {Number} col The column index

     * @return {Boolean}

     */

    isMenuDisabled : function(col){

        if(-1 == col){

            return true;

        }else{

            return !!this.config[col].menuDisabled;

        }

    }

});

Ext.reg('gridex', Ext.grid.GridPanelEx);

Ext.reg('editorgridex', Ext.grid.EditorGridPanelEx);