gridview 表头合并

多行表头合并, 网上很多实例, 这里写的很详细, 力求让每个人都能看懂.

实现原理:GridView在ASP.NET中最终转为HMTL的表格显示表头。

在GridView创建行表头行时: e.Row.RowType == DatacontrolRowType.Header

清除掉旧的表头, 再重新拼接新的表头.

TableHeaderCell thc = new TableHeaderCell();

thc.Text = "表头";

对应生成的HTML为：<th>表头</th>

多行表头合并效果图

测试多行合并表头
表头 表头1 表头2 表头3
表头1-1 表头2-1 表头2-2 表头3-1 表头3-2 表头3-3

 1gridview 表头合并protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)

 2gridview 表头合并gridview 表头合并    gridview 表头合并{

 3gridview 表头合并        //判断创建的行是否为表头行

 4gridview 表头合并        if (e.Row.RowType == DataControlRowType.Header)

 5gridview 表头合并gridview 表头合并        gridview 表头合并{

 6gridview 表头合并            //获取表头所在行的所有单元格

 7gridview 表头合并            TableCellCollection tcHeader = e.Row.Cells;

 8gridview 表头合并            //清除自动生成的表头

 9gridview 表头合并            tcHeader.Clear();

10gridview 表头合并

11gridview 表头合并            //新添加的第一个表头单元格, 设置为合并7个列, 从而形成一行.

12gridview 表头合并            tcHeader.Add(new TableHeaderCell());

13gridview 表头合并            tcHeader[0].ColumnSpan = 7;

14gridview 表头合并            tcHeader[0].Text = "测试多行合并表头</th></tr><tr>";

15gridview 表头合并            //</th>表示当前单元格结束, </tr>表示本行结束, <tr>另起新一行    关键点

16gridview 表头合并            

17gridview 表头合并            //添加第二个表头单元格, 设置为合并两行.

18gridview 表头合并            tcHeader.Add(new TableHeaderCell());

19gridview 表头合并            tcHeader[1].RowSpan = 2;

20gridview 表头合并            tcHeader[1].Text = "表头";

21gridview 表头合并

22gridview 表头合并            tcHeader.Add(new TableHeaderCell());

23gridview 表头合并            tcHeader[2].Text = "表头1";

24gridview 表头合并

25gridview 表头合并            tcHeader.Add(new TableHeaderCell());

26gridview 表头合并            tcHeader[3].ColumnSpan = 2;

27gridview 表头合并            tcHeader[3].Text = "表头2";

28gridview 表头合并

29gridview 表头合并            tcHeader.Add(new TableHeaderCell());

30gridview 表头合并            tcHeader[4].ColumnSpan = 3;

31gridview 表头合并            tcHeader[4].Text = "表头3</th></tr><tr>";

32gridview 表头合并            

33gridview 表头合并            //第二行的所有的单元格添加完成, 换行</th></tr><tr>

34gridview 表头合并

35gridview 表头合并            //添加第三行所有的单元格

36gridview 表头合并              tcHeader.Add(new TableHeaderCell());

37gridview 表头合并            tcHeader[5].Text = "表头1-1";

38gridview 表头合并

39gridview 表头合并            tcHeader.Add(new TableHeaderCell());

40gridview 表头合并            tcHeader[6].Text = "表头2-1";

41gridview 表头合并

42gridview 表头合并            tcHeader.Add(new TableHeaderCell());

43gridview 表头合并            tcHeader[7].Text = "表头2-2";

44gridview 表头合并

45gridview 表头合并            tcHeader.Add(new TableHeaderCell());

46gridview 表头合并            tcHeader[8].Text = "表头3-1";

47gridview 表头合并

48gridview 表头合并            tcHeader.Add(new TableHeaderCell());

49gridview 表头合并            tcHeader[9].Text = "表头3-2";

50gridview 表头合并

51gridview 表头合并            tcHeader.Add(new TableHeaderCell());

52gridview 表头合并            tcHeader[10].Text = "表头3-3</th></tr><tr>";

53gridview 表头合并        }

54gridview 表头合并

55gridview 表头合并    }

gridview 表头合并

gridview 表头合并

1、这里先介绍单纯的GridView多表头合并，先上图：

gridview 表头合并

可以看到，上图就是生成的多表头，具体的后台代码是在Row_Created事件中创建的。先看创建代码：

gridview 表头合并
gridview 表头合并



protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
switch (e.Row.RowType)
{
case DataControlRowType.Header:
//总表头
 TableCellCollection tcHeader = e.Row.Cells;
tcHeader.Clear();
//第一行表头
 tcHeader.Add(new TableHeaderCell());
tcHeader[0].Attributes.Add("bgcolor", "DarkSeaBlue");
tcHeader[0].Attributes.Add("colspan", "6"); //合并第一行的6列
 tcHeader[0].Text = "用户基本信息</th></tr><tr>";
//第二行表头
 tcHeader.Add(new TableHeaderCell());
tcHeader[1].Attributes.Add("bgcolor", "DarkSeaGreen");
tcHeader[1].Attributes.Add("colspan", "3");
tcHeader[1].Text = "基本信息";
tcHeader.Add(new TableHeaderCell());
tcHeader[2].Attributes.Add("bgcolor", "DarkSeaGreen");
tcHeader[2].Attributes.Add("colspan", "3");
tcHeader[2].Text = "籍贯信息</th></tr><tr>";
//第三行表头
 tcHeader.Add(new TableHeaderCell());
tcHeader[3].Attributes.Add("bgcolor", "Khaki");
tcHeader[3].Text = "公司";
tcHeader.Add(new TableHeaderCell());
tcHeader[4].Attributes.Add("bgcolor", "Khaki");
tcHeader[4].Text = "姓名";
tcHeader.Add(new TableHeaderCell());
tcHeader[5].Attributes.Add("bgcolor", "Khaki");
tcHeader[5].Text = "职衔";
tcHeader.Add(new TableHeaderCell());
tcHeader[6].Attributes.Add("bgcolor", "Khaki");
tcHeader[6].Text = "住址";
tcHeader.Add(new TableHeaderCell());
tcHeader[7].Attributes.Add("bgcolor", "Khaki");
tcHeader[7].Text = "城市";
tcHeader.Add(new TableHeaderCell());
tcHeader[8].Attributes.Add("bgcolor", "Khaki");
tcHeader[8].Text = "国籍";
break;
}
}



gridview 表头合并







需要说明的是，如果想实现多表头，得自己绘制tablecell，具体的方式就是先添加一个新的TableHeaderCell，然后就是设定其Attributes属性，再者如果要进行单元格合并，那么需要指定其colspan或者是rowspan，以便确定是横向合并还是竖向合并。



前台代码如下：



gridview 表头合并


gridview 表头合并





 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
CellPadding="4" DataSourceID="SqlDataSource1"
GridLines="Vertical" Width="927px" BackColor="White"
BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px"
onrowcreated="GridView1_RowCreated" ForeColor="Black">
<RowStyle BackColor="#F7F7DE" />
<Columns>
<asp:BoundField DataField="CompanyName" HeaderText="公司" />
<asp:BoundField DataField="ContactName" HeaderText="姓名" />
<asp:BoundField DataField="ContactTitle" HeaderText="职衔" />
<asp:BoundField DataField="Address" HeaderText="住址" />
<asp:BoundField DataField="City" HeaderText="居住地" />
<asp:BoundField DataField="Country" HeaderText="国籍"
SortExpression="Country" />
</Columns>
<FooterStyle BackColor="#CCCC99" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Country] FROM [Customers]">
</asp:SqlDataSource>



gridview 表头合并















1、这里先介绍单纯的GridView多表头合并，先上图：



gridview 表头合并



可以看到，上图就是生成的多表头，具体的后台代码是在Row_Created事件中创建的。先看创建代码：



gridview 表头合并


gridview 表头合并





protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
switch (e.Row.RowType)
{
case DataControlRowType.Header:
//总表头
 TableCellCollection tcHeader = e.Row.Cells;
tcHeader.Clear();
//第一行表头
 tcHeader.Add(new TableHeaderCell());
tcHeader[0].Attributes.Add("bgcolor", "DarkSeaBlue");
tcHeader[0].Attributes.Add("colspan", "6"); //合并第一行的6列
 tcHeader[0].Text = "用户基本信息</th></tr><tr>";
//第二行表头
 tcHeader.Add(new TableHeaderCell());
tcHeader[1].Attributes.Add("bgcolor", "DarkSeaGreen");
tcHeader[1].Attributes.Add("colspan", "3");
tcHeader[1].Text = "基本信息";
tcHeader.Add(new TableHeaderCell());
tcHeader[2].Attributes.Add("bgcolor", "DarkSeaGreen");
tcHeader[2].Attributes.Add("colspan", "3");
tcHeader[2].Text = "籍贯信息</th></tr><tr>";
//第三行表头
 tcHeader.Add(new TableHeaderCell());
tcHeader[3].Attributes.Add("bgcolor", "Khaki");
tcHeader[3].Text = "公司";
tcHeader.Add(new TableHeaderCell());
tcHeader[4].Attributes.Add("bgcolor", "Khaki");
tcHeader[4].Text = "姓名";
tcHeader.Add(new TableHeaderCell());
tcHeader[5].Attributes.Add("bgcolor", "Khaki");
tcHeader[5].Text = "职衔";
tcHeader.Add(new TableHeaderCell());
tcHeader[6].Attributes.Add("bgcolor", "Khaki");
tcHeader[6].Text = "住址";
tcHeader.Add(new TableHeaderCell());
tcHeader[7].Attributes.Add("bgcolor", "Khaki");
tcHeader[7].Text = "城市";
tcHeader.Add(new TableHeaderCell());
tcHeader[8].Attributes.Add("bgcolor", "Khaki");
tcHeader[8].Text = "国籍";
break;
}
}



gridview 表头合并







需要说明的是，如果想实现多表头，得自己绘制tablecell，具体的方式就是先添加一个新的TableHeaderCell，然后就是设定其Attributes属性，再者如果要进行单元格合并，那么需要指定其colspan或者是rowspan，以便确定是横向合并还是竖向合并。



前台代码如下：



gridview 表头合并


gridview 表头合并





 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
CellPadding="4" DataSourceID="SqlDataSource1"
GridLines="Vertical" Width="927px" BackColor="White"
BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px"
onrowcreated="GridView1_RowCreated" ForeColor="Black">
<RowStyle BackColor="#F7F7DE" />
<Columns>
<asp:BoundField DataField="CompanyName" HeaderText="公司" />
<asp:BoundField DataField="ContactName" HeaderText="姓名" />
<asp:BoundField DataField="ContactTitle" HeaderText="职衔" />
<asp:BoundField DataField="Address" HeaderText="住址" />
<asp:BoundField DataField="City" HeaderText="居住地" />
<asp:BoundField DataField="Country" HeaderText="国籍"
SortExpression="Country" />
</Columns>
<FooterStyle BackColor="#CCCC99" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Country] FROM [Customers]">
</asp:SqlDataSource>



gridview 表头合并









 
                    
            
                

                  
 
        

	 
        

            

                                            

        

        
相关文章：

        

      
            
 
                    
    
                                            

               
   
         

    


  






 
          

    
猜你喜欢 

        
    
                        

   
 



    
相关资源 

        
    
              
                            

   

   
    

     
相似解决方案 

         
    
                          

    

  
   

    

 
   

    
热门标签  

    

                    Java
                        Python
                        linux
                        javascript
                        Mysql
                        C#
                        Docker
                        算法
                        前端
                        SpringBoot
                        Redis
                        Vue
                        spring
                        设计模式
                        .net core
                        .net
                        kubernetes
                        c++
                        数据库
                        数据结构
                        大数据
                        js
                        机器学习
                        微服务
                        Android
                        Go
                        程序员
                        面试
                        JVM
                        ASP.net core
                        云原生
                        人工智能
                        后端
                        PHP
                        git
                        CSS
                        golang
                        k8s
                        Nginx
                        Django
                        mybatis
                        深度学习
                        多线程
                        React
                        架构
                        devops
                        爬虫
                        云计算
                        Spring Boot
                        LeetCode