在DataGrid中添加一个合计字段

原创 2004年07月13日 15:32:00

 在DataGrid中添加一个合计字段

翻译:nxyc_twz@163.com

你是否花了很时间来阅读 ASPNG 列表?如果不是的话,我非常推荐它。你可以访问
http://www.asp.nethttp://www.asplists.com。最近的最常见的一个问题是:“ 我怎样在 DataGrid 中显示列合计?”。 我亲自多次为这个问题提供了示例代码,因此,我想在DotNetJunkies 的标题中提供这么一份指南。 在这份指南中你将会学到怎样在 DataGrid 中编程实现对某一列的值进行统计,并在 DataGrid 的页脚中显示其合计值。这份指南中供下载的示例中包括了 C# 和 Visual Basic.NET 两种代码。

这份指南的最终结果看起来像这样:

从上图可看出:

上面所用到的屏幕图片中的 DataGrid 是一个非常典型的 DataGrid 。有许多控制 DataGrid 外观的属性,它使用两个 BoundColumns 来操作数据,但这并不是最重要的。做好这项工作真正重要的是使用 DataGrid.OnItemDataBound 事件。这个事件将会触发每次绑定一条记录到 DataGrid。你可以为这个事件创建一个事件处理,以操作数据记录。在这种情况下,你将会得到运行时 Price 列的合计值。

页脚指的是数据范围的最后一行。当这行被限定时,在事件句处理你可以得到 Price 列的运行时统计值。

实施:

首先让我们找到一种方法来操作 Web 窗体输出。 这份指南中,你将使用一个 Web 窗体 (calcTotals.aspx) 以及一个类代码文件 (calcTotals.aspx.cs)。这份指南的意图是, 类代码将会使用 Just-In-Time 编译器来编译。 这里是 calcTotals.aspx 的代码:

<%@ Page Inherits="myApp.calcTotals" Src="20010731T0101.aspx.cs" %>
<html>
<body bgcolor="
white">
<asp:DataGrid id="MyGrid" runat="server"
  AutoGenerateColumns="False"
  CellPadding="4" CellSpacing="0"
  BorderStyle="Solid" BorderWidth="1"
  Gridlines="None" BorderColor="Black"
  ItemStyle-Font-Name="Verdana"
  ItemStyle-Font-Size="9pt"
  HeaderStyle-Font-Name="Verdana"
  HeaderStyle-Font-Size="10pt"
  HeaderStyle-Font-Bold="True"
  HeaderStyle-ForeColor="White"
  HeaderStyle-BackColor="Blue"
  FooterStyle-Font-Name="Verdana"
  FooterStyle-Font-Size="10pt"
  FooterStyle-Font-Bold="True"
  FooterStyle-ForeColor="White"
  FooterStyle-BackColor="Blue"
  OnItemDataBound="MyDataGrid_ItemDataBound"
  ShowFooter="True">
  <Columns>
    <asp:BoundColumn HeaderText="
Title" DataField="title" />
    <asp:BoundColumn HeaderText="
Price" DataField="price"
      ItemStyle-HorizontalAlign="
Right"
      HeaderStyle-HorizontalAlign="Center" />
   </Columns>
</asp:DataGrid>
</body>
</html>

在 Web 窗体中你使用 @ Page 来直接声明这个页所继承的类代码。SRC 属性指明了类代码将使用 JIT 编译器来编译。 Web 窗体中的大部分代码样式声明用来使 DataGrid 外观变得更好看。

最后指定的属性之一是 OnItemDataBound 属性。这个事件将会在 OnItemDataBound 事件发生时被触发。

Web 窗体中的 DataGrid (MyGrid) 包含有两个 BoundColumns,一个是 Title ,另一个是Price。 这里将显示 Pubs 数据库(SQL Server)中 Titles 表的 title 及 price 列。

忽略代码的定义

类代码在所有的地方都将使用。在类代码中,你可以操作两个事件:Page_Load 事件以及 MyGrid_OnItemDataBound 事件。还有一个私有方法 CalcTotal, 用它来简单的完成运行时统计的数学运算。

类代码基本结构块的起始部分:

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data;
using System.Data.SqlClient;

namespace myApp
{
  public class calcTotals : Page
  {
    protected DataGrid MyGrid;
    private double runningTotal = 0;
  }
}

在类代码的基本结构中,你必须使用相关语句导入名字空间(namespace)。在类声明中,你声明了两个变量,一个是类代码中映射 Web 窗体的 DataGrid(MyGrid)控件的变量;一个是用来操作 DataGrid 的 Price 列中运行时统计的双精度值。 

Page_Load 事件

Page_Load 事件中,你所要做的就是连接到 SQL Server 并执行一个简单的 SqlCommand。 你取得了所有 Price 值>0 的 title 和 price 数据。你使用 SqlCommand.ExecuteReader 方法返回一个 SqlDataReader 并将其直接绑定到 DataGrid (MyGrid)。

protected void Page_Load(object sender, EventArgs e)
{
  SqlConnection myConnection = new SqlConnection("server=Localhost;database=pubs;uid=sa;pwd=;");//创建SQL连接
  SqlCommand myCommand = new SqlCommand("SELECT title, price FROM Titles WHERE price > 0", myConnection);//创建SQL命令

  try
  {
    myConnection.Open();//打开数据库连接
    MyGrid.DataSource = myCommand.ExecuteReader();//指定 DataGrid 的数据源
    MyGrid.DataBind();//绑定数据到 DataGrid
    myConnection.Close();//关闭数据连接
  }
  catch(Exception ex)
  {
    //捕获错误
    HttpContext.Current.Response.Write(ex.ToString());
  }
}

CalcTotals 方法

CalcTotals 方法用来处理 runningTotal 变量。这个值将以字符串形式来传递。 你需要将它解析为双精度型,然后 runningTotal 变量就成了双精度类型。

private void CalcTotal(string _price)
{
  try
  {
    runningTotal += Double.Parse(_price);
  }
  catch
  {
     //捕获错误
  }
}

MyGrid_ItemDataBound 事件

MyGrid_ItemDataBound 事件在数据源中每行绑定到 DataGrid 时被调用。在这个事件处理中,你可以处理每一行数据。 这里你的目的是,你将需要调用 CalcTotals 方法并从 Price 列传递文本,并用金额型格式化每一行的 Price 列, 并在页脚行中显示 runningTotal 的值。

public void MyDataGrid_ItemDataBound(object sender, DataGridItemEventArgs e)
{
  if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
  {
    CalcTotal( e.Item.Cells[1].Text );
    e.Item.Cells[1].Text = string.Format("{0:c}", Convert.ToDouble(e.Item.Cells[1].Text));
  }
  else if(e.Item.ItemType == ListItemType.Footer )
  {
    e.Item.Cells[0].Text="Total";
    e.Item.Cells[1].Text = string.Format("{0:c}", runningTotal);
  }
}

MyGrid_ItemDataBound 事件句柄中,首先你得使用 ListItemType 判断当前的 DataGridItem 是一个数据项还是AlternatingItem 行。如果是数据项,你调用 CalcTotals,并将 Price 列的值作为参数传递给它;然后你以金额格式对 Price 列进行格式化及着色。

如果 DataGridItem 是页脚,可以用金额格式显示 runningTotal

总结

在这份指南中,你学到了怎样使用 DataGrid.OnItemDataBound 事件来实现运行时对DataGrid 的某一列进行统计。使用这个事件,你可以创建一个列的合计并可对DataGrid行的页脚进行着色。

datagrid 当前页面统计合计等在Footer页脚。

如下是效果图:三行的平均值,合计等计算 $.extend($.fn.datagrid.methods, {           //extend 用来新增datagrid 的方法,名字为stat...
  • aq23es
  • aq23es
  • 2016年06月15日 16:55
  • 431

datagrid中添加合计行计算合计

在公司demo项目实习中,我有一个功能是展示所有支出明细后,在下面添加一行合计,计算所有支出明细之和。 首先我想到的是用easyui里datagrid有一个属性showFooter,就是添加...
  • qq_18423547
  • qq_18423547
  • 2016年04月08日 12:06
  • 2217

easyui的datagrid生成合并行,合计计算价格

easyui的datagrid生成合并行,合计计算价格
  • love_xiolan
  • love_xiolan
  • 2016年08月08日 11:12
  • 8624

EasyUi的DataGrid组件扩展,显示统计当前页信息

// 为datagrid开启统计功能 02 $('#list').datagrid({ 03     ..... // 此处代码略 ...
  • superdog007
  • superdog007
  • 2014年05月04日 09:56
  • 5960

tableGrid与datagrid 分别添加合计列

我们在开发过程中经常会用到tableGrid和datagrid用来展示数据列表,下面分别列出tableGrid与datagrid添加合计列的相关代码 1.tableGrid添加合计列 //查询...
  • snowyz
  • snowyz
  • 2017年06月21日 09:34
  • 648

miniui合计一列与编辑备忘

供自己看; scripts/miniui/themes/default/miniui.css" rel="stylesheet" t...
  • hello_mr_anan
  • hello_mr_anan
  • 2017年03月04日 09:42
  • 814

DataGrid 自定义字段内容

因为DataGrid Web 控件的AutoGenerateColumn 属性预设为True,表示会自动产生数据源中所有的字段。如果我们想自订DataGrid Web 控制所要显示的字段,只要将Aut...
  • limshirley
  • limshirley
  • 2017年04月17日 14:16
  • 454

easyui datagrid 列分组和行归组

数据格式:{ "col": [ "分类", "id", "模式英文名", "模式中文名", "教务系统", ...
  • wyljz
  • wyljz
  • 2017年04月26日 16:37
  • 1492

【datagrid】动态加载列

之前我们的项目在前台显示只需要把数据从数据库读出来进行显示就可以,datagrid的表头字段都是写死的,把数据往表里一扔,就基本没什么事儿了,结果客户前几天要求,其中一个字段不能是死的,应该是有多少项...
  • u013036688
  • u013036688
  • 2016年01月03日 16:32
  • 3174

easyui datagrid自定义按钮列,即最后面的操作列

做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能,不过没关系,我们可以自定义来实现 版本:jquery easyUI 1.3.2 这里我的实现方式是采用HTML形式...
  • thc1987
  • thc1987
  • 2013年12月13日 17:43
  • 85666
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在DataGrid中添加一个合计字段
举报原因:
原因补充:

(最多只允许输入30个字)