Asp.net用javascript为GridView添加列汇总

为GridView添加列汇总的方法可谓是丰富,但是无外乎分两种客户端操作,服务器端操作.

我经常用的是客户端操作,为了方便,文中使用JQuery写代码.

例如我们有这样的数据网格,

现在我们想要在下面加入一汇总行,计算人数,奖金总额.

首先,计算共多少人方法如下:

view sourceprint?

1	function GetPersons()

2

{

3	var total = 0.00;

4	//计算共多少数据行,去除标题行

5	total = $('#GridView1').find('tr').length-1;

6	return total ;

7

}

 

然后我们在计算奖金总额:

view sourceprint?

01	function GetTotal()

02

{

03	var total = 0;

04	$('#GridView1').find('tr').each(function(){

05	//计算位于第三列(奖金)的单元格多的值

06	$(this).find('td:eq(3)').each(function(){

07	vartempVar= $.trim($(this).attr("innerhtml"));

08	if(tempVar){

09	total +=~~tempVar ;

10

}

11

});

12

});

13	return total ;

14

}

 

如果取值的是模板列TextBox(或其他控件),我们可以把

var tempVar= $.trim($(this).attr("innerhtml"));

换成

var tempVar= $(this).find('input').val();

这样就可以取出控件里的数据了.

好了方法写好了,现在我们来为GridView1添加一个汇总行,

view sourceprint?

1	function CreateRow()

2

{

3	varpers = GetPersons();

4	vartotal = GetTotal();

5	$('#GridView1').append("<trstyle='background-color:#B3D9FF;'><td style='color:red;'>共 "+pers+" 人</td><td></td><td></td><td>￥"+total+" </td></tr>");

6

}

 

当然,新添加的行的样式都可以自己定制,而且可以添加多行以满足需求,例如可以再添加一行用了计算平均奖金.

最后我们在页面DOM加载完成的时候调用CreateRow方法.

view sourceprint?

1	$(document).ready(function(){

2	CreateRow();

3

});

 

这样就完成了我们的汇总行的添加.这里主要是操作表格,其实是要解析成表格的控件,或者是表格,我们也可以采取类似的方法来进行操作.