Asp.net中用javascript为GridView添加汇总行

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

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

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

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

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

function GetPersons() { var total = 0.00; //计算共多少数据行,去除标题行 total = $('#GridView1').find('tr').length-1; return total ; }

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

function GetTotal() { var total = 0; $('#GridView1').find('tr').each(function(){ //计算位于第三列(奖金)的单元格多的值 $(this).find('td:eq(3)').each(function(){ var tempVar= $.trim($(this).attr("innerhtml")); if(tempVar){ total += ~~tempVar ; } }); }); return total ; }

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

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

换成

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

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

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

function CreateRow() { var pers = GetPersons(); var total = GetTotal(); $('#GridView1').append("<tr style="background-color:#B3D9FF;" mce_style="background-color:#B3D9FF;"><td style="color:red;" mce_style="color:red;">共 "+pers+" 人</td><td></td><td></td><td>￥"+total+" </td></tr>"); }

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

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

$(document).ready(function(){ CreateRow(); });

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