GridView合并表头单元格

原创于 2019-07-10 22:09:10 发布 · 651 阅读

0 ·

CC 4.0 BY-SA版权

ASP 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在ASP项目的GridView控件中实现表头单元格的合并。通过设置前台OnRowCreated事件及后台代码，调整RowSpan和ColumnSpan属性，可以创建出类似Excel的合并表头效果。参考链接指向了详细步骤的文章。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在ASP项目中拖入GridView控件的默认样式是：
在这里插入图片描述
如果我们要实现表头单元格合并，即下图这种形式，那么就需要在前台和后台都进行相关的设置。
表头合并后截图
在前台最主要的是为GridView设置OnRowCreated事件。
前台代码：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"  OnRowCreated="Merge_Header" >
  <Columns>
      <asp:BoundField HeaderText="客房编号" DataField="Rid" />
      <asp:ImageField DataImageUrlField="RimageUrl" HeaderText="客房图片" DataImageUrlFormatString="./images/{0}">
         <ControlStyle Width="200px" Height="100px"></ControlStyle>
      </asp:ImageField>
      <asp:BoundField HeaderText="类型编号" DataField="RtypeId"></asp:BoundField>
      <asp:BoundField HeaderText="客房类型" DataField="Ttype"></asp:BoundField>
      <asp:BoundField HeaderText="床位数量" DataField="TbedNum" ></asp:BoundField>
      <asp:BoundField DataField="TairConditioning" HeaderText="空调" ></asp:BoundField>
      <asp:BoundField DataField="Ttelevision" HeaderText="电视机"></asp:BoundField>
      <asp:BoundField DataField="ThairDrier" HeaderText="电吹风" ></asp:BoundField>
      <asp:BoundField DataField="Tlandline" HeaderText="电话" ></asp:BoundField>
      <asp:BoundField DataField="Twifi" HeaderText="WIFI" > </asp:BoundField>
      <asp:BoundField HeaderText="每晚价格" DataField="Rprice" ></asp:BoundField>
      <asp:BoundField HeaderText="客房总数" DataField="Rnumber" ></asp:BoundField>                   
      <asp:BoundField HeaderText="备注" DataField="Rremark" ></asp:BoundField>
      <asp:BoundField HeaderText="空房数量" DataField="RvacantNum" ></asp:BoundField>                                          
  </Columns>         
</asp:GridView>

上述前台代码设置了OnRowCreated="Merge_Header"后，就要在后台添加Merge_Header方法并进行表头设置。
后台代码：

 protected void Merge_Header(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.Header)
            {
                TableCellCollection tcHeader = e.Row.Cells;
                //清除自动生成的表头
                tcHeader.Clear();

                tcHeader.Add(new TableHeaderCell());
                tcHeader[0].RowSpan = 2;
                tcHeader[0].Text = "客房编号";

                tcHeader.Add(new TableHeaderCell());
                tcHeader[1].RowSpan = 2;
                tcHeader[1].Text = "客房图片";

                tcHeader.Add(new TableHeaderCell());
                tcHeader[2].RowSpan = 2;
                tcHeader[2].Text = "类型编号";

                tcHeader.Add(new TableHeaderCell());
                tcHeader[3].RowSpan = 2;
                tcHeader[3].Text = "客房类型";

                tcHeader.Add(new TableHeaderCell());
                tcHeader[4].RowSpan = 2;
                tcHeader[4].Text = "床位数量";

                tcHeader.Add(new TableHeaderCell());
                tcHeader[5].ColumnSpan = 5;
                tcHeader[5].Text = "客房配置";

                tcHeader.Add(new TableHeaderCell());
                tcHeader[6].RowSpan = 2;
                tcHeader[6].Text = "每晚价格";

                tcHeader.Add(new TableHeaderCell());
                tcHeader[7].RowSpan = 2;
                tcHeader[7].Text = "客房总量";

                tcHeader.Add(new TableHeaderCell());
                tcHeader[8].RowSpan = 2;
                tcHeader[8].Text = "备注";

                tcHeader.Add(new TableHeaderCell());
                tcHeader[9].RowSpan = 2;
                tcHeader[9].Text = "空房数量</th></tr><tr>";

                tcHeader.Add(new TableHeaderCell());
                tcHeader[10].Text = "空调";
                tcHeader.Add(new TableHeaderCell());
                tcHeader[11].Text = "电视机";
                tcHeader.Add(new TableHeaderCell());
                tcHeader[12].Text = "电吹风";
                tcHeader.Add(new TableHeaderCell());
                tcHeader[13].Text = "电话";
                tcHeader.Add(new TableHeaderCell());
                tcHeader[14].Text = "WIFI";

                //设置表头样式
                for (int i = 0; i < 15; i++)
                {
                    tcHeader[i].BackColor = System.Drawing.Color.Blue; //表头背景色
                    tcHeader[i].ForeColor = System.Drawing.Color.White; //表头前景色
                    tcHeader[i].BorderWidth = 3; //表头边框线宽
                }
            }
        }

上述代码中设置RowSpan的值意味着合并几行，设置ColumnSpan的值意味着合并几列。
注意：表头最后一个单元格需要添加</th></tr><tr>
我参考的是这篇文章：https://www.cnblogs.com/diaodiaop/archive/2012/04/25/2469734.html