Flex分页

之前做过jsp+js的分页组件, 现在开始使用flex了写了一个,附上了参考一个, 以备他日重用。
一(参考版):
属性:
RecordCount 总记录条数
PageSize 每页大小
PageCount 总页数
PageIndex 当前页码
StartIndex 开始记录数,用于分页查询
事件:
pageChanged 分页触发时的事件
需要自己写两个查询方法
1.GetRecordCount返回总条数
2.GetDataByPage(StartIndex,PageSize) 从开始记录取PageSize条记录,就可以完成分页功能

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="678"
initialize="init();"
height="20">
<mx:Metadata>
[Event(name="pageChanged",type="mx.rpc.events.ResultEvent")]
</mx:Metadata>
<mx:Script>
<![CDATA[
import mx.controls.LinkButton;
import mx.events.ItemClickEvent;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
public var PageCount:int=0;
public var RecordCount:int=0;
public var PageSize:int=10;
public var PageIndex:int=0;
public var StartIndex:int=0;
private function init():void{
lb.dataProvider= [{label:"|<",text:"首页"},{label:"<<",text:"上一页"},{label:">>",text:"下一页"},{label:">|",text:"末页"}];

}
public function setRecordCount(count:int):void{
this.RecordCount=count;
if(count%PageSize==0)
PageCount=count/PageSize;
else
PageCount=count/PageSize+1;
pg(PageIndex);
refUI();
}
public function refUI():void{
info.text="共"+RecordCount+"条记录每页"+PageSize+"条 共"+PageCount+"页第"+(PageIndex+1)+"页";
(lb.getChildAt(0) as LinkButton).enabled=(lb.getChildAt(1) as LinkButton).enabled=PageIndex>0;
(lb.getChildAt(2) as LinkButton).enabled=(lb.getChildAt(3) as LinkButton).enabled=PageIndex<PageCount-1;
}
private function click(e:ItemClickEvent):void{
var n:int= e.index;
var index:int=PageIndex;
switch(n){
case 0:
index=0;
break;
case 1:
index--;
break;
case 2:
index++;
break;
default:
index=PageCount-1;
break;
}
pg(index);
}

private function pg(index:int):void{
if(index<0) index=0;
if(index>PageCount-1) index=PageCount-1;
PageIndex=index;
StartIndex=PageIndex*PageSize;
var ev:ResultEvent=new ResultEvent("pageChanged",false,true,PageIndex);
dispatchEvent(ev);
setTimeout(refUI,200);
}

private function gopg():void{
var n:int=new Number(txtpg.text);
n--;
pg(n);
}
]]>
</mx:Script>
<mx:Box width="100%" direction="horizontal" paddingTop="2">
<mx:Label y="1" id="info" text="共100条记录每页20条 共90页第1页" height="18"/>
<mx:LinkBar id="lb" labelField="label" toolTipField="text" separatorWidth="0" fontSize="8" paddingLeft="0" paddingRight="0" itemClick="click(event)">
</mx:LinkBar>
<mx:TextInput height="16" y="2" width="30" id="txtpg" paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" borderStyle="solid" fontSize="8"/>
<mx:LinkButton label="GO" height="18" width="24" click="gopg();" paddingRight="0" paddingLeft="0" fontSize="8"/>
</mx:Box>
</mx:Module>
效果图如下:

[img]http://dl.iteye.com/upload/attachment/303531/bea6589b-b612-392d-9221-631c1996190e.png[/img]


调用方法:
1.初始化中需要设置RecordCount
pager.PageSize=Config.popPageSize;//设置页大小
getRecordCount(); //设置总记录条数
private function getRecordCount():void{
ProductBLL.GetRecordCount(function(e:ResultEvent):void{ //调用业务方法,获取记录条数
pager.setRecordCount(e.result as int); //设置记录条数
refData(); //获取数据
});
}

private function refData():void{
var start:int=pager.StartIndex; //记录开始值
ProductBLL.GetPageByName(start,pager.PageSize,function(e:ResultEvent):void{ //调用业务分页查询
dg1.dataProvider=e.result; //绑定数据
});
}

2.编写pageChanged事件,调用refData方法即可,如可直接写在标记中,如下:
<ns2:Pager x="10" y="324" width="504" id="pager" pageChanged="refData();"/>

>

^_^ ^_^ 这个比我们正在使用的要简单, 现在附上我们使用的版本(其中每一页都是用数字标示,类似于QQ空间那种,实现起来复杂一点):
属性:startPageIndex, totalPageCount, pageShowCount(默认为5),startPage,endPage

我们默认的是页面上显示5个页面,也即像1 2 3 4 5或者2 3 4 5 6 这样取连续的5页记录。
分析:如果查询出来的总页数小于5,那么则startPage=1,endPage=totalPage
如果总页数大于5则关键是要求出起始页码与结束, 如总页数为7那么起始页码则为3,结束页码为7,以此类推。 那么如何求出startPage和endPage呢?

又因为存在关系: endPage = startPage+pageShowCount-1;因此问题的关键在于求出startPage. 而startPage由startPageIndex决定, 因此思考如何求出startPageIndex?

得出关系:
如果 startPageIndex > (pageShowCount/2+1),则startPage=startPageIndex*()
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值