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    }

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>