如何用javasript对Gridview的项目进行汇总统计？
当我们在gridview显示统计信息时，都会想在gridview最后一行显示【小计】结果，但gridview的话好像比较难搞(至少我也不会呀 囧~)，那么我就结合jquery写了一个解决方案，下面举个例子。
【AttendForCheck.aspx】源码(修改前)：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AttendForCheck.aspx.cs" Inherits="AttendForCheck"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>出勤查詢</title> <link href="css/main.css" type="text/css" /> <style type="text/css"> /*-- 表格樣式 --*/ table.tbinfo{background: #d6e0ef; line-height: 24px;} table.tbinfo th{font-size:12px;background-color:#97CBFF;border-bottom:1px solid #a5ceef; text-align:center;color:#003399;} table.tbinfo td{background: #fff;padding:0px 2px 0px 2px;font-size:12px;width:30px;} table.tbinfo .lt{background: #fafafa;text-align: left; padding:0 4px; width:15%; white-space:nowrap;} table.tbinfo .rt{background: #fff; text-align:right; padding:0 2px;} table.tbinfo .rt:hover{background: #fafafa;} tr.focus td.rt,tr.focus td.lt,tr.focus td{background:#FF9797;} </style> <script src="js/jquery-1.6.js" type="text/javascript"></script> <script src="js/DatePicker/WdatePicker.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div id="keyin">工號:<asp:TextBox ID="txtUserNo" runat="server" Width="60px"></asp:TextBox> 出勤日期 起:<asp:TextBox ID="txtBegTime" runat="server" onclick="WdatePicker({el:$dp.$('time'),readOnly:true,startDate:'%y-%M-%d',dateFmt:'yyyy/MM/dd'})" CssClass="Wdate" Width="90px"></asp:TextBox> 迄:<asp:TextBox ID="txtEndTime" runat="server" onclick="WdatePicker({el:$dp.$('time'),readOnly:true,startDate:'%y-%M-%d',dateFmt:'yyyy/MM/dd'})" CssClass="Wdate" Width="90px"></asp:TextBox> <asp:Button ID="btnSearch" runat="server" Text="查詢" Width="48px" OnClick="btnSearch_Click" /> <input id="btnPrint" type="button" value="打印" style="width:48px" onclick="showPrint();" /> <table id="divPrint"> <tr> <td> <div><div><p align="center">及成企業股份有限公司員工出勤資料表(薪資差異)</p> <p align="center"> <asp:Label ID="lblUserInfo" runat="server"></asp:Label> </p> <asp:GridView CssClass="tbinfo" ID="gvHRInfo" runat="server" AutoGenerateColumns="False" EnableModelValidation="True" BorderWidth="0px" CellSpacing="1"> <Columns> <asp:BoundField DataField="出勤日期" DataFormatString="{0:yyyy-MM-dd}" HeaderText="出勤日期" > <ItemStyle HorizontalAlign="Center" Width="60px" /> </asp:BoundField> <asp:BoundField DataField="上班時間" DataFormatString="{0:HH:mm}" HeaderText="上班時間" > <ItemStyle HorizontalAlign="Right" Width="30px" /> </asp:BoundField> <asp:BoundField DataField="上午下班時間" HeaderText="上午下班時間" > <HeaderStyle Width="42px" /> <ItemStyle HorizontalAlign="Right" Width="42px" /> </asp:BoundField> <asp:BoundField DataField="下午上班時間" HeaderText="下午上班時間" > <HeaderStyle Width="42px" /> <ItemStyle HorizontalAlign="Right" Width="42px" /> </asp:BoundField> <asp:BoundField DataField="下午下班時間" HeaderText="下午下班時間" > <HeaderStyle Width="42px" /> <ItemStyle HorizontalAlign="Right" Width="42px" /> </asp:BoundField> <asp:BoundField DataField="加班上班時間" HeaderText="加班上班時間" > <HeaderStyle Width="42px" /> <ItemStyle HorizontalAlign="Right" Width="42px" /> </asp:BoundField> <asp:BoundField DataField="下班時間" DataFormatString="{0:HH:mm}" HeaderText="下班時間" > <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="班別" HeaderText="班別" > <ItemStyle HorizontalAlign="Center" /> </asp:BoundField> <asp:BoundField DataField="遲到" HeaderText="遲到分鐘" DataFormatString="{0:f1}" > <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="早退" HeaderText="早退分鐘" DataFormatString="{0:f1}" > <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="上班時數" HeaderText="上班時數" DataFormatString="{0:f1}" > <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="總加班時數" HeaderText="加班時數" DataFormatString="{0:f1}" > <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="缺席時數" HeaderText="缺席時數" DataFormatString="{0:f1}" > <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="總請假時數" HeaderText="請假時數" DataFormatString="{0:f1}" > <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="病假" HeaderText="病假時數" DataFormatString="{0:f1}" > <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="事假" HeaderText="事假時數" DataFormatString="{0:f1}" > <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="婚假" HeaderText="婚假時數" DataFormatString="{0:f1}" > <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="產假" HeaderText="產假時數" DataFormatString="{0:f1}" > <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="工商假" HeaderText="工商假時" DataFormatString="{0:f1}" > <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="喪假" HeaderText="喪假時數" DataFormatString="{0:f1}" > <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="公假" HeaderText="公假時數" DataFormatString="{0:f1}" > <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="特假" HeaderText="特假時數" DataFormatString="{0:f1}" > <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="無薪給假" HeaderText="無薪給假" DataFormatString="{0:f1}" > <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="出差" HeaderText="出差時數" DataFormatString="{0:f1}" > <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="曠工" HeaderText="曠工時數" DataFormatString="{0:f1}" > <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="補休" HeaderText="補休時數" DataFormatString="{0:f1}" > <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="平時加班" HeaderText="平時加班" DataFormatString="{0:f1}" > <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="假日加班" HeaderText="假日加班" DataFormatString="{0:f1}" > <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="節日加班" HeaderText="節日加班" DataFormatString="{0:f1}" > <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="狀態" HeaderText="狀態" > <ItemStyle HorizontalAlign="Left" Width="60px" /> </asp:BoundField> <asp:BoundField DataField="第一次休息" HeaderText="第一次休息" Visible="False" /> <asp:BoundField DataField="第二次休息" HeaderText="第二次休息" Visible="False" /> </Columns> </asp:GridView> </div> </div> </td> </tr> </table> </div> </form> </body> </html>
为了能够在gridview的最后一行显示统计信息，于是加入如下的javascript
$(function () { var sumHours = 0, sumCounts = 0, sumNums = 0; var trObj = ""; var begLen = 8; //開始統計第一個<td>的索引值 var sunLen = 21; //連續的需要統計的td總數 var arys = new Array(sunLen); for (var a = 0; a < sunLen; a++) { arys[a] = 0; } //開始匯總計算并將結果存入數組當中 $(".tbinfo tr").each(function (i) { if (i > 0) { for (var j = 0; j < sunLen; j++) { if ($(this).find("td:eq(" + j + begLen + ")").html() != NaN) { //arys[j] += parseFloat($(this).find("td:eq(" + j + begLen + ")").html()); arys[j] += parseFloat($(this).find("td").eq(j + begLen).html()); } } sumCounts++; } }); //拼裝<tr>字符串 trObj = "<tr style='font-size:12px;font-weight:bold;border-bottom:1px solid #a5ceef;color:#003399; '><td style='background-color:#97CBFF;' align='center'>上班天數:</th><td style='background-color:#97CBFF;' align='left' colspan='3'>" + sumCounts + "天</td>"; trObj += "<td style='background-color:#97CBFF;' colspan='3'> </td><td style='background-color:#97CBFF;' align='right'>總計:</td>"; for (var k = 0; k < sunLen; k++) { trObj += "<td style='background-color:#97CBFF;' align='right'>" + Math.round(arys[k] * 10) / 10 + "</td>"; } trObj += "<td style='background-color:#97CBFF;'> </td></tr>"; //在最后一行的<tr>后面插入 $(".tbinfo tr").eq(-1).after(trObj); //最后一步，格式化所有值為0的項 var tbl = $(".tbinfo").html(); tbl = tbl.replaceAll(">0.0<", "> <"); tbl = tbl.replaceAll(">0<", "> <"); $(".tbinfo").html(tbl); }); function showPrint() { $("body").html($("#divPrint").html()); window.print(); } //為系統追加replaceAll方法 String.prototype.replaceAll = function (oldStr, newStr) { return this.replace(new RegExp(oldStr, "gm"), newStr); }
最后的效果如下图所示：
