asp.net GridView表头设计

最新推荐文章于 2025-06-12 16:17:56 发布
原创 最新推荐文章于 2025-06-12 16:17:56 发布 · 1.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在ASP.NET中使用GridView控件并自定义多级表头，通过在RowCreated事件中处理标题行，实现复杂数据展示。包括了前端代码配置和后端代码实现。

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

以上为最终实现效果

 

<asp:GridView ID="GridView1" ShowFooter="true" runat="server" Width="100%" AutoGenerateColumns="False"
                            BorderColor="#CCCCCC" BorderWidth="1px" AllowPaging="false" 
                            CellPadding="3" OnRowCreated="GridView1_RowCreated" 
                            onrowcommand="GridView1_RowCommand" onrowdatabound="GridView1_RowDataBound">
                            <Columns>
                                <asp:BoundField DataField="yf" HeaderText="月份">
                                    <HeaderStyle Height="50px" Width="10%" BorderWidth="1px" BackColor="#deecfd" Font-Bold="false"
                                        Font-Size="20px" Font-Names="宋体" />
                                    <ItemStyle BorderWidth="1px" HorizontalAlign="Center" />
                                </asp:BoundField>
                                <asp:BoundField DataField="xsgls" HeaderText="行驶里程">
                                    <HeaderStyle Height="50px" Width="7%" BorderWidth="1px" BackColor="#deecfd" Font-Bold="false"
                                        Font-Size="20px" Font-Names="宋体" />
                                    <ItemStyle BorderWidth="1px" HorizontalAlign="Center" />
                                </asp:BoundField>
                                <asp:BoundField DataField="ykjysl" HeaderText="油卡加油量（升）">
                                    <HeaderStyle Height="50px" Width="7%" BorderWidth="1px" BackColor="#deecfd" Font-Bold="false"
                                        Font-Size="20px" Font-Names="宋体" />
                                    <ItemStyle BorderWidth="1px" HorizontalAlign="Center" />
                                </asp:BoundField>
                                <asp:BoundField DataField="wykjysl" HeaderText="非油卡加油量（升）">
                                    <HeaderStyle Height="50px" Width="7%" BorderWidth="1px" BackColor="#deecfd" Font-Bold="false"
                                        Font-Size="20px" Font-Names="宋体" />
                                    <ItemStyle BorderWidth="1px" HorizontalAlign="Center" />
                                </asp:BoundField>
                                <asp:BoundField DataField="yhy" HeaderText="标准油耗">
                                    <HeaderStyle Height="50px" Width="7%" BorderWidth="1px" BackColor="#deecfd" Font-Bold="false"
                                        Font-Size="20px" Font-Names="宋体" />
                                    <ItemStyle BorderWidth="1px" HorizontalAlign="Center" />
                                </asp:BoundField>
                                <asp:BoundField DataField="pjyh" HeaderText="百公里油耗量">
                                    <HeaderStyle Height="50px" BorderWidth="1px" BackColor="#deecfd" Font-Bold="false"
                                        Font-Size="20px" Font-Names="宋体" />
                                    <ItemStyle BorderWidth="1px" HorizontalAlign="Center" />
                                </asp:BoundField>
                                <asp:BoundField DataField="ykjyje" HeaderText="油卡消费额">
                                    <HeaderStyle Height="50px" BorderWidth="1px" BackColor="#deecfd" Font-Bold="false"
                                        Font-Size="20px" Font-Names="宋体" />
                                    <ItemStyle BorderWidth="1px" HorizontalAlign="Center" />
                                </asp:BoundField>
                                <asp:BoundField DataField="wkjyje" HeaderText="非油卡消费额">
                                    <HeaderStyle Height="50px" BorderWidth="1px" BackColor="#deecfd" Font-Bold="false"
                                        Font-Size="20px" Font-Names="宋体" />
                                    <ItemStyle BorderWidth="1px" HorizontalAlign="Center" />
                                </asp:BoundField>
                                <asp:BoundField DataField="glf" HeaderText="ETC费">
                                    <HeaderStyle Height="50px" Width="7%" BorderWidth="1px" BackColor="#deecfd" Font-Bold="false"
                                        Font-Size="20px" Font-Names="宋体" />
                                    <ItemStyle BorderWidth="1px" HorizontalAlign="Center" />
                                </asp:BoundField>
                                <asp:BoundField DataField="tcf" HeaderText="停车费">
                                    <HeaderStyle Height="50px" Width="10%" BorderWidth="1px" BackColor="#deecfd" Font-Bold="false"
                                        Font-Size="20px" Font-Names="宋体" />
                                    <ItemStyle BorderWidth="1px" HorizontalAlign="Center" />
                                </asp:BoundField>
                                <asp:BoundField DataField="xcfy" HeaderText="洗车费">
                                    <HeaderStyle Height="50px" BorderWidth="1px" BackColor="#deecfd" Font-Bold="false"
                                        Font-Size="20px" Font-Names="宋体" />
                                    <ItemStyle BorderWidth="1px" HorizontalAlign="Center" />
                                </asp:BoundField>
                                <asp:BoundField DataField="xj" HeaderText="小计">
                                    <HeaderStyle Height="50px" BorderWidth="1px" BackColor="#deecfd" Font-Bold="false"
                                        Font-Size="20px" Font-Names="宋体" />
                                    <ItemStyle BorderWidth="1px" HorizontalAlign="Center" />
                                </asp:BoundField>
                                <asp:BoundField DataField="bz" HeaderText="备注">
                                    <HeaderStyle Height="50px" BorderWidth="1px" BackColor="#deecfd" Font-Bold="false"
                                        Font-Size="20px" Font-Names="宋体" />
                                    <ItemStyle BorderWidth="1px" HorizontalAlign="Center" />
                                </asp:BoundField>
                            </Columns>
                            <AlternatingRowStyle BackColor="#DBEEFD" Font-Names="宋体" />
                            <RowStyle BorderColor="#cccccc" Height="40px" Font-Size="16px" Font-Names="宋体" />
                            <FooterStyle BorderColor="#cccccc" HorizontalAlign="Center" ForeColor="Red" BackColor="SkyBlue"
                                BorderWidth="1px" Height="40px" Font-Size="16px" Font-Names="宋体" />
                            <EmptyDataTemplate>
                                <asp:Label ID="Label4" runat="server" Text="<font style='color:red;'>没有符合查询条件的数据！</font>"></asp:Label>
                            </EmptyDataTemplate>
                        </asp:GridView>

以上为前端代码

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
    {
        switch (e.Row.RowType)
        {
            case DataControlRowType.Header://行是标题行
                TableCellCollection personHeader = e.Row.Cells;//标题行的单元格集合
                personHeader.Clear();//清空

                //添加一个表头 比如以及表头有三列 那么序号就是 0 1 2 
                personHeader.Add(new TableHeaderCell());
                personHeader[0].Attributes.Add("colspan", "2"); //跨1列
                personHeader[0].Text = " ";

                personHeader.Add(new TableHeaderCell());
                personHeader[1].Attributes.Add("colspan", "4"); //跨3列
                personHeader[1].Text = "耗油量";

                personHeader.Add(new TableHeaderCell());
                personHeader[2].Attributes.Add("colspan", "2"); //跨3列
                personHeader[2].Text = "燃油费用";

                personHeader.Add(new TableHeaderCell());
                personHeader[3].Attributes.Add("colspan", "3"); //跨3列
                personHeader[3].Text = "ETC、停车费、洗车费";

                personHeader.Add(new TableHeaderCell());
                personHeader[4].Attributes.Add("rowspan", "2");
                personHeader[4].Text = "小计";

                personHeader.Add(new TableHeaderCell());
                personHeader[5].Attributes.Add("rowspan", "2");
                personHeader[5].Text = "备注</th></tr><tr>";


                //再添加一个表头
                personHeader.Add(new TableHeaderCell());
                personHeader[6].Text = "月份";
                personHeader.Add(new TableHeaderCell());
                personHeader[7].Text = "行驶里程";
                personHeader.Add(new TableHeaderCell());
                personHeader[8].Text = "油卡加油量(升)";
                personHeader.Add(new TableHeaderCell());
                personHeader[9].Text = "非油卡加油量(升)";
                personHeader.Add(new TableHeaderCell());
                personHeader[10].Text = "标准油耗";
                personHeader.Add(new TableHeaderCell());
                personHeader[11].Text = "百公里耗油量";
                personHeader.Add(new TableHeaderCell());
                personHeader[12].Text = "油卡消费金额";
                personHeader.Add(new TableHeaderCell());
                personHeader[13].Text = "非油卡消费金额";
                personHeader.Add(new TableHeaderCell());
                personHeader[14].Text = "ETC";
                personHeader.Add(new TableHeaderCell());
                personHeader[15].Text = "停车费";
                personHeader.Add(new TableHeaderCell());
                personHeader[16].Text = "洗车费";

                break;
        }
    }

以上为后台代码

 

思路是在数据绑定GridView创建行时将所有表头清空重新绘制，页面在转换为HTML代码时GridView会变为table，在添加多行表头时在每行的末尾增加</th></tr><tr>

 

 

Asp.net 2.0 自定义控件开发[创建自定义HeaderRow的GridView控件][示例代码下载]
★(ChengKing)【夜战鹰】【产品级性能调优与故障诊断分析】★
03-31 6469
 (一).  概述        1. 做了个GridViewExtend自定义控件, 通过注册扩展自定义表头事件,  可以任意设置Header的格式.        2. 易重用代码, 只要将ExtendGridView.dll 文件添加到项目引用即可.  实现原理：增加一个自定义事件，并将GridView头(HeaderRow)引用作为事件参数传递，使用时通过注册此事件来自定义
ASP.NET GridView 复合表头(带自动分页设置)
CherishTender的博客
10-25 1275
ASP.NET GridView 复合表头(带自动分页设置)由于项目的需求，需要一个复合表头。
ASP.NET-GridView之表头设计
diaoyu3131的博客
07-04 308
我们 见过许多网页呈现表格的 时候，表头的形式多种多样。下面来看看，怎么制定多样的表头吧。 效果显示： 需要在后台写一个方法，网页一加载在前端写个事件调用这个方法。 DEMO 前端 <span style="font-family:Microsoft YaHei;font-size:18px;"><asp:GridView I...
在.NET中实现动态列头与自定义多行合并表头的GridView
最新发布
weixin_35734408的博客
06-12 976
然而，默认列生成机制在某些场景下可能会带来不便。例如，开发者可能需要更精细地控制列的展示方式、顺序或者对列进行特殊的格式化处理。默认生成的列可能无法满足这样的需求，因为它们是按照数据源的结构自动生成的，而不是按照页面布局或用户界面的逻辑。禁用默认列生成机制后，开发者可以完全控制GridView的列头和数据绑定方式。这允许开发者根据具体的设计要求和用户体验来定制GridView的外观和行为。此外，这也为开发者提供了利用其他类型的列，如和，来实现更复杂的数据展示和交互提供了机会。
asp.net GridView多行表头的实现
Dr-远古的专栏
08-17 2204
方法一： 1 protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) 2 { 3 //判断创建的行是否为表头行 4 if (e.Row.RowType == DataControlRowType.Header) 5 { 6
ASP.net表格GridView表头显示表头、滚动条
xiaoyu812289718的专栏
10-16 1906
ASP.net表头显示表头、滚动条
ASP.NET固定GridView表头_SuperTables
03-27
ASP.NET固定GridView表头_SuperTables
标题中带有过滤器的ASP.NET Gridview
04-05
ASP.NET Gridview是一款非常强大的数据展示控件，广泛应用于Web应用程序中。在处理大量数据时，为了提高用户体验和数据管理效率，通常会引入过滤功能。本文将深入探讨如何在ASP.NET Gridview的标题行内实现过滤，以...
asp.net Gridview里添加汇总行
01-20
在ASP.NET开发中，GridView控件是一个非常常用的数据展示组件，它可以方便地显示数据库中的数据，并支持各种操作，如排序、分页、编辑等。在实际应用中，我们经常需要在GridView底部添加一个汇总行来展示数据的总和...
asp.net 锁定gridview首行、前几列
01-30
附详细使用说明，非常简单，解决问题直接了当。
asp.net实现固定GridView标题栏的方法(冻结列功能)
10-22
在*** Web Forms应用开发中，经常需要在网页上使用GridView控件来展示数据。为了提高用户体验，尤其是在处理大量数据展示的时候，经常会需要实现一种称为“冻结列”或“固定标题栏”的功能。这个功能可以使表格的...
如何让Gridview在没有数据的时候显示表头(asp.net)
czh4869623的专栏
07-21 1670
1．前言 当对GridView控件进行数据绑定时，如果绑定的记录为空，网页上就不显示GridView，造成页面部分空白，页面布局结构也受影响。下面讨论的方法可以让GridView在没有数据记录的时候显示表的字段结构和显示提示信息。 2．数据 为了让GridView显示数据，在数据库中建立表temple，其字段如下： temple表示庙宇，它的字段有： temple_id       in
Asp.net GridView 创建二维表头
大龄程序员
05-23 1503
protected void gv_hour_RowCreated(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.Header) { TableCellCollection tcHeader = e.Row.Ce
自定义Gridview的表头
lingxyd 的专栏
09-01 6625
    #region 自定义表头    protected void gvList_RowCreated(object sender, GridViewRowEventArgs e)    {        //判断创建的行是不是标题行         if (e.Row.RowType == DataControlRowType.Header)        {            Ta
ASP.NET 2.0 中动态添加 GridView 模板列的例子
热门推荐
【孟子E章】
09-13 1万+
 动态添加列，关键是实现 ITemplate.InstantiateIn 方法。下面是一个添加 GridView 模板列的例子。C#代码...@ Page Language="C#" %>...@ Import Namespace="System.Data" %>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
asp.net中GridView中动态多层表头的处理
weixin_30810583的博客
03-06 187
只需在GridView的RowCreated事件中加入以下代码，且数据源列头使用|划分表头层次关系，如[收入|A项],[收入|B项]，则会自动创建两层，且自动合并[收入]的单元格。 intlayerCount=0;//层数 TableCell[]oldCells; if(e.Row.RowType==DataCo...
ASP.NET GridView 分页模板及标题定制和加序号
FireGhost57的专栏
08-13 860
前台代码: <asp:GridView ID="GridView1" runat="server" width="100%" AllowPaging="True" PageSize="20" onrowdatabound="GridView1_RowDataBound" > 第页 共页
给 asp:GridView 添加title(ToolTip)属性
qq_15785207的博客
07-24 571
给每一行绑定数据时,给每一列添加title属性。title属性为HTML5中的属性 protected void exGridView_RowDataBound(object sender, GridViewRowEventArgs e) { for (int i = 0; i < e.Row.Cells.Count; i++)//获取总列数 ...
Asp.net中GridView使用介绍
mystonelxj的博客
09-06 533
原文：https://blog.csdn.net/zdhlwt2008/article/details/51395684 1.GridView简单代码分页排序： 1.AllowSorting设为True，aspx代码中是AllowSorting="True"； 2.默认1页10条，如果要修改每页条数，修改PageSize即可，在aspx代码中是PageSize="12"。 3.默认的是单向...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值