|
|
一、基本说明：
SqlPager是一个基于PagedDataSource的分页控件，此控件有丰富的参数设置，可让用户灵活应对各种情况，现在的功能已算是比较完善的了
主要功能及特性如下：
- 支持多达11种自定义样式显示
- 支持多个数据库容器分页，其中包括 等控件。
- 支持AJAX分页
- 已可在同一页面同时使用多个SqlPager控件
- 支持在母板页里使用
- 使用缓存技术以提高分页效率
- 可直接使用SQL语句获取数据源
- 可使用自定义数据源
- 可完全自定义分页按钮样式，支持图片按钮
- 支持排序字段设置和相应的反序方式
二、属性说明：
以下将详细介绍各种属性：()
a.界面相关
-
BorderStyle:设置分页控件边框样式
-
BorderWidth:设置分页控件边框宽度
-
ShowCount:显示统计页数模式,0:'第{0}页/总{1}页' 1:'第{0}页/总{1}页 [每页{2}条/共{3}条记录]' 2:'不显示'
-
ButtonAndTextBoxVisible:获取或设置转到文本框和按钮是否显示，默认为True(只对NumPager样式有效)
-
PagerStyle:设置要显示的样式类型，分别有以下11(点击展开)类：
/// <summary>
/// 页面样式设置
/// </summary>
public enum PagerStyle
{
/// <summary>
/// 按钮样式为上下页箭头
/// </summary>
NextPrev,
/// <summary>
/// 按钮样式来下拉框页码
/// </summary>
NumericPages,
/// <summary>
/// 按钮和下拉框页码一起显示
/// </summary>
NextAndNumeric,
/// <summary>
/// 自定义样式，可自定文本
/// </summary>
CustomStyle,
/// <summary>
/// 自定义样式，可自定文本，同时显示下拉页码
/// </summary>
CustomAndNumeric,
/// <summary>
/// 无刷新箭头式按钮
/// </summary>
AjaxNext,
/// <summary>
/// 无刷新箭头式按钮加下拉页码
/// </summary>
AjaxNextAndNum,
/// <summary>
/// 无刷新下拉框按钮
/// </summary>
AjaxNumeric,
/// <summary>
/// 自定义无刷新分页
/// </summary>
AjaxCustomPages,
/// <summary>
/// 自定义无刷新和下拉框页码
/// </summary>
AjaxCustomAndNumeric,
/// <summary>
/// 数字页码样式
/// </summary>
NumPager，
/// <summary>
/// 使用自定义CSS产生的数字页码样式 （新）
/// </summary>
NumPagerWithCSS
}
b.页码按钮样式相关
-
FirstButton:获取或设置第一页的文字或图片地址,默认为“第一页”
-
PrveButton:获取或设置上一页的文字或图片地址,默认为“上一页”
-
NextButton:获取或设置下一页的文字或图片地址,默认为“下一页”
-
LastButton:获取或设置最后一页的文字或图片地址,默认为“最后第一页”
-
LinkTextCssClass:获取或设置链接文字或图片地址的CSS类名(只对NumPager样式有效)
-
CurrentNumberColor:获取或设置当前连接数字的颜色(只对NumPager样式有效)
-
LeftPageSize:设置或获取分页左边要显示的页码数，默认为5(只对NumPager样式有效)
-
RightPageSize:设置或获取分页右边要显示的页码数，默认为5(只对NumPager样式有效)
-
LinkNumberWidth:设置或获取连接数字单元格的宽度，默认为16px(只对NumPager样式有效)
-
LinkNumberHeight:设置或获取连接数字单元格的高度，默认为16px(只对NumPager样式有效)
-
ButtonText:获取或设置转到按钮文本或图片(只对NumPager样式有效)
-
ButtonType:获取或设置转到按钮类型。可以为：ButtonType.Button，ButtonType.Image。(只对NumPager样式有效)
-
TextBoxWidth:获取或设置文本框宽度，默认为4(只对NumPager样式有效)
-
(3.3 new)PaterElementID:分页控件所在元素的ID,以此ID来设置分页样式(只对NumPagerWithCSS样式有效)
c.数据源相关
-
ControlToPaginate:绑定的数据容器控件ID
-
ContentPlaceHolderID:所在当前母板页ID(如不使用母板页,则不需设置)
-
PaternalID:分页控件所在父级元素ID,如DIV等元素
-
ItemsPerPage:每页显示记录数
-
ToolTip:在使用数字页码样式(NumPager)时,鼠标放上去时显示的提示文本
-
UseCustomDataSource:是否使用自定义数据源,值为true/false
-
CustomDataSource:指定自定义数据源,DataSet类型
-
SelectCommand:设置SQL查询语句,使用此属性,必须将UseCustomDataSource设为false
-
SortField:排序字段
-
SortStyle:排序方式,枚举类型SortStyle.DESC/SortStyle.ASC
-
CacheDuration:设置缓存的持续时间，默认为60秒
-
(3.3 new)ClientSetPager:设置客户端的分页函数,for AJAX,但必须实现2个参数,如 setPageTo = function(paternalID, pageIndex),分页控件所在的父控件ID,一般是所在的DIV的ID,另一个是当前页数,具体实现看本站示例
三、使用说明：
SqlPager使用其实很简单，只需在页面添加相应的控件代码，然后在后台进行绑定调用就可以了，只是如果要使用AJAX，还就需添加一些JS代码，以下是使用的步骤：
1.添加HTML前台控件代码，关于控件属性设置，请参照上述部分：
<!--在页面顶部添加控件的引用-->
<%@ Register Assembly="Winson.Framework" Namespace="Winson.Framework.Controls" TagPrefix="SqlPager" %>
<div id="GridViewShow">
<asp:GridView ID="GridView1" runat="server" Width="600" EnableViewState="False" AutoGenerateColumns="False"
CellPadding="4" ForeColor="#333333" GridLines="None">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="Name" HeaderText="姓名" />
<asp:BoundField DataField="Age" HeaderText="年龄" />
<asp:BoundField DataField="Datetime" HeaderText="日期" />
</Columns>
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<EditRowStyle BackColor="#999999" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#3366FF" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
<br />
<SqlPager:SqlPager ID="SqlPager1" runat="server" Width="600" ControlToPaginate="GridView1" ItemsPerPage="10" BorderStyle="None" ShowCount="1" BackColor="#ffffff" PagerStyle="AjaxCustomAndNumeric" BorderWidth="0" ContentPlaceHolderID="ContentPlaceHolder1" PaternalID="GridViewShow" ></SqlPager:SqlPager>
</div>
2.添加JS代码以实现AJAX分页：
主要是实现 方法，以下是结合了jQuery一起实现的AJAX，你也可以自行去实现此方法，只是有2个参数要分别传入后台处理的
//paternalID 为分页控件所在的父级元素ID
//pageIndex 为当前所在页面
setPageTo = function(paternalID, pageIndex){
$("#"+paternalID).block({
message: $('#Loading'),
css: {
width: '208px' ,
height:'15px' ,
border: '0px',
left: ($(window).width() -100) /2 + 'px',
background: "url('images/loading.gif')"
}
});
$.ajax({
type: "POST",
url: "SqlPager.aspx",
data: "Action=sqlpager&paterID="+paternalID+"&newIndex="+pageIndex,
complete: function(){$("#"+paternalID).unblock();},
success: function(result){
$("#"+paternalID).html(result);
}
});
}
3.添加后台数据处理代码：
Test test = new Test();
//NameValueCollection conditionValue = new NameValueCollection();
//conditionValue["name like"] = "sdf";
//DataSet testds = test.GetDataSet(conditionValue);//可添加条件获取
DataSet testds = test.GetDataSet(null);//获取全部数据直接用null
//绑定分页控件
SqlPager1.UseCustomDataSource = true;
SqlPager1.CustomDataSource = testds;
SqlPager1.DataBind();
//使用AJAX分页，返回数据并显示
private void PageChange1()
{
int newPageIndex = Convert.ToInt32(Request["newIndex"]);
SqlPager1.GoToPage(newPageIndex);
StringWriter writer1 = new StringWriter(System.Globalization.CultureInfo.InvariantCulture);
HtmlTextWriter writer2 = new HtmlTextWriter(writer1);
if (GridView1 != null)
{
GridView1.Visible = true;
GridView1.RenderControl(writer2);
}
SqlPager1.RenderControl(writer2);
writer2.Flush();
writer2.Close();
Response.Write(writer1.ToString());
Response.End();
}
经过以上3步设置，就可以使用SqlPager分页控件了。
|