修改ASP.NET GridView表头样式与布局，匹配预期表格效果

问题说明 #

现有GridView表头为独立分散的列布局，需调整为分组式表头（如"Total"跨列合并，下方包含"On Peak""Off Peak"子列；"Amp"跨列合并，下方包含"TX 1""TX 2"子列等层级结构）。

修正代码实现 #

1. ASPX 页面代码调整 #

<div class="right">
    <asp:GridView ID="grdDaily" runat="server" AutoGenerateColumns="false" CssClass="table table-striped table-hover sort display" 
        DataKeyNames="Daily_P21_ID" OnRowDeleting="grdDaily_RowDeleting" AllowPaging="true" OnRowCommand="grdDaily_RowCommand"
        OnPageIndexChanging="grdDaily_PageIndexChanging" PageSize="15" AllowSorting="true" OnRowDataBound="grdDaily_RowDataBound"
        OnSelectedIndexChanged="grdDaily_SelectedIndexChanged1" OnRowCreated="grdDaily_RowCreated">

        <Columns>
            <!-- Total 分组子列 -->
            <asp:BoundField DataField="Total_On_Peak" HeaderText="On Peak" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />
            <asp:BoundField DataField="Total_Off_Peak" HeaderText="Off Peak" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />
            
            <!-- Peak 分组子列 -->
            <asp:BoundField DataField="On_Peak" HeaderText="On Peak" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />
            <asp:BoundField DataField="Off_Peak" HeaderText="Off Peak" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />

            <asp:BoundField DataField="Max_Demand" HeaderText="Max Demand" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />

            <!-- Amp 分组子列 -->
            <asp:BoundField DataField="TX1_Amp" HeaderText="TX 1" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />
            <asp:BoundField DataField="TX2_Amp" HeaderText="TX 2" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />

            <!-- MSB 1 分组子列 -->
            <asp:BoundField DataField="MSB1_R" HeaderText="R" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />
            <asp:BoundField DataField="MSB1_Y" HeaderText="Y" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />
            <asp:BoundField DataField="MSB1_B" HeaderText="B" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />
            <asp:BoundField DataField="MSB1_Voltage" HeaderText="Voltage" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />                  

            <!-- PBA 分组子列 -->
            <asp:BoundField DataField="PBA_City_Water" HeaderText="City Water, m3" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />
            <asp:BoundField DataField="PBA_Hydrant" HeaderText="Hydrant, m3" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />

            <!-- CDA 分组子列 -->
            <asp:BoundField DataField="CDA_Pressure" HeaderText="Pressure, bar" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />
            <asp:BoundField DataField="CDA_Dew_Point" HeaderText="Dew Point, °C" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />

            <!-- N2 分组子列 -->
            <asp:BoundField DataField="N2_Pressure" HeaderText="Pressure, bar" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />
            <asp:BoundField DataField="N2_Total_Volume" HeaderText="Total Volume, SCM" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />
            <asp:BoundField DataField="N2_Flow_Rate" HeaderText="Flowrate, SCM/h" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />

            <asp:BoundField DataField="Vacuum" HeaderText="Vacuum Pressure, in. Hg" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />

            <!-- Chilled Water Supply 分组子列 -->
            <asp:BoundField DataField="Chilled_Supply_Temperature" HeaderText="Temperature, °C" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />
            <asp:BoundField DataField="Chilled_Supply_Pressure" HeaderText="Pressure, psi" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />

            <!-- Chilled Water Return 分组子列 -->
            <asp:BoundField DataField="Chilled_Return_Temperature" HeaderText="Temperature, °C" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />
            <asp:BoundField DataField="Chilled_Return_Pressure" HeaderText="Pressure, psi" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />

            <asp:HyperLinkField Text="Edit" NavigateUrl="~/" DataNavigateUrlFields="ID" DataNavigateUrlFormatString="xdd.aspx?ID={0}" FooterStyle-CssClass="btn btn-info" />
            
            <asp:CommandField DeleteText="Delete" ShowDeleteButton="true" ButtonType="Button" ControlStyle-CssClass="btn btn-info" />
            <asp:BoundField DataField="EmailSend" HeaderText="EmailSend" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" Visible="false" />

        </Columns>
        <HeaderStyle VerticalAlign="Middle" HorizontalAlign="Center" />
    </asp:GridView>
</div>

2. C# 后台代码调整 #

protected void grdDaily_RowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        // 创建分组表头行
        GridViewRow headerRow = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
        TableCell cell;

        // 按分组定义跨列表头
        cell = new TableHeaderCell { Text = "Total", ColumnSpan = 2, HorizontalAlign = HorizontalAlign.Center, VerticalAlign = VerticalAlign.Middle };
        headerRow.Cells.Add(cell);

        cell = new TableHeaderCell { Text = "Peak", ColumnSpan = 2, HorizontalAlign = HorizontalAlign.Center, VerticalAlign = VerticalAlign.Middle };
        headerRow.Cells.Add(cell);

        cell = new TableHeaderCell { Text = "Max Demand", ColumnSpan = 1, HorizontalAlign = HorizontalAlign.Center, VerticalAlign = VerticalAlign.Middle };
        headerRow.Cells.Add(cell);

        cell = new TableHeaderCell { Text = "Amp", ColumnSpan = 2, HorizontalAlign = HorizontalAlign.Center, VerticalAlign = VerticalAlign.Middle };
        headerRow.Cells.Add(cell);

        cell = new TableHeaderCell { Text = "MSB 1", ColumnSpan = 4, HorizontalAlign = HorizontalAlign.Center, VerticalAlign = VerticalAlign.Middle };
        headerRow.Cells.Add(cell);

        cell = new TableHeaderCell { Text = "PBA", ColumnSpan = 2, HorizontalAlign = HorizontalAlign.Center, VerticalAlign = VerticalAlign.Middle };
        headerRow.Cells.Add(cell);

        cell = new TableHeaderCell { Text = "CDA", ColumnSpan = 2, HorizontalAlign = HorizontalAlign.Center, VerticalAlign = VerticalAlign.Middle };
        headerRow.Cells.Add(cell);

        cell = new TableHeaderCell { Text = "N2", ColumnSpan = 3, HorizontalAlign = HorizontalAlign.Center, VerticalAlign = VerticalAlign.Middle };
        headerRow.Cells.Add(cell);

        cell = new TableHeaderCell { Text = "Vacuum", ColumnSpan = 1, HorizontalAlign = HorizontalAlign.Center, VerticalAlign = VerticalAlign.Middle };
        headerRow.Cells.Add(cell);

        cell = new TableHeaderCell { Text = "Chilled Water Supply", ColumnSpan = 2, HorizontalAlign = HorizontalAlign.Center, VerticalAlign = VerticalAlign.Middle };
        headerRow.Cells.Add(cell);

        cell = new TableHeaderCell { Text = "Chilled Water Return", ColumnSpan = 2, HorizontalAlign = HorizontalAlign.Center, VerticalAlign = VerticalAlign.Middle };
        headerRow.Cells.Add(cell);

        cell = new TableHeaderCell { Text = "Actions", ColumnSpan = 2, HorizontalAlign = HorizontalAlign.Center, VerticalAlign = VerticalAlign.Middle };
        headerRow.Cells.Add(cell);

        // 隐藏列的表头单元格
        cell = new TableHeaderCell { Visible = false };
        headerRow.Cells.Add(cell);

        // 将分组表头插入到GridView最上方
        grdDaily.Controls[0].Controls.AddAt(0, headerRow);
    }
}

protected void grdDaily_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow) 
    {
        string item = e.Row.Cells[2].Text;
        // 定位Delete按钮（适配列顺序调整）
        foreach (Button button in e.Row.Cells[e.Row.Cells.Count - 2].Controls.OfType<Button>())
        {
            if (button.CommandName == "Delete") 
            {
                button.Attributes["onclick"] = $"if(!confirm('Do you want to delete {item}?')){{ return false; }};";
            }
        }
    }

    // 设置表头背景色与边框
    if (e.Row.RowType == DataControlRowType.Header)
    {
        foreach (TableCell cell in e.Row.Cells)
        {
            cell.Style.Add("background-color", "#ADD8E6");
            cell.Style.Add("border", "1px solid #ccc");
            cell.Style.Add("padding", "8px");
        }
    }
}

3. 补充CSS样式 #

.table thead tr th {
    font-weight: bold;
    text-align: center;
}

修正要点说明 #

1. 移除冗余列：删除原代码中仅作为分组标题的空BoundField，改为动态生成跨列表头。
2. 列顺序调整：将同一分组的子列放在连续位置，确保跨列合并逻辑正确。
3. 动态表头生成：通过RowCreated事件创建分组表头行，利用ColumnSpan实现跨列合并。
4. 适配按钮定位：修改Delete按钮的单元格定位方式，避免硬编码索引导致的错误。

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