在Flex下实现数据分页控件

数据分页功能在WEB应用非常广泛，虽然Flex基于Win的显示方式似乎没有必要，但实现应用中还是非常有用的。由于Flex的数据往往由其网络服务提供（如：WebService等），大量的数据传输和表现会影响Flex的性能；这个时候就可能通过数据分页的方法来获取当前显示数据，即能降低网络传的负担同时也能减少Flex的处理工作。

?????? 首先分页控件需要的功能有：首页，上一页，下一页，未页和页数跳转等。

控件表现如下：

控件使用用例图

定义分页控件的事件：PageChange

相关事件参数对象：

package

{

?????? import flash.events.Event;

?????? import mx.events.IndexChangedEvent;

??????

?????? public class PageChangeEvent extends flash.events.Event

?????? {

????????????? public function PageChangeEvent(pageindex:int,pagesize:int)

????????????? {

???????????????????? super("PageChange");

???????????????????? PageIndex= pageindex;

???????????????????? PageSize =pagesize;

????????????? }

????????????? public var PageIndex:int=0;

????????????? public var PageSize:int=0;

????????????? public function Filter(list:Array):Array

????????????? {

???????????????????? var newlist:Array = new Array();

???????????????????? var start:int = PageSize*PageIndex;

???????????????????? var end:int = start+PageSize;

???????????????????? for(var i:int = start;i<end;i++)

???????????????????? {

??????????????????????????? if(i< list.length)

??????????????????????????? {

?????????????????????????????????? newlist.push(list[i]);

??????????????????????????? }

??????????????????????????? else

?????????????????????????????????? break;

???????????????????? }

???????????????????? return newlist;

????????????? }

?????? }

}

下面是具体分页控件的代码：

<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="466" height="40">

<mx:Metadata>

?

??? [Event(name="PageChange",type="PageChangeEvent",bubbles="true",cancelable="true")]

?

</mx:Metadata>

?

?????? <mx:Button click="method_le()"? id="c_le" enabled="false" x="10" y="10" fontFamily="Georgia" width="24" height="24" minWidth="24" minHeight="24">

????????????? <mx:icon>@Embed('LE.gif')</mx:icon>

?????? </mx:Button>

?????? <mx:Button click="method_l()" id="c_l" enabled="false" x="42" y="10" fontFamily="Georgia" width="24" height="24" minWidth="24" minHeight="24">

????????????? <mx:icon>@Embed('L.gif')</mx:icon>

?????? </mx:Button>

?????? <mx:ComboBox rowCount="10" change="method_select()" id="c_select" enabled="false" x="74" y="10" width="54"></mx:ComboBox>

?????? <mx:Button click="method_r()" id="c_r" enabled="false" x="136" y="10" fontFamily="Georgia" width="24" height="24" minWidth="24" minHeight="24">

????????????? <mx:icon>@Embed('R.gif')</mx:icon>

?????? </mx:Button>

?????? <mx:Button click="method_re()" id="c_re" enabled="false" x="168" y="10" fontFamily="Georgia" width="24" height="24" minWidth="24" minHeight="24">

????????????? <mx:icon>@Embed('RE.gif')</mx:icon>

?????? </mx:Button>

?????? <mx:Script>

????????????? <![CDATA[

???????????????????? import mx.controls.Alert;

???????????????????? private var mRecordCount:int=0;

???????????????????? private var mPageSize:int =20;

???????????????????? private var mPageIndex:int =0;

???????????????????? private var mPageCount:int = 0;

????????????????????

???????????????????? public function method_l():void

???????????????????? {

??????????????????????????? mPageIndex=mPageIndex-1;

??????????????????????????? SetState();

??????????????????????????? OnPageChange();

???????????????????? }

???????????????????? public function method_le():void

???????????????????? {

??????????????????????????? mPageIndex =0;

??????????????????????????? SetState();

??????????????????????????? OnPageChange();

???????????????????? }

???????????????????? public function method_r():void

???????????????????? {

??????????????????????????? mPageIndex=mPageIndex+1;

??????????????????????????? SetState();

??????????????????????????? OnPageChange();

???????????????????? }

???????????????????? public function method_re():void

???????????????????? {

??????????????????????????? mPageIndex=mPageCount-1;

??????????????????????????? SetState();

??????????????????????????? OnPageChange();

???????????????????? }

?????? ????????????? public function method_select():void

???????????????????? {

??????????????????????????? mPageIndex = c_select.selectedItem.data;

??????????????????????????? SetState();

??????????????????????????? OnPageChange();

???????????????????? }

???????????????????? public function get PageIndex():int

???????????????????? {

??????????????????????????? return mPageIndex;

???????????????????? }

????????????????????

????????????????????

???????????????????? //设置记录总数

???????????????????? public function set RecordCount(count:int):void

???????????????????? {

??????????????????????????? mRecordCount= count;

??????????????????????????? if(count >0)

??????????????????????????? {

?????????????????????????????????? SetState();

??????????????????????????? }

???????????????????? }

???????????????????? private function SetState():void

???????????????????? {

??????????????????????????? if(mRecordCount%mPageSize > 0)

??????????????????????????? {

?????????????????????????????????? mPageCount = mRecordCount/mPageSize+1;

??????????????????????????? }

??????????????????????????? else

??????????????????????????? {

?????????????????????????????????? mPageCount = mRecordCount/mPageSize;

??????????????????????????? }

??????????????????????????? var pages:Array = new Array();

??????????????????????????? for(var i:int =1;i<=mPageCount;i++)

??????????????????????????? {

?????????????????????????????????? pages.push( {label:i.toString(),data:i-1});

??????????????????????????? }

???????????????????????????

??????????????????????????? c_select.dataProvider= pages;

??????????????????????????? c_select.selectedIndex= mPageIndex;

???????????????????? ?????? if(mPageCount>1)

??????????????????????????? {

?????????????????????????????????? c_select.enabled=true;

?????????????????????????????????? c_l.enabled=true;

?????????????????????????????????? c_le.enabled=true;

?????????????????????????????????? c_r.enabled=true;

?????????????????????????????????? c_re.enabled=true;

?????????????????????????????????? if(mPageIndex==0)

?????????????????????????????????? {

????????????????????????????????????????? c_l.enabled=false;

????????????????????????????????????????? c_le.enabled=false;

?????????????????????????????????? }

?????????????????????????????????? if(mPageIndex == mPageCount-1)

?????????????????????????????????? {

????????????????????????????????????????? c_r.enabled=false;

????????????????????????????????????????? c_re.enabled=false;

?????????????????????????????????? }

??????????????????????????? }

??????????????????????????? else

??????????????????????????? {

?????????????????????????????????? c_select.enabled=false;

?????????????????????????????????? c_l.enabled=false;

?????????????????????????????????? c_le.enabled=false;

?????????????????????????????????? c_r.enabled=false;

?????????????????????????????????? c_re.enabled=false;

??????????????????????????? }

??????????????????????????? pageinfo.text="Records:" + mRecordCount+"/" + mPageCount+"pages";

???????????????????????????

???????????????????? }

???????????????????? //获取记录总数

???????????????????? public function get RecordCount():int

???????????????????? {

??????????????????????????? return mRecordCount;

???????????????????? }

???????????????????? //打开分页控件

???????????????????? public function Open():void{

??????????????????????????? mPageIndex =0;

??????????????????????????? OnPageChange();

???????????????????? }

???????????????????? //刷新当前页面

???????????????????? public function Refresh():void

???????????????????? {

??????????????????????????? OnPageChange();

???????????????????? }

???????????????????? private function OnPageChange():void

???????????????????? {

??????????????????????????? var e:PageChangeEvent = new? PageChangeEvent(mPageIndex,

??????????????????????????? mPageSize);

??????????????????????????? dispatchEvent(e);

???????????????????? }

????????????????????

????????????? ]]>

?????? </mx:Script>

?????? <mx:Label x="200" y="10" width="175" fontSize="12" id="pageinfo"/>

</mx:Canvas>

?

用例页面代码：

<?xml version="1.0" encoding="utf-8"?>

<mx:Application? initialize="oninit()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:ns1="Units.*" xmlns:ns2="*">

?

??????

?????? <mx:Script>

????????????? <![CDATA[

???????????????????? import mx.controls.Alert;

???????????????????? import flash.events.Event;

???????????????????? import Units.*;

???????????????????? private var datas:Array = new Array();

???????????????????? function oninit():void

???????????????????? {

??????????????????????????? for(var i:int=0;i<1110;i++)

??????????????????????????? {

?????????????????????????????????? datas.push({UserName:"Henry"+i,Notes:"GuangZhou" +i})

??????????????????????????? }

??????????????????????????? pagebar1.RecordCount =datas.length;

??????????????????????????? pagebar1.Open();

???????????????????? }

???????????????????? function pagechange(e:PageChangeEvent):void

???????????????????? {

??????????????????????????? datalist.dataProvider = e.Filter(datas)

???????????????????? }

????????????? ]]>

?????? </mx:Script>

?????? <mx:DataGrid width="100%" id="datalist">

????????????? <mx:columns>

???????????????????? <mx:DataGridColumn headerText="UserName" dataField="UserName"/>

???????????????????? <mx:DataGridColumn headerText="Notes" dataField="Notes"/>

????????????????????

????????????? </mx:columns>

?????? </mx:DataGrid>

?????? <ns2:PageBar id="pagebar1" PageChange="pagechange(event)">

?????? </ns2:PageBar>

</mx:Application>