一个带复合表头与跨列表项的数据表的DataGrid解决方案

本文链接：https://blog.youkuaiyun.com/welshem/article/details/271649

博客主要围绕ASP WebForm展开，涉及相关数据展示效果以及页面相关内容，利用datagrid等元素，与Microsoft技术相关，通过generator生成html页面呈现效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果

部门	月度	费用情况
部门	月度	预算	发生	余额
销售	01	￥90,000.00	￥93,000.00	￥-3,000.00
销售	02	￥90,000.00	￥88,000.00	￥2,000.00
销售小计		￥180,000.00	￥181,000.00	￥-1,000.00
行政	01	￥10,000.00	￥9,000.00	￥1,000.00
行政	02	￥10,000.00	￥10,500.00	￥-500.00
行政小计		￥20,000.00	￥19,500.00	￥500.00

二、页面

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="WelShem.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
    <title>WebForm1</title>
    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" Content="C#">
    <meta name="vs_defaultClientScript" content="JavaScript">
</HEAD>
<body MS_POSITIONING="GridLayout">
    <form id="Form1" method="post" runat="server">
      <table align="center" width="600">
        <tr>
          <td></td>
        </tr>
        <tr>
          <td>
            <asp:DataGrid id="DataGrid1" runat="server" Width="595px" AutoGenerateColumns="False">
              <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
              <Columns>
                <asp:BoundColumn DataField="DeptName" HeaderText="部门">
                  <ItemStyle HorizontalAlign="Center"></ItemStyle>
                </asp:BoundColumn>
                <asp:BoundColumn DataField="Monthly" HeaderText="月度">
                  <ItemStyle HorizontalAlign="Center"></ItemStyle>
                </asp:BoundColumn>
                <asp:BoundColumn DataField="Budget" HeaderText="费用情况</td></tr><tr><td align=center>预算"
                  DataFormatString="{0:C}">
                  <ItemStyle HorizontalAlign="Right"></ItemStyle>
                </asp:BoundColumn>
                <asp:BoundColumn DataField="Fact" HeaderText="发生" DataFormatString="{0:C}">
                  <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
                  <ItemStyle HorizontalAlign="Right"></ItemStyle>
                </asp:BoundColumn>
                <asp:BoundColumn DataField="Balance" HeaderText="余额" DataFormatString="{0:C}">
                  <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
                  <ItemStyle HorizontalAlign="Right"></ItemStyle>
                </asp:BoundColumn>
              </Columns>
            </asp:DataGrid></td>
        </tr>
        <tr>
          <td></td>
        </tr>
      </table>
    </form>
</body>
</HTML>

三、代码

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data.OleDb;

namespace WelShem
{
/// <summary>
/// WebForm1 的摘要说明。
/// </summary>
public class WebForm1 : System.Web.UI.Page
{
    protected System.Web.UI.WebControls.DataGrid DataGrid1;

    private void Page_Load(object sender, System.EventArgs e)
    {
      if(!this.IsPostBack)
      {
        this.Bind();
      }
    }

    private void Bind()
    {
      OleDbConnection Conn=new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source="+Server.MapPath("Accounts.mdb"));
      OleDbDataAdapter Da=new OleDbDataAdapter("SELECT DeptName, Monthly, Budget, Fact, Budget-Fact AS Balance FROM Expenditure",Conn);
      DataTable dt=new DataTable();
      Da.Fill(dt);

Da.SelectCommand.CommandText="SELECT DeptName & '小计' as DeptName, Sum(Budget) AS Budget, Sum(Fact) AS Fact, Sum(Budget-Fact) AS Balance FROM Expenditure GROUP BY DeptName";
Da.Fill(dt);

      dt.DefaultView.Sort=dt.Columns[0].ColumnName;
      DataGrid1.DataSource=dt.DefaultView;
      DataGrid1.DataBind();
    }
    #region Web 窗体设计器生成的代码
    override protected void OnInit(EventArgs e)
    {
      //
      // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
      //
      InitializeComponent();
      base.OnInit(e);
    }

    /// <summary>
    /// 设计器支持所需的方法 - 不要使用代码编辑器修改
    /// 此方法的内容。
    /// </summary>
    private void InitializeComponent()
    {
      this.DataGrid1.ItemDataBound += new System.Web.UI.WebControls.DataGridItemEventHandler(this.DataGrid1_ItemDataBound);
      this.Load += new System.EventHandler(this.Page_Load);
    }
    #endregion

    private void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
    {
      if(e.Item.ItemType==ListItemType.Header)
      {
        e.Item.Cells[0].RowSpan=2;
        e.Item.Cells[1].RowSpan=2;
        e.Item.Cells[2].ColumnSpan=3;
      }
      else if(e.Item.ItemType==ListItemType.Item||e.Item.ItemType==ListItemType.AlternatingItem)
      {
        if(e.Item.Cells[1].Text==" ")
        {
          e.Item.Cells[0].ColumnSpan=2;
          e.Item.Cells[0].HorizontalAlign=HorizontalAlign.Right;
          e.Item.Cells[1].Visible=false;
        }
      }
    }
}
}