GridView合并表头单元格

本文介绍了如何在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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值