GridView自定义分页样式

扩展GridView控件:
自定义分页样式。显示总记录数、每页记录数、当前页数、总页数、首页、上一页、下一页、末页和分页按钮

使用方法(设置CustomPagerSettings复合属性):
PagingMode - 自定义分页的显示模式
TextFormat - 自定义分页的文本显示样式(四个占位符:{0}-每页显示记录数;{1}-总记录数;{2}-当前页数;{3}-总页数)


关键代码
 using System;
 using System.Collections.Generic;
 using System.Text;
 
 using System.Web.UI.WebControls;
 using System.Web.UI;
 using System.ComponentModel;
 using System.Collections;
 using System.Data;
 using System.Web.UI.HtmlControls;
 
 namespace YYControls.SmartGridViewFunction
  {
      /// <summary>
     /// 扩展功能:自定义分页样式
     /// </summary>
     public class CustomPagerSettingsFunction : ExtendFunction
      {
          /// <summary>
         /// 构造函数
         /// </summary>
         public CustomPagerSettingsFunction()
             : base()
          {
 
         }
 
          /// <summary>
         /// 构造函数
         /// </summary>
         /// <param name="sgv">SmartGridView对象</param>
         public CustomPagerSettingsFunction(SmartGridView sgv)
             : base(sgv)
          {
    
         }
 
          /// <summary>
         /// 扩展功能的实现
         /// </summary>
         protected override void Execute()
          {
             this._sgv.InitPager += new SmartGridView.InitPagerHandler(_sgv_InitPager);
         }
 
          /// <summary>
         /// SmartGridView的InitPager事件
         /// </summary>
         /// <param name="sender"></param>
         /// <param name="row">一个 System.Web.UI.WebControls.GridViewRow,表示要初始化的页导航行</param>
         /// <param name="columnSpan">页导航行应跨越的列数</param>
         /// <param name="pagedDataSource">一个 System.Web.UI.WebControls.PagedDataSource,表示数据源</param>
         void _sgv_InitPager(object sender, GridViewRow row, int columnSpan, PagedDataSource pagedDataSource)
          {
             int recordCount = pagedDataSource.DataSourceCount;
 
             LinkButton First = new LinkButton();
             LinkButton Prev = new LinkButton();
             LinkButton Next = new LinkButton();
             LinkButton Last = new LinkButton();
 
             TableCell tc = new TableCell();
 
             row.Controls.Clear();
 
             tc.Controls.Add(new LiteralControl("&nbsp"));
 
              显示总记录数 每页记录数 当前页数/总页数
 
              设置“首页 上一页 下一页 末页”按钮
 
              添加首页,上一页按钮
 
              显示数字分页按钮
 
              添加下一页,末页按钮
 
             tc.Controls.Add(new LiteralControl("&nbsp"));
 
             tc.ColumnSpan = this._sgv.Columns.Count;
 
             row.Controls.Add(tc);       
         }
     }
 }
 

/*正式版的实现 结束*/

/*测试版的实现 开始*/

介绍
用着GridView自带的分页样式总觉得不太习惯,我们可以在PagerTemplate中来写一些自定义的样式,但是也挺麻烦的,其实我们可以扩展一下GridView,给它再增加一种分页样式


控件开发
1、新建一个继承自GridView的类。
  /// <summary>
 /// 继承自GridView
 /// </summary>
 [ToolboxData(@"<{0}:SmartGridView runat='server'></{0}:SmartGridView>")]
 public class SmartGridView : GridView
  {
 }

2、新建一个Paging类,定义一个分页样式的枚举
 using System;
 using System.Collections.Generic;
 using System.Text;
 
 using System.ComponentModel;
 
 namespace YYControls.SmartGridView
  {
      /// <summary>
     /// 自定义分页相关
     /// </summary>
     public class Paging
      {
          /// <summary>
         /// 自定义分页样式
         /// </summary>
         public enum PagingStyleCollection
          {
              /// <summary>
             /// 不用自定义分页样式
             /// </summary>
             None,
              /// <summary>
             /// 默认自定义分页样式
             /// </summary>
             Default
         }
     }
 }
 

3、在继承自GridView的类中加一个上面定义的枚举属性
         private Paging.PagingStyleCollection _pagingStyle;
          /// <summary>
         /// 自定义分页样式
         /// </summary>
         [Description("自定义分页样式"), DefaultValue(""), Category("扩展")]
         public Paging.PagingStyleCollection PagingStyle
          {
              get { return _pagingStyle; }
              set { _pagingStyle = value; }
         }

4、如果GridView使用的是数据源控件的话,计算总记录数
          /// <summary>
         /// OnLoad
         /// </summary>
         /// <param name="e"></param>
         protected override void OnLoad(EventArgs e)
          {
             // 查找ObjectDataSource
             ObjectDataSource ods = Parent.FindControl(this.DataSourceID) as ObjectDataSource;
             if (ods != null)
              {
                 ods.Selected += new ObjectDataSourceStatusEventHandler(ods_Selected);
             }
 
             base.OnLoad(e);
         }
 
         private int? _recordCount = null;
          /// <summary>
         /// 计算总记录数
         /// </summary>
         /// <param name="sender"></param>
         /// <param name="e"></param>
         private void ods_Selected(object sender, ObjectDataSourceStatusEventArgs e)
          {
             if (e.ReturnValue is IListSource)
              {
                 _recordCount = ((IListSource)e.ReturnValue).GetList().Count;
             }
         }

5、重写OnRowCreated以实现自定义分页样式
          /// <summary>
         /// OnRowCreated
         /// </summary>
         /// <param name="e"></param>
         protected override void OnRowCreated(GridViewRowEventArgs e)
          {
             if (e.Row.RowType == DataControlRowType.Pager && PagingStyle == Paging.PagingStyleCollection.Default)
              {
                 LinkButton First = new LinkButton();
                 LinkButton Prev = new LinkButton();
                 LinkButton Next = new LinkButton();
                 LinkButton Last = new LinkButton();
 
                 TableCell tc = new TableCell();
 
                 e.Row.Controls.Clear();
                
                 tc.Controls.Add(new LiteralControl("&nbsp;&nbsp;"));
                 if (_recordCount.HasValue)
                  {
                     tc.Controls.Add(new LiteralControl(_recordCount.ToString()));
                     tc.Controls.Add(new LiteralControl("&nbsp;&nbsp;"));
                     tc.Controls.Add(new LiteralControl(PageSize.ToString()));
                     tc.Controls.Add(new LiteralControl("&nbsp;&nbsp;"));
                 }
                 tc.Controls.Add(new LiteralControl((PageIndex + 1).ToString()));
                 tc.Controls.Add(new LiteralControl("/"));
                 tc.Controls.Add(new LiteralControl(PageCount.ToString()));
                 tc.Controls.Add(new LiteralControl("&nbsp;&nbsp;&nbsp;&nbsp;"));
 
                 if (!String.IsNullOrEmpty(PagerSettings.FirstPageImageUrl))
                  {
                     First.Text = "<img src='" + ResolveUrl(PagerSettings.FirstPageImageUrl) + "' border='0'/>";
                 }
                 else
                  {
                     First.Text = PagerSettings.FirstPageText;
                 }
                 First.CommandName = "Page";
                 First.CommandArgument = "First";
                 First.Font.Underline = false;
 
                 if (!String.IsNullOrEmpty(PagerSettings.PreviousPageImageUrl))
                  {
                     Prev.Text = "<img src='" + ResolveUrl(PagerSettings.PreviousPageImageUrl) + "' border='0'/>";
                 }
                 else
                  {
                     Prev.Text = PagerSettings.PreviousPageText;
                 }
                 Prev.CommandName = "Page";
                 Prev.CommandArgument = "Prev";
                 Prev.Font.Underline = false;
 
 
                 if (!String.IsNullOrEmpty(PagerSettings.NextPageImageUrl))
                  {
                     Next.Text = "<img src='" + ResolveUrl(PagerSettings.NextPageImageUrl) + "' border='0'/>";
                 }
                 else
                  {
                     Next.Text = PagerSettings.NextPageText;
                 }
                 Next.CommandName = "Page";
                 Next.CommandArgument = "Next";
                 Next.Font.Underline = false;
 
                 if (!String.IsNullOrEmpty(PagerSettings.LastPageImageUrl))
                  {
                     Last.Text = "<img src='" + ResolveUrl(PagerSettings.LastPageImageUrl) + "' border='0'/>";
                 }
                 else
                  {
                     Last.Text = PagerSettings.LastPageText;
                 }
                 Last.CommandName = "Page";
                 Last.CommandArgument = "Last";
                 Last.Font.Underline = false;
 
                 if (this.PageIndex <= 0)
                  {
                     First.Enabled = Prev.Enabled = false;
                 }
                 else
                  {
                     First.Enabled = Prev.Enabled = true;
                 }
 
                 tc.Controls.Add(First);
                 tc.Controls.Add(new LiteralControl("&nbsp;&nbsp;"));
                 tc.Controls.Add(Prev);
                 tc.Controls.Add(new LiteralControl("&nbsp;&nbsp;"));
 
                 // 当前页左边显示的数字分页按钮的数量
                 int rightCount = (int)(PagerSettings.PageButtonCount / 2);
                 // 当前页右边显示的数字分页按钮的数量
                 int leftCount = PagerSettings.PageButtonCount % 2 == 0 ? rightCount - 1 : rightCount;
                 for (int i = 0; i < PageCount; i++)
                  {
                     if (PageCount > PagerSettings.PageButtonCount)
                      {
                         if (i < PageIndex - leftCount && PageCount - 1 - i > PagerSettings.PageButtonCount - 1)
                          {
                             continue;
                         }
                         else if (i > PageIndex + rightCount && i > PagerSettings.PageButtonCount - 1)
                          {
                             continue;
                         }
                     }
 
                     if (i == PageIndex)
                      {
                         tc.Controls.Add(new LiteralControl("<span style='color:red;font-weight:bold'>" + (i + 1).ToString() + "</span>"));
                     }
                     else
                      {
                         LinkButton lb = new LinkButton();
                         lb.Text = (i + 1).ToString();
                         lb.CommandName = "Page";
                         lb.CommandArgument = (i + 1).ToString();
 
                         tc.Controls.Add(lb);
                     }
 
                     tc.Controls.Add(new LiteralControl("&nbsp;&nbsp;"));
                 }
 
                 if (this.PageIndex >= PageCount - 1)
                  {
                     Next.Enabled = Last.Enabled = false;
                 }
                 else
                  {
                     Next.Enabled = Last.Enabled = true;
                 }
                 tc.Controls.Add(Next);
                 tc.Controls.Add(new LiteralControl("&nbsp;&nbsp;"));
                 tc.Controls.Add(Last);
                 tc.Controls.Add(new LiteralControl("&nbsp;&nbsp;"));
 
                 tc.ColumnSpan = this.Columns.Count;
                 e.Row.Controls.Add(tc);
             }
 
             base.OnRowCreated(e);
         }
 


控件使用
添加这个控件到工具箱里,然后拖拽到webform上,设置PagingStyle属性为Default,同时设置GridView的原有属性PageButtonCount,FirstPageText,PreviousPageText,NextPageText,LastPageText,FirstPageImageUrl,PreviousPageImageUrl,NextPageImageUrl,LastPageImageUrl
ObjData.cs
 using System;
 using System.Data;
 using System.Configuration;
 using System.Web;
 using System.Web.Security;
 using System.Web.UI;
 using System.Web.UI.WebControls;
 using System.Web.UI.WebControls.WebParts;
 using System.Web.UI.HtmlControls;
 
 using System.ComponentModel;
 
  /// <summary>
 /// OjbData 的摘要说明
 /// </summary>
 public class OjbData
  {
     public OjbData()
      {
         //
         // TODO: 在此处添加构造函数逻辑
         //
     }
 
     [DataObjectMethod(DataObjectMethodType.Select, true)]
     public DataTable Select()
      {
         DataTable dt = new DataTable();
         dt.Columns.Add("no", typeof(string));
         dt.Columns.Add("name", typeof(string));
 
         for (int i = 0; i < 30; i++)
          {
             DataRow dr = dt.NewRow();
             dr[0] = "no" + i.ToString().PadLeft(2, '0');
             dr[1] = "name" + i.ToString().PadLeft(2, '0');
 
             dt.Rows.Add(dr);
         }
 
         return dt;
     }
 }
 

Default.aspx
  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
     <title>SmartGridView测试</title>
 </head>
 <body>
     <form id="form1" runat="server">
         <div>
             <yyc:SmartGridView ID="SmartGridView1" runat="server" DataSourceID="ObjectDataSource1"
                 AutoGenerateColumns="False" AllowPaging="true" PagingStyle="Default">
                 <Columns>
                     <asp:BoundField DataField="no" HeaderText="序号" SortExpression="no" ItemStyle-Width="100px" />
                     <asp:BoundField DataField="name" HeaderText="名称" SortExpression="name" ItemStyle-Width="100px" />
                     <asp:BoundField DataField="no" HeaderText="序号" SortExpression="no" ItemStyle-Width="100px" />
                     <asp:BoundField DataField="name" HeaderText="名称" SortExpression="name" ItemStyle-Width="100px" />
                     <asp:BoundField DataField="no" HeaderText="序号" SortExpression="no" ItemStyle-Width="100px" />
                     <asp:BoundField DataField="name" HeaderText="名称" SortExpression="name" ItemStyle-Width="100px" />
                 </Columns>
             </yyc:SmartGridView>
             <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="Select"
                 TypeName="OjbData"></asp:ObjectDataSource>
         </div>
     </form>
 </body>
 </html>


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/lovegod12/archive/2009/04/27/4128415.aspx

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
GridView是一个非常常用的ASP.NET控件,它可以方便地呈现数据,并且支持分页功能。在GridView中,可以使用内置的分页样式,也可以自定义分页样式。下面我将介绍两种自定义分页样式。 1. 自定义分页样式一:使用自定义模板 GridView提供了一个PagerTemplate属性,可以使用这个属性来自定义分页模板。下面是一个简单的例子: ```html <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnPageIndexChanging="GridView1_PageIndexChanging"> <Columns> <asp:BoundField DataField="ID" HeaderText="ID" /> <asp:BoundField DataField="Name" HeaderText="Name" /> <asp:BoundField DataField="Age" HeaderText="Age" /> </Columns> <PagerTemplate> <div class="pagination"> <span>共<%# GridView1.PageCount %>页,当前第<%# GridView1.PageIndex+1 %>页</span> <ul> <li><a href="#" onclick="javascript:__doPostBack('GridView1','Page', '<%= GridView1.PageIndex-1 %>')">上一页</a></li> <% for (int i = 0; i < GridView1.PageCount; i++) { %> <li <% if (GridView1.PageIndex == i) { %>class="active"<% } %>><a href="#" onclick="javascript:__doPostBack('GridView1','Page', '<%= i %>')"><%= i+1 %></a></li> <% } %> <li><a href="#" onclick="javascript:__doPostBack('GridView1','Page', '<%= GridView1.PageIndex+1 %>')">下一页</a></li> </ul> </div> </PagerTemplate> </asp:GridView> ``` 在这个例子中,我们使用PagerTemplate属性定义了一个分页模板。该模板包含一个div元素,用于包含分页控件。在div元素中,我们使用了一些HTML代码和ASP.NET表达式来生成分页控件。 在分页控件中,我们使用了一个ul元素和一些li元素来呈现页码。在每个li元素中,我们使用了一个a元素和一个onclick事件来触发GridView分页功能。在onclick事件中,我们使用了一个__doPostBack函数来向服务器发送分页请求,并且传递了两个参数:GridView的ID和分页索引。 2. 自定义分页样式二:使用第三方分页插件 除了使用自定义模板之外,我们还可以使用第三方分页插件来自定义GridView分页样式。下面是一个使用Bootstrap Paginator插件的例子: ```html <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnPageIndexChanging="GridView1_PageIndexChanging"> <Columns> <asp:BoundField DataField="ID" HeaderText="ID" /> <asp:BoundField DataField="Name" HeaderText="Name" /> <asp:BoundField DataField="Age" HeaderText="Age" /> </Columns> </asp:GridView> <div id="pagination"></div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-paginator/2.2.5/bootstrap-paginator.min.js"></script> <script> $(function () { $('#pagination').bootstrapPaginator({ currentPage: <%= GridView1.PageIndex+1 %>, totalPages: <%= GridView1.PageCount %>, onPageChanged: function (e, oldPage, newPage) { __doPostBack('GridView1', 'Page', newPage-1); } }); }); </script> ``` 在这个例子中,我们使用了Bootstrap Paginator插件来自定义分页样式。在页面加载完成之后,我们使用jQuery选择器选中了一个id为pagination的div元素,并且调用了bootstrapPaginator函数来初始化分页控件。在bootstrapPaginator函数中,我们传递了三个参数:当前页码、总页码数和一个回调函数。在回调函数中,我们使用__doPostBack函数向服务器发送分页请求,并且传递了两个参数:GridView的ID和分页索引。 这两种自定义分页样式都非常简单易懂,可以根据自己的需求进行选择和修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值