创建可滚动且具有固定标题的GridView

在开发Web应用程序时,开发者经常需要在页面上展示大量的数据。当这些数据需要在网页的一个小区域内展示时,就需要创建一个可滚动的GridView,并且确保即使在滚动时,标题栏也能保持在顶部可见。本文将指导如何在ASP.NET中实现这一功能。

技术要求

要实现这个功能,需要:

  • Visual Studio或类似的开发工具。
  • 数据源,可以是SQL Server数据库、XML文件或其他。本文以SQL Server数据库为例。
  • C#或VB.NET语言知识,用于将数据绑定到GridView以及编写一些简单的代码。本文使用C#。
  • 基础的HTML知识。
  • 基础的CSS知识。

创建GridView

将手动编写代码来创建GridView,而不是使用拖放概念。直接在ASPX页面中编写GridView的代码。

<asp:GridView ID="gvDistricts" runat="server" HeaderStyle-BackColor="YellowGreen" AutoGenerateColumns="false" AlternatingRowStyle-BackColor="WhiteSmoke" OnRowDataBound="gvDistricts_RowDataBound"> <Columns> <asp:TemplateField HeaderText="District ID" HeaderStyle-Width="80px" ItemStyle-Width="80px"> <ItemTemplate> <asp:Label ID="lblDistID" runat="server" Text='<%# Eval("DistID") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="District Name" HeaderStyle-Width="120px" ItemStyle-Width="120px"> <ItemTemplate> <asp:Label ID="lblDistName" runat="server" Text='<%# Eval("DistName") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Description" HeaderStyle-Width="200px" ItemStyle-Width="200px"> <ItemTemplate> <asp:Label ID="lblDistDesc" runat="server" Text='<%# Eval("DistDesc") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>

在上述代码中,设置了AutoGenerateColumns="false",这意味着GridView不会根据数据源的列自动生成列。还为标题和项设置了相同的宽度,以确保在应用固定标题样式时标题能够正确显示。

绑定数据

接下来,将编写后端代码,将数据绑定到GridView。

protected void Page_Load(object sender, EventArgs e) { string ConStr = "Data Source=localhost;Initial Catalog=ShikshaNet;Integrated Security=True"; if (!IsPostBack) { string Query = "SELECT * FROM Districts"; SqlConnection con = new SqlConnection(ConStr); SqlDataAdapter adp = new SqlDataAdapter(Query, con); DataTable dt = new DataTable(); adp.Fill(dt); gvDistricts.DataSource = dt.DefaultView; gvDistricts.DataBind(); } }

这段代码将从默认的SQL Server实例中获取数据,数据库名为ShikshaNet,使用Windows身份验证。

使GridView可滚动

现在已经设计了一个包含3列的GridView,并绑定了数据。接下来,将使其可滚动。在GridView的代码中添加一个style标签,并设置以下属性。

<asp:GridView ID="gvDistricts" runat="server" style="height:400px; overflow:auto" HeaderStyle-CssClass="FixedHeader" HeaderStyle-BackColor="YellowGreen" AutoGenerateColumns="false" AlternatingRowStyle-BackColor="WhiteSmoke" OnRowDataBound="gvDistricts_RowDataBound">

可以将overflow:auto更改为overflow:scroll,但这将始终显示垂直滚动条和水平滚动条。上述设置仅在GridView的高度超过指定高度时显示垂直滚动条。

固定标题

现在数据已经加载,GridView显示正常,并且可以在页面上滚动。现在是时候解决另一个问题了:在滚动时标题不显示。可以通过应用以下CSS属性来解决这个问题。

<style type="text/css"> .FixedHeader { position: sticky; top: 0; background-color: YellowGreen; z-index: 1000; } </style>

将这个类应用到GridView的标题样式中。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485