您的位置: 首页  >  文章  >  gridview 表头合并

gridview 表头合并

分类: 文章 • 2023-11-11 18:06:16

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

实现原理: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 表头合并








															

																					

								

									相关推荐