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 | |
1
protected 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
}
protected 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
}


浙公网安备 33010602011771号