EasyUi的DataGrid组件扩展，显示统计当前页信息

// 为datagrid开启统计功能

02	$('#list').datagrid({

03	..... // 此处代码略

04	showFooter : true,

05	onLoadSuccess : function() {

06	$('#list').datagrid('statistics');

07

}

08

});

09	// 统计某列（参照金额列）

10	<table id="list">

11

<thead>

12

<tr>

13	<th field="no" width="100">序号</th>

14	<th field="data" width="100">日期</th>

15	<th field="money" width="100"

16	formatter="formatMoney" align="right"

17	sum="true" avg="true" min="true" max="true" >金额(元)</th>

18	<th field="status" width="60" sortable="true">有效状态</th>

19

</tr>

20

</thead>

21

</table>

2. [图片] 效果演示    

3. [文件] easyui.plugin.js ~ 3KB     下载(160)    

001 $.extend($.fn.datagrid.methods, {
002     statistics: function (jq) {
003         var opt=$(jq).datagrid('options').columns;
004         var rows = $(jq).datagrid("getRows");
005
006         var footer = new Array();
007         footer['sum'] = "";
008         footer['avg'] = "";
009         footer['max'] = "";
010         footer['min'] = "";
011
012         for(var i=0; i<opt[0].length; i++){
013             if(opt[0][i].sum){
014                 footer['sum'] = footer['sum'] + sum(opt[0][i].field)+ ',';
015             }
016             if(opt[0][i].avg){
017                 footer['avg'] = footer['avg'] + avg(opt[0][i].field)+ ',';
018             }
019             if(opt[0][i].max){
020                 footer['max'] = footer['max'] + max(opt[0][i].field)+ ',';
021             }
022             if(opt[0][i].min){
023                 footer['min'] = footer['min'] + min(opt[0][i].field)+ ',';
024             }
025         }
026
027         var footerObj = new Array();
028
029         if(footer['sum'] != ""){
030             var tmp = '{' + footer['sum'].substring(0,footer['sum'].length - 1) + "}";
031             var obj = eval('(' + tmp + ')');
032             if(obj[opt[0][0].field] == undefined){
033                 footer['sum'] += '"' + opt[0][0].field + '":"<b>当页合计:</b>"';
034                 obj = eval('({' + footer['sum'] + '})');
035             }else{
036                 obj[opt[0][0].field] = "<b>当页合计:</b>" + obj[opt[0][0].field];
037             }
038             footerObj.push(obj);
039         }
040
041         if(footer['avg'] != ""){
042             var tmp = '{' + footer['avg'].substring(0,footer['avg'].length - 1) + "}";
043             var obj = eval('(' + tmp + ')');
044             if(obj[opt[0][0].field] == undefined){
045                 footer['avg'] += '"' + opt[0][0].field + '":"<b>当页均值:</b>"';
046                 obj = eval('({' + footer['avg'] + '})');
047             }else{
048                 obj[opt[0][0].field] = "<b>当页均值:</b>" + obj[opt[0][0].field];
049             }
050             footerObj.push(obj);
051         }
052
053         if(footer['max'] != ""){
054             var tmp = '{' + footer['max'].substring(0,footer['max'].length - 1) + "}";
055             var obj = eval('(' + tmp + ')');
056
057             if(obj[opt[0][0].field] == undefined){
058                 footer['max'] += '"' + opt[0][0].field + '":"<b>当页最大值:</b>"';
059                 obj = eval('({' + footer['max'] + '})');
060             }else{
061                 obj[opt[0][0].field] = "<b>当页最大值:</b>" + obj[opt[0][0].field];
062             }
063             footerObj.push(obj);
064         }
065
066         if(footer['min'] != ""){
067             var tmp = '{' + footer['min'].substring(0,footer['min'].length - 1) + "}";
068             var obj = eval('(' + tmp + ')');
069
070             if(obj[opt[0][0].field] == undefined){
071                 footer['min'] += '"' + opt[0][0].field + '":"<b>当页最小值:</b>"';
072                 obj = eval('({' + footer['min'] + '})');
073             }else{
074                 obj[opt[0][0].field] = "<b>当页最小值:</b>" + obj[opt[0][0].field];
075             }
076             footerObj.push(obj);
077         }
078
079
080
081         if(footerObj.length > 0){
082             $(jq).datagrid('reloadFooter',footerObj);
083         }
084
085
086         function sum(filed){
087             var sumNum = 0;
088             for(var i=0;i<rows.length;i++){
089                 sumNum += Number(rows[i][filed]);
090             }
091             return '"' + filed + '":"' + sumNum.toFixed(2) +'"';
092         };
093
094         function avg(filed){
095             var sumNum = 0;
096             for(var i=0;i<rows.length;i++){
097                 sumNum += Number(rows[i][filed]);
098             }
099             return '"' + filed + '":"'+ (sumNum/rows.length).toFixed(2) +'"';
100         }
101
102         function max(filed){
103             var max = 0;
104             for(var i=0;i<rows.length;i++){
105                 if(i==0){
106                     max = Number(rows[i][filed]);
107                 }else{
108                     max = Math.max(max,Number(rows[i][filed]));
109                 }
110             }
111             return '"' + filed + '":"'+ max +'"';
112         }
113
114         function min(filed){
115             var min = 0;
116             for(var i=0;i<rows.length;i++){
117                 if(i==0){
118                     min = Number(rows[i][filed]);
119                 }else{
120                     min = Math.min(min,Number(rows[i][filed]));
121                 }
122             }
123             return '"' + filed + '":"'+ min +'"';
124         }
125     }
126 });

4. [代码]补充说明    

1 使用前需要先导入 easyui.plugin.js 文件，另外需要修改easyui的datagrid组件源码，见下图

5. [图片] 1.jpg    

原文出处：http://www.oschina.net/code/snippet_659525_20039