Flex3 自定义DataGrid分页控件component

网上看了一下有关flex DataGrid 自定义分页控件的应用，大部分是对客户端现成的数据进行分页，如果结合数据库来显示的话，数据量少，其实不必要分页，利用DataGrid的下拉滚动条足够，如果数据量非常大，又不大可能把所有的数据传到客户端，再对这些数据分页。只能是传到客户端的数据就只有一页的数据。下面示意如何用blaseds和flex来实现分页。（部分代码从网上拿来 ）

1.自定义分页事件
package com.yonghong.controller.events
{
import flash.events.Event;

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;

}
}
2.自定义分页栏
<?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="com.yonghong.controller.events.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('first.png')</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('pre.png')</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('next.png')</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('last.png')</mx:icon>
</mx:Button>
<mx:Script>
<![CDATA[
import com.yonghong.controller.events.PageChangeEvent;

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>

3.如何应用此控件（关键）

<?xml version="1.0" encoding="utf-8"?>
<mx:Application  initialize="oninit()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"  xmlns:ns2="com.yonghong.components.*">


<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import com.yonghong.model.vo.PatientRecordVO;
import com.yonghong.model.service.RegistrationManagerService;
import com.yonghong.controller.events.PageChangeEvent;

import mx.controls.Alert;
import flash.events.Event;

private var registerManagerService:RegistrationManagerService=new RegistrationManagerService();

private var datas:Array = new Array();
function oninit():void
{

pagebar1.Open();
}

function findPatientReocordHandler(event:ResultEvent):void{
var datas:ArrayCollection=event.result as ArrayCollection;
pagebar1.RecordCount =1000;
pagebar1.Open();
}

function pagechange(e:PageChangeEvent):void
{
registerManagerService.findPatientRecordPaging(new PatientRecordVO(),e.PageIndex,20,findPatientReocordHandler2);
}
function findPatientReocordHandler2(event:ResultEvent):void{

pagebar1.RecordCount =1000;
datalist.dataProvider=event.result;
}
]]>
</mx:Script>
<mx:DataGrid width="100%" id="datalist">
<mx:columns>
<mx:DataGridColumn headerText="no" dataField="no"/>
<mx:DataGridColumn headerText="surname" dataField="surname"/>

</mx:columns>
</mx:DataGrid>
<ns2:PageBar id="pagebar1" PageChange="pagechange(event)" >
</ns2:PageBar>
</mx:Application>

评论

1 楼 8526sun 2009-07-01