扩展GridView控件(10) - 自定义分页样式

最新推荐文章于 2013-04-28 10:12:19 发布

webabcd

最新推荐文章于 2013-04-28 10:12:19 发布

阅读量443

点赞数

分类专栏： Custom Control自定义控件 YYControls媛媛控件文章标签：扩展 border server webform string 测试

本文链接：https://blog.youkuaiyun.com/webabcd/article/details/4608621

版权

Custom Control自定义控件同时被 2 个专栏收录

18 篇文章

订阅专栏

YYControls媛媛控件

16 篇文章

订阅专栏

GridView既强大又好用。为了让它更强大、更好用，我们来写一个继承自GridView的控件。
[索引页]
[源码下载]

扩展GridView控件(10) - 自定义分页样式

作者： webabcd

/* 正式版的实现开始 */

介绍
扩展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("  "));

if (_recordCount.HasValue)

{

tc.Controls.Add(new LiteralControl(_recordCount.ToString()));

tc.Controls.Add(new LiteralControl("  "));

tc.Controls.Add(new LiteralControl(PageSize.ToString()));

tc.Controls.Add(new LiteralControl("  "));

}

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("    "));

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("  "));

tc.Controls.Add(Prev);

tc.Controls.Add(new LiteralControl("  "));

// 当前页左边显示的数字分页按钮的数量

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("  "));

}

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("  "));

tc.Controls.Add(Last);

tc.Controls.Add(new LiteralControl("  "));

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 >

/* 测试版的实现结束 */

OK
[源码下载]