C#编辑GridView的Thead

背景

有这样一个需求，需要更改GridView的Thead,即表头。不只是多行表头，而是任意的内容，可能是一段文字，也可能是一个图片，综合网上的一些资料，大致整理出一些做法。

内容

大致有两种方法

第一种，就是在表头里塞元素，通过后台代码一个个地添加，包括排版样式等等。这样做其实比较麻烦，主要是不直观，不熟悉的话就需要一步步调试。

第二种，就是在前端写出内容，调整样式，放在一个容器里（Div或者Table），注意需要是服务器控件，即需要添加ID，并设定runat="server"。然后在后台获取此容器内容添加到Thead的一行中即可。

现在我们具体来做。

方法一

前端

<asp:GridView ID="gvDataList" runat="server"  CssClass="table-condensed table-hover" 
BorderStyle="None" CellPadding="0" GridLines ="None" 
AutoGenerateColumns="False" OnPreRender="GridView1_PreRender" OnRowCreated="GridView1_RowCreated" >
……

后台

    protected void GridView1_PreRender(object sender, EventArgs e)
        {
            if (gvDataList.Rows.Count > 0)
            {
                // 使用<TH>替换<TD>
                gvDataList.UseAccessibleHeader = true;
                gvDataList.HeaderRow.TableSection = TableRowSection.TableHeader;
                gvDataList.FooterRow.TableSection = TableRowSection.TableFooter;
                
            }
        }

        protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
        {
            switch (e.Row.RowType)
            {
                case DataControlRowType.Header:          
                    e.Row.BackColor = System.Drawing.Color.White;//去除底色
                    TableCellCollection tcHeader = e.Row.Cells;

                    tcHeader.AddAt(0, new TableHeaderCell());
                    tcHeader[0].Text = "表格1";
                    tcHeader[0].Attributes.Add("colspan", "2");
                    tcHeader[0].Attributes.Add("style", "height:30px;");

                    tcHeader.AddAt(1, new TableHeaderCell());
                    tcHeader[1].Text = "表格2";
                    tcHeader[1].Attributes.Add("colspan", "2");
                    tcHeader[1].Attributes.Add("style", "height:30px;");

                    tcHeader.AddAt(2, new TableHeaderCell());
                    tcHeader[2].Text = "表格3";
                    tcHeader[2].Attributes.Add("colspan", "4");
                    tcHeader[2].Attributes.Add("style", "height:30px;");

                    tcHeader.AddAt(3, new TableHeaderCell());
                    tcHeader[3].Text = "表格4</tr><tr>";
                    tcHeader[3].Attributes.Add("colspan", "2");
                    tcHeader[3].Attributes.Add("style", "text-align:right;height:30px;");    
　　　　　　　　　　　　break;
                }
}

方法二

前端

 <table id="TBHead" runat="server" border="0" align="center" width="1000px" cellspacing="0" cellpadding="0" class="main">
            <tr>
                <td colspan="1" class="style1">
                    <asp:TextBox ID="txtFtype" runat="server" class="HeadType"></asp:TextBox>
                </td>
                <td colspan="2" rowspan="2" class="style1">                      
                    <asp:Label ID="lblHeaderF" runat="server" class="HeadTitle"></asp:Label>
                </td>
                <td colspan="1" class="style1">
                    <asp:Label ID="lbldate" runat="server"  class="HeadTime"></asp:Label>
                </td>
            </tr>
</table>


<asp:GridView ID="gvDataList" runat="server"  CssClass="table-condensed table-hover" 
BorderStyle="None" CellPadding="0" GridLines ="None" 
AutoGenerateColumns="False" OnPreRender="GridView1_PreRender" OnRowCreated="GridView1_RowCreated" >
……

后台

 protected void GridView1_PreRender(object sender, EventArgs e)
        {
            if (gvDataList.Rows.Count > 0)
            {
                // 使用<TH>替换<TD>
                gvDataList.UseAccessibleHeader = true;
                gvDataList.HeaderRow.TableSection = TableRowSection.TableHeader;
                gvDataList.FooterRow.TableSection = TableRowSection.TableFooter;
                
            }
        }

 protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
        {
            switch (e.Row.RowType)
            {
                case DataControlRowType.Header:
                    e.Row.BackColor = System.Drawing.Color.White;//去除底色
                    TableCellCollection tcHeader = e.Row.Cells;

                    tcHeader.AddAt(0, new TableHeaderCell());
                    tcHeader[0].Attributes.Add("colspan", "10");
                    tcHeader[0].Text = "</tr><tr>";
                    HtmlTable demo = TBHead;
                    tcHeader[0].Controls.Add(demo);

                    tcHeader.AddAt(1, new TableHeaderCell());
                    tcHeader[1].Text = "</tr><tr style=\"background-color: #D9EDF7;\">";
                    break;
            }
        }