如何用C#和ASP.NET实现带合并表头的目标样式GridView？

问题根源 #

1. 列数不匹配：后台代码添加的合并表头总列数（1+1+3×6=20列）与ASPX中定义的列数（仅6列）完全不符，导致表头错位。
2. 字段映射错误：ASPX的BoundField未对应数据表中的实际字段（如710/810分组下的A/B/C字段），数据无法正确展示。
3. 缺少二级表头：目标样式是双层表头，现有代码仅添加了顶层合并表头，缺失子表头。

修正后的ASPX代码 #

<asp:GridView ID="GridView1" HeaderStyle-BackColor="#9AD6ED" HeaderStyle-ForeColor="#636363"
              runat="server" AutoGenerateColumns="false" OnDataBound="OnDataBound" CellPadding="6" CellSpacing="0" BorderWidth="1px" BorderColor="#ccc">
    <Columns>
        <!-- 第一组：Hour -->
        <asp:BoundField DataField="xHour" HeaderText="Hour" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="80" />
        <!-- 第二组：C_CO -->
        <asp:BoundField DataField="xDate" HeaderText="Date" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="100" />
        <!-- 第三组：710 -->
        <asp:BoundField DataField="710_A" HeaderText="A" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="80" />
        <asp:BoundField DataField="710_B" HeaderText="B" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="80" />
        <asp:BoundField DataField="710_C" HeaderText="C" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="80" />
        <!-- 第四组：810 -->
        <asp:BoundField DataField="810_A" HeaderText="A" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="80" />
        <asp:BoundField DataField="810_B" HeaderText="B" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="80" />
        <asp:BoundField DataField="810_C" HeaderText="C" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="80" />
        <!-- 第五组：830 -->
        <asp:BoundField DataField="830_A" HeaderText="A" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="80" />
        <asp:BoundField DataField="830_B" HeaderText="B" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="80" />
        <asp:BoundField DataField="830_C" HeaderText="C" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="80" />
        <!-- 第六组：E10 -->
        <asp:BoundField DataField="E10_A" HeaderText="A" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="80" />
        <asp:BoundField DataField="E10_B" HeaderText="B" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="80" />
        <asp:BoundField DataField="E10_C" HeaderText="C" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="80" />
        <!-- 第七组：E40 -->
        <asp:BoundField DataField="E40_A" HeaderText="A" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="80" />
        <asp:BoundField DataField="E40_B" HeaderText="B" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="80" />
        <asp:BoundField DataField="E40_C" HeaderText="C" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="80" />
        <!-- 第八组：TOTAL -->
        <asp:BoundField DataField="Total_A" HeaderText="A" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="80" />
        <asp:BoundField DataField="Total_B" HeaderText="B" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="80" />
        <asp:BoundField DataField="Total_C" HeaderText="C" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="80" />
    </Columns>
    <HeaderStyle Font-Bold="true" />
    <RowStyle BorderWidth="1px" BorderColor="#ccc" />
</asp:GridView>

修正后的C#代码 #

protected void OnDataBound(object sender, EventArgs e)
{
    // 创建顶层合并表头行
    GridViewRow topHeaderRow = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
    topHeaderRow.BackColor = ColorTranslator.FromHtml("#3AC0F2");
    topHeaderRow.ForeColor = Color.White;
    topHeaderRow.Font.Bold = true;

    // 添加Hour列（占1列）
    TableHeaderCell hourCell = new TableHeaderCell();
    hourCell.Text = "Hour";
    hourCell.ColumnSpan = 1;
    hourCell.HorizontalAlign = HorizontalAlign.Center;
    topHeaderRow.Controls.Add(hourCell);

    // 添加C_CO列（占1列）
    TableHeaderCell ccoCell = new TableHeaderCell();
    ccoCell.Text = "C_CO";
    ccoCell.ColumnSpan = 1;
    ccoCell.HorizontalAlign = HorizontalAlign.Center;
    topHeaderRow.Controls.Add(ccoCell);

    // 定义分组表头：名称 + 占列数
    var headerGroups = new List<(string Name, int ColSpan)>
    {
        ("710", 3),
        ("810", 3),
        ("830", 3),
        ("E10", 3),
        ("E40", 3),
        ("TOTAL", 3)
    };

    // 循环添加分组表头
    foreach (var group in headerGroups)
    {
        TableHeaderCell groupCell = new TableHeaderCell();
        groupCell.Text = group.Name;
        groupCell.ColumnSpan = group.ColSpan;
        groupCell.HorizontalAlign = HorizontalAlign.Center;
        topHeaderRow.Controls.Add(groupCell);
    }

    // 将顶层表头添加到GridView的表头容器最上方
    GridView1.HeaderRow.Parent.Controls.AddAt(0, topHeaderRow);
}

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindGrid();
    }
}

private void BindGrid()
{
    GridView1.DataSource = RetrieveProducts();
    GridView1.DataBind();
}

private DataTable RetrieveProducts()
{
    DataTable dt = new DataTable();
    using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnSqlServer"].ConnectionString))
    {
        using (SqlCommand cmd = new SqlCommand("sp_C_CO", conn))
        {
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.CommandTimeout = 2147483;
            conn.Open();
            SqlDataAdapter adapter = new SqlDataAdapter(cmd);
            adapter.Fill(dt);
        }
    }
    return dt;
}

关键说明 #

1. 列数匹配：ASPX中定义了20列（1+1+3×6），与后台顶层表头的列数完全对应，避免错位。
2. 字段映射：BoundField的DataField严格对应数据表中的字段（如710_A、810_B等），确保数据正确绑定。
3. 双层表头：ASPX的HeaderText作为二级表头（A/B/C），后台添加的topHeaderRow作为顶层合并表头，实现目标样式。
4. 样式优化：添加了单元格内边距、边框、字体加粗等样式，更贴近目标效果。

内容的提问来源于stack exchange，提问作者the_uncle_vince