Asp.net中用javascript為GridView添加合計列

為GridView添加列匯總的方法可謂是豐富,但是無外乎分兩種用戶端操作,伺服器端操作.

我經常用的是用戶端操作,為了方便,文中使用JQuery寫代碼. 

例如我們有這樣的資料格,

現在我們想要在下面加入一合計列,計算人數,獎金總額.

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

function GetPersons()<br />{<br /> var total = 0.00;<br /> //計算共多少資料行,去除標題列<br /> total = $('#GridView1').find('tr').length-1;<br /> return total ;<br />}

然後我們在計算獎金總額:

function GetTotal()<br /> {<br /> var total = 0;<br /> $('#GridView1').find('tr').each(function(){<br /> //計算位於第三列(獎金)的儲存格多的值<br /> $(this).find('td:eq(3)').each(function(){<br /> var tempVar= $.trim($(this).attr("innerhtml"));<br /> if(tempVar){<br /> total += ~~tempVar ;<br /> }<br /> });<br /> });<br /> return total ;<br /> }

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

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

換成

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

這樣就可以取出控制項裡的資料了. 

好了方法寫好了,現在我們來為GridView1添加一個合計列,

function CreateRow()<br /> {<br /> var pers = GetPersons();<br /> var total = GetTotal();<br /> $('#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>");<br /> }

當然,新添加的行的樣式都可以自己定製,而且可以添加多行以滿足需求,例如可以再添加一行用了計算平均獎金. 

最後我們在頁面DOM載入完成的時候調用CreateRow方法.

$(document).ready(function(){<br /> CreateRow();<br /> });

這樣就完成了我們的合計列的添加.這裡主要是動作表格,其實是要解析成表格的控制項,或者是表格,我們也可以採取類似的方法來進行操作.