C#编辑GridView的Thead


背景

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

内容

大致有两种方法

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

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

现在我们具体来做。

方法一

前端

"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)
            {
                // 使用替换
                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";
                    tcHeader[3].Attributes.Add("colspan", "2");
                    tcHeader[3].Attributes.Add("style", "text-align:right;height:30px;");    
            break;
                }
}

方法二

前端

 "TBHead" runat="server" border="0" align="center" width="1000px" cellspacing="0" cellpadding="0"class="main">
            
"1" class="style1"> "txtFtype" runat="server" class="HeadType"> "2" rowspan="2" class="style1"> "lblHeaderF" runat="server" class="HeadTitle"> "1" class="style1"> "lbldate" runat="server" class="HeadTime">
"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)
            {
                // 使用替换
                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 = ""; HtmlTable demo = TBHead; tcHeader[0].Controls.Add(demo); tcHeader.AddAt(1, new TableHeaderCell()); tcHeader[1].Text = ""; break; } }