一个非常漂亮且完整的自定义 GridView 分页器

• 下载源文件 - 6.0 KB
• 下载演示 - 5.96 KB

引言

GridView 控件的 v.2.0 版本允许我们通过 PagerTemplate 模板来集成自定义分页控件。预置的模式（Numeric、NextPrev 等）被证明是极度不足的，尤其是在有大量数据行跨越多个页面的情况下。

在本文中，我将向您展示如何实现并使用一个非常漂亮的自定义分页器，名为FullGridPager，它具备全套功能。

• 首页、上一页、下一页和尾页链接。这些链接很智能：当在第一页时，首页和上一页链接会被隐藏；当在最后一页时，下一页和尾页链接会被隐藏。
• 页码计数器，显示当前选中的页码和总页数。
• 页码分组。默认行为是立即显示所有可用的页码链接。当这不方便甚至不可接受时（例如，在帖子跨越数百页的论坛主题中），您可以设置 MaxVisiblePageNumbers 属性来将链接分组显示。上一页和下一页链接会受到影响，并在需要时自动移至前一组或下一组。此外，还会显示一个包含可用组的 DropDownList。这样，您只需一次鼠标点击即可在页码组之间切换。

图 1 展示了一个功能齐全的 FullGridPager。下方图 2 和图 3 也可以参考。

运行代码所需的文件

除了实现类（FullGridPager.cs，位于 App_Code 文件夹中）之外，还需要以下文件来为自定义分页器提供美观的样式和外观。

• FullGridPager.css：HTML 分页模板使用的样式。
• Images 文件夹：包含首页、上一页、下一页和尾页链接的图像。

我还包含了一个测试用的 ASPX 网页，以演示 FullGridPager 类的用法。

• Default.aspx：包含一个数据绑定的 GridView 控件，带有自定义的 PagerTemplate 和 SqlDataSource。使用 Northwind 数据库检索数据。
• Default.aspx.cs：C# 后台代码。

使用代码

步骤 1。将必要 HTML 代码复制并粘贴到 GridView 控件的 PagerTemplate 中。HTML 代码可以在压缩的 Default.aspx 文件中找到。请确保保留 ID 值。另外，不要忘记将 FullGridPager.css 链接到您的网页。

步骤 2。将 FullGridPager.cs 复制到您的 Web 项目的 App_Code 文件夹中。确保 FullGridPager.css 和图像文件也可用。

步骤 3。在 Web 窗体的代码后台中添加以下代码（代码可以在压缩的 Default.aspx.cs 文件中找到）。

using dpant;

public partial class _Default : System.Web.UI.Page 
{

    protected FullGridPager fullGridPager;
    protected int MaxVisible = 5;
     
    protected void Page_Load(object sender, EventArgs e)
    {
      if (IsPostBack)
      {
        fullGridPager = new FullGridPager(GridView1, MaxVisible, 
                            "Page", "of");
        fullGridPager.CreateCustomPager(GridView1.BottomPagerRow);
      }
    }

    protected void GridView1_DataBound(object sender, EventArgs e)
    {
      if (fullGridPager == null)
        fullGridPager = new FullGridPager(GridView1, MaxVisible, "Page", "of");
      fullGridPager.CreateCustomPager(GridView1.BottomPagerRow);
      fullGridPager.PageGroups(GridView1.BottomPagerRow);
    }

    protected void ddlPageGroups_SelectedIndexChanged(object sender, EventArgs e)
    {
      if (fullGridPager == null)
        fullGridPager = new FullGridPager(GridView1, MaxVisible, 
                            "Page", "of");
      fullGridPager.PageGroupChanged(GridView1.BottomPagerRow);
    }

}

在回发时，必须调用 CreateCustomPager 方法。这样，动态生成的 LinkButton 控件才能被重新创建并触发其事件。另一方面，PageGroups 方法仅在 Grid 的数据绑定期间被调用，因为 ddlPageGroups DropDownList 是一个设计时控件（请参见 HTML 模板代码）。

FullGridPager 类

FullGridPager 类公开了以下公共属性：

• MaxVisiblePageNumbers：每组显示的页码链接数量。
• PageCounterText、PageCounterTotalText：用于本地化页码计数器的文本。
• TheGrid：要应用的目标 GridView 控件。

可用的构造函数有：

• FullGridPager (GridView TheGrid)：默认行为构造函数。
• FullGridPager (GridView TheGrid, int MaxVisible, string CounterText, string TotalText)：用于更改默认设置的构造函数。

公共方法:

• CreateCustomPager (GridViewRow PagerRow)：渲染分页器。
• PageGroups (GridViewRow PagerRow)：渲染页码分组的下拉列表。
• PageGroupChanged (GridViewRow PagerRow)：ddlPageGroups_SelectedIndexChanged 事件必须调用此方法来在页码组之间切换。

关注点

在本文中，您还将学习如何：

• 在 GridView 控件的 PagerTemplate 模板中创建和使用动态 LinkButton 控件。
• 正确地重新创建动态控件，以便在回发期间触发它们的事件。

特别是，请注意 LinkButton 是如何在运行时创建的。

private void CreatePageNumbers(HtmlTable pagerInnerTable, int insertCellPosition)
{
  for (int i = firstPageNumber, pos = 1; i <= lastPageNumber; i++, pos++)
  {
     // Create a new table cell for every data page number.

     HtmlTableCell tableCell = new HtmlTableCell();
     if (theGrid.PageIndex == i - 1)
        tableCell.Attributes.Add("class", "pageCurrentNumber");
     else
        tableCell.Attributes.Add("class", "pagePrevNextNumber");
     // Create a new LinkButton for every data page number.

     LinkButton lnkPage = new LinkButton();
     lnkPage.ID = "Page" + i.ToString();
     lnkPage.Text = i.ToString();
     lnkPage.CommandName = "Page";
     lnkPage.CommandArgument = i.ToString();
     lnkPage.CssClass = "pagerLink";
     // Place link inside the table cell; Add the cell to the table row.

     tableCell.Controls.Add(lnkPage);            
     pagerInnerTable.Rows[0].Cells.Insert(insertCellPosition + pos, tableCell);
  }
}

进一步发展

我非常希望看到这个功能实现为一个 Web 控件。任何在创建 Web 控件类方面经验更丰富的人都欢迎尝试（并告知我 ;) ）