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
    }
复制代码
~~~~~~~~曾华生的博客文章~~~~~~~~~~


本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/archive/2012/03/27/2419864.html,如需转载请自行联系原作者
目录
相关文章
|
6月前
|
JavaScript 前端开发 Java
72jqGrid 分组表头 - 有合并列的样式
72jqGrid 分组表头 - 有合并列的样式
35 0
|
1月前
表格的表头
表格的表头。
18 0
|
4月前
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
|
10月前
element plus表格的表头和内容居中
element plus表格的表头和内容居中
193 0
|
6月前
|
JavaScript 前端开发 Java
71jqGrid 分组表头 - 没有合并列的样式
71jqGrid 分组表头 - 没有合并列的样式
16 0
jqgrid实现表头合并功能
jqgrid实现表头合并功能
311 0
html+css实战28-表格标题和表头单元格
html+css实战28-表格标题和表头单元格
124 0
html+css实战28-表格标题和表头单元格
|
API
element ui 表格表头与表体不对齐问题
表格以el-dialog模态弹框的形式出现当表格出现滚动条首次会遇到表格表头与表体有不对齐问题
631 0
|
C#
C# ListBox实现显示插入最新的数据的方法
原文:C# ListBox实现显示插入最新的数据的方法 在我们使用ListBox控件时,如果我们在里面不断的添加一条条数据,但是在我们添加的数据过多超过了ListBox显示的窗口时(此时会产生滑动条), 发现我们无法看到最新添加的数据。
1679 0
|
JavaScript 前端开发