EasyUi的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>

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

});

1

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