flex分页控件的使用

分页显示数据是网站浏览中必备的元素之一，在FLEX中通过数据分页的方法来获取当前显示数据，即能降低网络传的负担同时也能减少Flex的处理工作。
分页控件需要的功能有：首页，上一页，下一页，未页和页数跳转等。
http://sz.photo.store.qq.com/rurl2=88917bc76e79eaf6b597d644e7c11011d117522125322699e7b4dd2f7622c712f6c075fa047a7ba3b9ee99935355b4ef4d749c40f4f2dccc5d84a42be87b0f0439d4791703bd22af5ed2e2693b2a9c8bf6ba76b3
[img]
http://sz.photo.store.qq.com/rurl2=c1d51b934ca020f6f1dbf92c8e78f93d7c38e56269390beeb982b1d7cc654912d9493e152f74922b4c009c3eace05432a6404f866d78bfd828a6ad53f60ce03f106f22896a02c9afbfc4d4746e2b23828f8650bf
[/img]
定义分页控件的事件：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="" 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="" 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="" 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="" 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> 

评论

1 楼 nature1 2009-05-20  

很实用啊,谢谢