背景
有这样一个需求，需要更改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; } }