使用 Google Analytics 功能改进 GridView 的排序功能

• 下载源代码并查看原文

作者网站： http://www.sqlnetframework.com

引言 - Google Analytics ASP.NET Grid 列排序

在接下来的文章中，您将学习如何改进 ASP.NET GridView 的列排序功能，为用户提供更好的视觉体验。Google Analytics ASP.NET Grid 列排序将指示排序顺序方向（升序或降序），并将高亮显示用于排序的 GridView 列。

Google Analytics ASP.NET Grid 系列

Google Analytics ASP.NET Grid 系列将向您展示如何创建一个 ASP.NET Grid，重现 Google Analytics 网站上显示的 Grid 的外观和行为。

• 第一部分：扩展 ASP.NET DataPager：创建 Google Analytics Data Pager
• 第二部分：Google Analytics ASP.NET Grid 计数器：对 ASP.NET Grid 中的行项进行编号
• 第三部分：Google Analytics ASP.NET Grid 排序列：通过排序顺序指示器（升序、降序）增强您的 GridView ，并高亮显示用于排序的 GridView 列

改进 ASP.NET GridView 排序功能

我们中的许多人都使用 ASP.NET GridView Web 控件来显示信息。GridView Web 控件中最常用的功能之一就是 GridView 排序。GridView 排序允许我们使用 GridView 顶部显示的列名来排序 GridView 中的信息。

默认 GridView 排序功能

如果您正在使用 GridView Web 控件并希望启用 GridView 排序功能，则需要将 GridView 的 AllowSorting 属性设置为 true 。

现在，当 GridView 排序功能启用后，GridView Web 控件将为每个列标题显示一个链接。当用户单击列标题中的链接时，GridView 中显示的信息将根据 GridView 列中定义的 SortExpression 进行排序。

默认 GridView 排序方向

第一次单击列标题时，GridView 排序方向为升序（A、B、C 等），第二次单击同一个列标题时，GridView 排序方向将更改为降序（C、B、A 等）。

实现类似 Google Analytics 的 GridView 排序

Google Analytics Grid 具有一些有趣的特性，可以在任何使用 GridView 显示和排序信息的 ASP.NET 项目中实现。我们将要实现的第一个 GridView 排序功能是显示一个图像来通知用户 GridView 的排序方向：升序或降序。第二个功能是高亮显示选定的 GridView 列的标题和每一行，以便用户轻松知道是哪个 GridView 列用于排序。

使用图像显示 GridView 排序方向

当用户单击 GridView 列标题进行排序时，将在 GridView 列标题中显示一个图像，以通知用户 GridView 的排序方向。为了显示图像，我们将检查当前列标题是否被单击用于排序，如果是，我们将检查 GridView 的排序方向：升序或降序。根据是否单击了 GridView 列标题，我们将选择要应用的 CSS 样式。

高亮显示 GridView 排序列

当用户单击 GridView 列标题进行排序时，将高亮显示所有 GridView 列，包括列标题和行。为了高亮显示行项，我们将检查该行项是否位于单击用于排序的 GridView 列标题下方。

如何在我的 ASP.NET Web 项目中使用新的 GridView 排序功能？

您只需在 GridView Web 控件的 Columns 集合中添加一个 GoogleAnalyticsGridViewColumnSortField 。

SortedColumnCssClass 和 ColumnCssClass 属性分别指定了当 GridView 列被单击用于排序时以及当 GridView 列处于正常状态未被选中时要应用于 GridView 列的 CSS 样式。您至少需要为 SortedColumnCssClass 属性指定一个值。最后，您需要创建一个样式表来创建用于渲染 GridView 的样式项。

用于排序的 GridView 列的样式

如果将值 "googleAnalyticsSortedColumn" 分配给 GoogleAnalyticsGridViewColumnSortField 类的 SortedColumnCssClass 属性，那么您需要创建下面显示的样式项。

用于正常 GridView 列的样式

如果将值 "googleAnalyticsColumn" 分配给 GoogleAnalyticsGridViewColumnSortField 类的 ColumnCssClass 属性，那么您需要创建下面显示的样式项。

结论

现在，只需将 GoogleAnalyticsGridViewColumnSortField 项包含在 GridView Web 控件的 Columns 集合中，您就可以为 GridView 获得更好的排序功能。要修改 GridView 的外观，只需编辑与 GridView Web 控件关联的 CSS 样式表文件即可。下载 Google Analytics ASP.NET Grid Sort Column 代码，了解如何轻松使用新的 GridView 排序功能。

历史

• 2008年5月12日：初始发布