当我们在gridview显示统计信息时，都会想在gridview最后一行显示【小计】结果，但gridview的话好像比较难搞(至少我也不会呀 囧~)，那么我就结合jquery写了一个解决方案，下面举个例子。

【AttendForCheck.aspx】源码(修改前)：

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AttendForCheck.aspx.cs" Inherits="AttendForCheck"%>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  8.     <title>出勤查詢</title>
  9.     <link href="css/main.css" type="text/css" />
  10.     <style type="text/css">
  11.         /*-- 表格樣式 --*/
  12.         table.tbinfo{background: #d6e0ef; line-height: 24px;}
  13.         table.tbinfo th{font-size:12px;background-color:#97CBFF;border-bottom:1px solid #a5ceef; text-align:center;color:#;}
  14.         table.tbinfo td{background: #fff;padding:0px 2px 0px 2px;font-size:12px;width:30px;}
  15.         table.tbinfo .lt{background: #fafafa;text-align: left; padding: 4px; width:%; white-space:nowrap;}
  16.         table.tbinfo .rt{background: #fff; text-align:right; padding: 2px;}
  17.         table.tbinfo .rt:hover{background: #fafafa;}
  18.         tr.focus td.rt,tr.focus td.lt,tr.focus td{background:#FF9797;}
  19.  
  20.     </style>
  21.     <script src="js/jquery-1.6.js" type="text/javascript"></script>
  22.     <script src="js/DatePicker/WdatePicker.js" type="text/javascript"></script>
  23.     </head>
  24. <body>
  25.     <form id="form1" runat="server">
  26.         <div id="keyin">工號:<asp:TextBox ID="txtUserNo" runat="server" Width="60px"></asp:TextBox>
  27. &nbsp;出勤日期 起:<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>
  28. &nbsp;迄:<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>
  29. &nbsp;<asp:Button ID="btnSearch" runat="server" Text="查詢" Width="48px" OnClick="btnSearch_Click" />
  30. &nbsp;<input id="btnPrint" type="button" value="打印" style="width:48px" onclick="showPrint();" />
  31.             <table id="divPrint">
  32.                 <tr>
  33.                     <td>
  34.                         <div><div><p align="center">及成企業股份有限公司員工出勤資料表(薪資差異)</p>
  35.                             <p align="center">
  36.                                 <asp:Label ID="lblUserInfo" runat="server"></asp:Label>
  37.                             </p>
  38.                             <asp:GridView CssClass="tbinfo" ID="gvHRInfo" runat="server" AutoGenerateColumns="False" EnableModelValidation="True" BorderWidth="0px" CellSpacing="">
  39.                                 <Columns>
  40.                                     <asp:BoundField DataField="出勤日期" DataFormatString="{0:yyyy-MM-dd}" HeaderText="出勤日期" >
  41.                                     <ItemStyle HorizontalAlign="Center" Width="60px" />
  42.                                     </asp:BoundField>
  43.                                     <asp:BoundField DataField="上班時間" DataFormatString="{0:HH:mm}" HeaderText="上班時間" >
  44.                                     <ItemStyle HorizontalAlign="Right" Width="30px" />
  45.                                     </asp:BoundField>
  46.                                     <asp:BoundField DataField="上午下班時間" HeaderText="上午下班時間" >
  47.                                     <HeaderStyle Width="42px" />
  48.                                     <ItemStyle HorizontalAlign="Right" Width="42px" />
  49.                                     </asp:BoundField>
  50.                                     <asp:BoundField DataField="下午上班時間" HeaderText="下午上班時間" >
  51.                                     <HeaderStyle Width="42px" />
  52.                                     <ItemStyle HorizontalAlign="Right" Width="42px" />
  53.                                     </asp:BoundField>
  54.                                     <asp:BoundField DataField="下午下班時間" HeaderText="下午下班時間" >
  55.                                     <HeaderStyle Width="42px" />
  56.                                     <ItemStyle HorizontalAlign="Right" Width="42px" />
  57.                                     </asp:BoundField>
  58.                                     <asp:BoundField DataField="加班上班時間" HeaderText="加班上班時間" >
  59.                                     <HeaderStyle Width="42px" />
  60.                                     <ItemStyle HorizontalAlign="Right" Width="42px" />
  61.                                     </asp:BoundField>
  62.                                     <asp:BoundField DataField="下班時間" DataFormatString="{0:HH:mm}" HeaderText="下班時間" >
  63.                                     <ItemStyle HorizontalAlign="Right" />
  64.                                     </asp:BoundField>
  65.                                     <asp:BoundField DataField="班別" HeaderText="班別" >
  66.                                     <ItemStyle HorizontalAlign="Center" />
  67.                                     </asp:BoundField>
  68.                                     <asp:BoundField DataField="遲到" HeaderText="遲到分鐘" DataFormatString="{0:f1}" >
  69.                                     <ItemStyle HorizontalAlign="Right" />
  70.                                     </asp:BoundField>
  71.                                     <asp:BoundField DataField="早退" HeaderText="早退分鐘" DataFormatString="{0:f1}" >
  72.                                     <ItemStyle HorizontalAlign="Right" />
  73.                                     </asp:BoundField>
  74.                                     <asp:BoundField DataField="上班時數" HeaderText="上班時數" DataFormatString="{0:f1}" >
  75.                                     <ItemStyle HorizontalAlign="Right" />
  76.                                     </asp:BoundField>
  77.                                     <asp:BoundField DataField="總加班時數" HeaderText="加班時數" DataFormatString="{0:f1}" >
  78.                                     <ItemStyle HorizontalAlign="Right" />
  79.                                     </asp:BoundField>
  80.                                     <asp:BoundField DataField="缺席時數" HeaderText="缺席時數" DataFormatString="{0:f1}" >
  81.                                     <ItemStyle HorizontalAlign="Right" />
  82.                                     </asp:BoundField>
  83.                                     <asp:BoundField DataField="總請假時數" HeaderText="請假時數" DataFormatString="{0:f1}" >
  84.                                     <ItemStyle HorizontalAlign="Right" />
  85.                                     </asp:BoundField>
  86.                                     <asp:BoundField DataField="病假" HeaderText="病假時數" DataFormatString="{0:f1}" >
  87.                                     <ItemStyle HorizontalAlign="Right" />
  88.                                     </asp:BoundField>
  89.                                     <asp:BoundField DataField="事假" HeaderText="事假時數" DataFormatString="{0:f1}" >
  90.                                     <ItemStyle HorizontalAlign="Right" />
  91.                                     </asp:BoundField>
  92.                                     <asp:BoundField DataField="婚假" HeaderText="婚假時數" DataFormatString="{0:f1}" >
  93.                                     <ItemStyle HorizontalAlign="Right" />
  94.                                     </asp:BoundField>
  95.                                     <asp:BoundField DataField="產假" HeaderText="產假時數" DataFormatString="{0:f1}" >
  96.                                     <ItemStyle HorizontalAlign="Right" />
  97.                                     </asp:BoundField>
  98.                                     <asp:BoundField DataField="工商假" HeaderText="工商假時" DataFormatString="{0:f1}" >
  99.                                     <ItemStyle HorizontalAlign="Right" />
  100.                                     </asp:BoundField>
  101.                                     <asp:BoundField DataField="喪假" HeaderText="喪假時數" DataFormatString="{0:f1}" >
  102.                                     <ItemStyle HorizontalAlign="Right" />
  103.                                     </asp:BoundField>
  104.                                     <asp:BoundField DataField="公假" HeaderText="公假時數" DataFormatString="{0:f1}" >
  105.                                     <ItemStyle HorizontalAlign="Right" />
  106.                                     </asp:BoundField>
  107.                                     <asp:BoundField DataField="特假" HeaderText="特假時數" DataFormatString="{0:f1}" >
  108.                                     <ItemStyle HorizontalAlign="Right" />
  109.                                     </asp:BoundField>
  110.                                     <asp:BoundField DataField="無薪給假" HeaderText="無薪給假" DataFormatString="{0:f1}" >
  111.                                     <ItemStyle HorizontalAlign="Right" />
  112.                                     </asp:BoundField>
  113.                                     <asp:BoundField DataField="出差" HeaderText="出差時數" DataFormatString="{0:f1}" >
  114.                                     <ItemStyle HorizontalAlign="Right" />
  115.                                     </asp:BoundField>
  116.                                     <asp:BoundField DataField="曠工" HeaderText="曠工時數" DataFormatString="{0:f1}" >
  117.                                     <ItemStyle HorizontalAlign="Right" />
  118.                                     </asp:BoundField>
  119.                                     <asp:BoundField DataField="補休" HeaderText="補休時數" DataFormatString="{0:f1}" >
  120.                                     <ItemStyle HorizontalAlign="Right" />
  121.                                     </asp:BoundField>
  122.                                     <asp:BoundField DataField="平時加班" HeaderText="平時加班" DataFormatString="{0:f1}" >
  123.                                     <ItemStyle HorizontalAlign="Right" />
  124.                                     </asp:BoundField>
  125.                                     <asp:BoundField DataField="假日加班" HeaderText="假日加班" DataFormatString="{0:f1}" >
  126.                                     <ItemStyle HorizontalAlign="Right" />
  127.                                     </asp:BoundField>
  128.                                     <asp:BoundField DataField="節日加班" HeaderText="節日加班" DataFormatString="{0:f1}" >
  129.                                     <ItemStyle HorizontalAlign="Right" />
  130.                                     </asp:BoundField>
  131.                                     <asp:BoundField DataField="狀態" HeaderText="狀態" >
  132.                                     <ItemStyle HorizontalAlign="Left" Width="60px" />
  133.                                     </asp:BoundField>
  134.                                     <asp:BoundField DataField="第一次休息" HeaderText="第一次休息" Visible="False" />
  135.                                     <asp:BoundField DataField="第二次休息" HeaderText="第二次休息" Visible="False" />
  136.                                 </Columns>
  137.                             </asp:GridView>
  138.                             </div>
  139.                         </div>
  140.                     </td>
  141.                 </tr>
  142.             </table>
  143.         </div>
  144.     </form>
  145. </body>
  146. </html>

为了能够在gridview的最后一行显示统计信息，于是加入如下的javascript

  1.     $(function () {
  2.         var sumHours = 0, sumCounts = 0, sumNums = 0;
  3.         var trObj = "";
  4.  
  5.         var begLen = 8;     //開始統計第一個<td>的索引值
  6.         var sunLen = 21;    //連續的需要統計的td總數
  7.         var arys = new Array(sunLen);
  8.  
  9.         for (var a = 0; a < sunLen; a++) {
  10.             arys[a] = 0;
  11.         }
  12.  
  13.         //開始匯總計算并將結果存入數組當中
  14.         $(".tbinfo tr").each(function (i) {
  15.             if (i > 0) {
  16.                 for (var j = 0; j < sunLen; j++) {
  17.                     if ($(this).find("td:eq(" + j + begLen + ")").html() != NaN) {
  18.                         //arys[j] += parseFloat($(this).find("td:eq(" + j + begLen + ")").html());
  19.                         arys[j] += parseFloat($(this).find("td").eq(j + begLen).html());
  20.                     }
  21.                 }
  22.                 sumCounts++;
  23.             }
  24.         });
  25.  
  26.         //拼裝<tr>字符串
  27.         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>";
  28.         trObj += "<td style='background-color:#97CBFF;' colspan='3'>&nbsp;</td><td style='background-color:#97CBFF;' align='right'>總計:</td>";
  29.         for (var k = 0; k < sunLen; k++) {
  30.             trObj += "<td style='background-color:#97CBFF;' align='right'>" + Math.round(arys[k] * 10) / 10 + "</td>";
  31.         }
  32.         trObj += "<td style='background-color:#97CBFF;'>&nbsp;</td></tr>";
  33.  
  34.         //在最后一行的<tr>后面插入
  35.         $(".tbinfo tr").eq(-1).after(trObj);
  36.  
  37.         //最后一步，格式化所有值為0的項
  38.         var tbl = $(".tbinfo").html();
  39.         tbl = tbl.replaceAll(">0.0<", ">&nbsp;<");
  40.         tbl = tbl.replaceAll(">0<", ">&nbsp;<");
  41.         $(".tbinfo").html(tbl);
  42.     });
  43.  
  44.     function showPrint() {
  45.         $("body").html($("#divPrint").html());
  46.         window.print();
  47.     }
  48.  
  49.     //為系統追加replaceAll方法
  50.     String.prototype.replaceAll = function (oldStr, newStr) {
  51.         return this.replace(new RegExp(oldStr, "gm"), newStr);
  52.     }

最后的效果如下图所示：

如何用javasript对Gridview的项目进行汇总统计？的更多相关文章

  1. 如何用C#对Gridview的项目进行汇总统计？

    上一次用了javascript对gridview进行了汇总统计,但那个统计是在客户端进行的,虽然减轻了服务器的负担,但是,当需要把统计信息汇出excel时,汇总信息却死活不出来了,所以,绕半天又绕回来 ...

  2. 如何用ABP框架快速完成项目(面向项目交付编程面向客户编程篇)(1) - 目录

    昨天发表了<如何用ABP框架快速完成项目 - 自动化测试 - 前端angular e2e protractor>后,大家十分热情,几个小时内就收到了不少问题,包括: 对于ui自动化测试这方 ...

  3. 如何用ABP框架快速完成项目 - 自动化测试 - 前端angular e2e protractor

    要想快速完成一个项目, 自动化是很关键很有用的一块. 自动化测试比人工测试快很多. 特别是在回归测试中. 实践证明, 虽然投入了时间在写自动化测试代码上, 但是在回归测试中节省了大量的时间,同时及时发 ...

  4. 如何用ABP框架快速完成项目(4) - 如何正确使用ABP?

    正如我在<如何用ABP框架快速完成项目(2) - 快的定义!>提到的, 很多同学在使用ABP中遇到很多问题, 花了很多时间和精力, 然而从最根本的角度和方向上来看这些问题应该是不存在. 这 ...

  5. 如何用ABP框架快速完成项目(8) - 用ABP一个人快速完成项目(4) - 能自动化就不要手动 - 使用自动化测试(BDD/TDD)

    做为一个程序员, 深深知道计算机自动化的速度是比人手动的速度快的, 所以”快速”完成项目的一个重要武器就是: 能自动化就不要手动.   BDD/TDD有很多优势, 其中之一就是自动化, 我们这节文章先 ...

  6. 如何用ABP框架快速完成项目(11) - ABP只要加人即可马上加快项目进展- 全栈篇(2) - 不推荐模块组件化, 推荐微服务

    一个人写代码不需要担心会和别人的代码冲突, 不需要做代码合并, 不需要担心自己的代码被覆盖. 但是多个人一起写代码就需要担心这些问题.   解决这些问题的方法很多, 比如用AzureDevOps(TF ...

  7. Cordova之如何用命令行创建一个项目（完整示例）

    原文:Cordova之如何用命令行创建一个项目(完整示例) 1. 创建cordova项目 (注意:当第一次创建或编译项目的时候,可能系统会自动下载一些东西,需要一些时间.) 在某个目录下创建cordo ...

  8. GitHub上史上最全的Android开源项目分类汇总 (转)

    GitHub上史上最全的Android开源项目分类汇总 标签: github android 开源 | 发表时间:2014-11-23 23:00 | 作者:u013149325 分享到: 出处:ht ...

  9. GitHub上史上最全的Android开源项目分类汇总

    今天在看博客的时候,无意中发现了 @Trinea 在GitHub上的一个项目 Android开源项目分类汇总 ,由于类容太多了,我没有一个个完整地看完,但是里面介绍的开源项目都非常有参考价值,包括很炫 ...

随机推荐

  1. 流畅的python和cookbook学习笔记（二）

    1.元组拆包和解压序列赋值 任何的序列 (或者是可迭代对象) 可以通过一个简单的赋值语句解压并赋值给多个 变量.唯一的前提就是变量的数量必须跟序列元素的数量是一样的. 1.平行赋值: >> ...

  2. Nginx 504错误总结

    Nginx 504错误(Gateway time-out  网关超时)的含义是所请求的网关没有请求到,简单来说就是没有请求到可以执行的PHP-CGI. 一般看来, 这种情况可能是由于nginx默认的f ...

  3. 八 SocketChannel

    SocketChannel是一个连接到Tcp网络套接字的通道.可以通过以下两种方式创建SocketChannel: 1.打开一个SocketChannel并连接到互联网上的某台服务器. 2.一个新连接 ...

  4. 使用模块化工具打包自己开发的JS库(webpack/rollup)对比总结

    打包JS库demo项目地址:https://github.com/BothEyes1993/bes-jstools 背景 最近有个需求,需要为小程序写一个SDK,监控小程序的后台接口调用和页面报错(类 ...

  5. 监听css3的animation动画和transition事件

    webkit-animation动画有三个事件: 开始事件: webkitAnimationStart 结束事件: webkitAnimationEnd 重复运动事件: webkitAnimation ...

  6. ES6中的import()函数

    import(specifier) 上面代码中,import函数的参数specifier,指定所要加载的模块的位置.import命令能够接受什么参数,import()函数就能接受什么参数,两者区别主要 ...

  7. [ZOJ3316]：Game

    题面 vjudge Sol 有一个棋盘,棋盘上有一些棋子,两个人轮流拿棋,第一个人可以随意拿,以后每一个人拿走的棋子与上一个人拿走的棋子的曼哈顿距离不得超过L,无法拿棋的人输,问后手能否胜利 首先距离 ...

  8. c# 利用反射 从json字符串 动态创建类的实例 并动态为实例成员赋值

    转自 http://hi.baidu.com/wjinbd/item/c54d43d998beb33be3108fdd 1 创建自己要用的类 class stu { string _name; int ...

  9. c++ 读写结构体到文件

    可以使用fwrite()将一个结构体写入文件:  fwrite(&some_struct,sizeof somestruct,1,fp);对应的fread函数可以再把它读出来,此处fwrite ...

  10. react-native 在Xcode上传到iTunes Connect里报错

    在xcode里面点击“upload to app store”的时候,提示“the session's status is FAILED and the error description is 'C ...