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
 1protected void GridView1_RowCreated(object  sender, GridViewRowEventArgs e)
 2    
{
 3        //判断创建的行是否为表头行

 4        if (e.Row.RowType == DataControlRowType.Header)
 5        
{
 6            //获取表头所在行的所有单元格

 7            TableCellCollection tcHeader = e.Row.Cells;
 8            //清除自动生成的表头

 9            tcHeader.Clear();
10

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

12            tcHeader.Add(new TableHeaderCell());
13            tcHeader[0].ColumnSpan = 7
;
14            tcHeader[0].Text = "测试多行合并表头</th></tr><tr>"
;
15            //
</th>表示当前单元格结束, </tr>表示本行结束, <tr>另起新一行    关键点
16
            
17            //添加第二个表头单元格, 设置为合并两行.

18            tcHeader.Add(new TableHeaderCell());
19            tcHeader[1].RowSpan = 2
;
20            tcHeader[1].Text = "表头"
;
21

22            tcHeader.Add(new
 TableHeaderCell());
23            tcHeader[2].Text = "表头1"
;
24

25            tcHeader.Add(new
 TableHeaderCell());
26            tcHeader[3].ColumnSpan = 2
;
27            tcHeader[3].Text = "表头2"
;
28

29            tcHeader.Add(new
 TableHeaderCell());
30            tcHeader[4].ColumnSpan = 3
;
31            tcHeader[4].Text = "表头3</th></tr><tr>"
;
32
            
33            //
第二行的所有的单元格添加完成, 换行</th></tr><tr>
34

35            //添加第三行所有的单元格

36              tcHeader.Add(new TableHeaderCell());
37            tcHeader[5].Text = "表头1-1"
;
38

39            tcHeader.Add(new
 TableHeaderCell());
40            tcHeader[6].Text = "表头2-1"
;
41

42            tcHeader.Add(new
 TableHeaderCell());
43            tcHeader[7].Text = "表头2-2"
;
44

45            tcHeader.Add(new
 TableHeaderCell());
46            tcHeader[8].Text = "表头3-1"
;
47

48            tcHeader.Add(new
 TableHeaderCell());
49            tcHeader[9].Text = "表头3-2"
;
50

51            tcHeader.Add(new
 TableHeaderCell());
52            tcHeader[10].Text = "表头3-3</th></tr><tr>"
;
53        }

54
55    }

你可能感兴趣的:(GridView)