多行表头合并, 网上很多实例, 这里写的很详细, 力求让每个人都能看懂.
实现原理: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
}
1、这里先介绍单纯的GridView多表头合并，先上图：
可以看到，上图就是生成的多表头，具体的后台代码是在Row_Created事件中创建的。先看创建代码：
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 ; } }
需要说明的是，如果想实现多表头，得自己绘制tablecell，具体的方式就是先添加一个新的TableHeaderCell，然后就是设定其Attributes属性，再者如果要进行单元格合并，那么需要指定其colspan或者是rowspan，以便确定是横向合并还是竖向合并。
前台代码如下：
< 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 >
1、这里先介绍单纯的GridView多表头合并，先上图：
可以看到，上图就是生成的多表头，具体的后台代码是在Row_Created事件中创建的。先看创建代码：
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 ; } }
需要说明的是，如果想实现多表头，得自己绘制tablecell，具体的方式就是先添加一个新的TableHeaderCell，然后就是设定其Attributes属性，再者如果要进行单元格合并，那么需要指定其colspan或者是rowspan，以便确定是横向合并还是竖向合并。
前台代码如下：
< 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 >
79
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
