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