如何用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:#;}
table.tbinfo td{background: #fff;padding:0px 2px 0px 2px;font-size:12px;width:30px;}
table.tbinfo .lt{background: #fafafa;text-align: left; padding: 4px; width:%; white-space:nowrap;}
table.tbinfo .rt{background: #fff; text-align:right; padding: 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="">
<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);
}
最后的效果如下图所示：
如何用javasript对Gridview的项目进行汇总统计？的更多相关文章
- 如何用C#对Gridview的项目进行汇总统计？
上一次用了javascript对gridview进行了汇总统计,但那个统计是在客户端进行的,虽然减轻了服务器的负担,但是,当需要把统计信息汇出excel时,汇总信息却死活不出来了,所以,绕半天又绕回来 ...
- 如何用ABP框架快速完成项目(面向项目交付编程面向客户编程篇)(1) - 目录
昨天发表了<如何用ABP框架快速完成项目 - 自动化测试 - 前端angular e2e protractor>后,大家十分热情,几个小时内就收到了不少问题,包括: 对于ui自动化测试这方 ...
- 如何用ABP框架快速完成项目 - 自动化测试 - 前端angular e2e protractor
要想快速完成一个项目, 自动化是很关键很有用的一块. 自动化测试比人工测试快很多. 特别是在回归测试中. 实践证明, 虽然投入了时间在写自动化测试代码上, 但是在回归测试中节省了大量的时间,同时及时发 ...
- 如何用ABP框架快速完成项目(4) - 如何正确使用ABP?
正如我在<如何用ABP框架快速完成项目(2) - 快的定义!>提到的, 很多同学在使用ABP中遇到很多问题, 花了很多时间和精力, 然而从最根本的角度和方向上来看这些问题应该是不存在. 这 ...
- 如何用ABP框架快速完成项目(8) - 用ABP一个人快速完成项目(4) - 能自动化就不要手动 - 使用自动化测试(BDD/TDD)
做为一个程序员, 深深知道计算机自动化的速度是比人手动的速度快的, 所以”快速”完成项目的一个重要武器就是: 能自动化就不要手动. BDD/TDD有很多优势, 其中之一就是自动化, 我们这节文章先 ...
- 如何用ABP框架快速完成项目(11) - ABP只要加人即可马上加快项目进展- 全栈篇(2) - 不推荐模块组件化, 推荐微服务
一个人写代码不需要担心会和别人的代码冲突, 不需要做代码合并, 不需要担心自己的代码被覆盖. 但是多个人一起写代码就需要担心这些问题. 解决这些问题的方法很多, 比如用AzureDevOps(TF ...
- Cordova之如何用命令行创建一个项目（完整示例）
原文:Cordova之如何用命令行创建一个项目(完整示例) 1. 创建cordova项目 (注意:当第一次创建或编译项目的时候,可能系统会自动下载一些东西,需要一些时间.) 在某个目录下创建cordo ...
- GitHub上史上最全的Android开源项目分类汇总 (转)
GitHub上史上最全的Android开源项目分类汇总 标签: github android 开源 | 发表时间:2014-11-23 23:00 | 作者:u013149325 分享到: 出处:ht ...
- GitHub上史上最全的Android开源项目分类汇总
今天在看博客的时候,无意中发现了 @Trinea 在GitHub上的一个项目 Android开源项目分类汇总 ,由于类容太多了,我没有一个个完整地看完,但是里面介绍的开源项目都非常有参考价值,包括很炫 ...
随机推荐
- Rabbit主题交换机
主题交换机类型为:topic. 是直连交换机的一种.只是比直连交换机更灵活,在路由键上引入了通配符的概念 topic交换机支持通配符的路由键. *表示匹配一个词. #匹配所有 生产者 : packag ...
- Activiti工作流小序曲
一般涉及到OA.ERP等公司办公系统都必须有一套办公流程,这时候使用activiti工作流框架会大大减轻我们的工作量,提高我们的开发效率. Activiti工作流简单介绍: 工作流(workflow) ...
- Error:java.util.concurrent.ExecutionException: com.android.tools.aapt2.Aapt2Exception: AAPT2 error: check logs for details
环境 Android Studio 3.0 升级&导入项目 错误 Error:java.util.concurrent.ExecutionException: com.android.tool ...
- zoj 3524(拓扑排序+多重背包)（好题）
http://blog.csdn.net/woshi250hua/article/details/7824773 题目大意:从前有n座山,山里都有一座庙,庙里都有一个老和尚,老和尚专送纪念品,每个纪念 ...
- log在无法调试代码时的妙用
1. 如果修改源代码 通过加入log打印日志 可以判断程序走的流程 找到需要自定义修改的位置(如修改java编写的项目 ApacheDS ) 2. 如果java调用dll文件 出错了 排错的方式也可以 ...
- mysql 链接报 Can't connect to MySQL server on 'localhost' (10061)
之前好好的,重启了下电脑就报了上面的问题... 解决办法很简单:重启下mysql的服务: win7系统,电脑-管理-服务和应用程序-服务,找到mysql重启 即可.
- 【转】PBOC3.0和PBOC2.0标准规范异同分析
2013年2月,中国人民银行发布了<中国金融集成电路(IC)卡规范(V3.0)>(以下简称PBOC3.0),PBOC3.0是在中国人民银行2005年颁布的<中国金融集成电路(IC)卡 ...
- QT的组合键
https://www.cnblogs.com/Jace-Lee/p/5859293.html
- Python学习---Python下[set集合]的学习
Set集合[可变]是一个无序的,不重复的数据组合,它的主要作用如下: 1. 去重,把一个列表变成集合,就自动去重了 2. 关系测试,测试两组数据之前的交集.差集.并集等关系 集合(set):把不同的元 ...
- IE浏览器兼容问题(下)——IE6的常见问题
IE6常见兼容性问题 1.盒模型问题 (1)DTD问题 DTD:文档定义类型,规定了要遵循的书写规范. 如果不写DTD,高级浏览器还是可以正常加载,IE6会以怪异模式进行加载. 盒模型:正常应该是外扩 ...