开发时经常遇到用一个DataGrid分页显示数据的情况,然而Flex本身没有提供分页控件,给开发带来了不便。这里将自己开发时做的一个分页控件摆出来供刚入门的朋友参考。O(∩_∩)O~
采用BlazeDS与Java端通信
1. 一个Vo对象Page存放分页信息,以及相对应的Java端的Page对象
2. 一个很简单的自定义事件PageEvent
3. 调用。通过RemoteObject调用服务器的分页查询方法(返回值为Page对象)
一、JAVA端
1、Page对象 (从SpringSide那借来的)
- /**
- * 分页对象. 包含当前页数据及分页信息如总记录数.
- */
- public class Page {
- /**
- * 默认每页记录数
- */
- private static final int DEFAULT_PAGE_SIZE = 20 ;
- /**
- * 每页的记录数
- */
- private int pageSize = DEFAULT_PAGE_SIZE;
- /**
- * 当前页第一条数据在List中的位置,从0开始
- */
- private long start = 0 ;
- /**
- * 总记录数
- */
- private long totalCount = 0 ;
- /**
- * 总页数
- */
- @SuppressWarnings ( "unused" )
- private long totalPageCount = 0 ;
- /**
- * 当前页数
- */
- @SuppressWarnings ( "unused" )
- private long currentPageNo;
- /**
- * 查询结果
- */
- private List resultList;
- }
- /**
- * 分页对象. 包含当前页数据及分页信息如总记录数.
- */
- public class Page {
- /**
- * 默认每页记录数
- */
- private static final int DEFAULT_PAGE_SIZE = 20;
- /**
- * 每页的记录数
- */
- private int pageSize = DEFAULT_PAGE_SIZE;
- /**
- * 当前页第一条数据在List中的位置,从0开始
- */
- private long start = 0;
- /**
- * 总记录数
- */
- private long totalCount = 0;
- /**
- * 总页数
- */
- @SuppressWarnings("unused")
- private long totalPageCount = 0;
- /**
- * 当前页数
- */
- @SuppressWarnings("unused")
- private long currentPageNo;
- /**
- * 查询结果
- */
- private List resultList;
- }
2、查询方法接口
- /**
- * 分页查询
- * @param condition 查询条件 (根据需求来定)
- * @param pageNo
- * @param pageSize
- * @return
- */
- public Page pagedQuery(String condition, int pageNo, int pageSize);
- /**
- * 分页查询
- * @param condition 查询条件 (根据需求来定)
- * @param pageNo
- * @param pageSize
- * @return
- */
- public Page pagedQuery(String condition, int pageNo, int pageSize);
二、Flex端
1、Page对象(通过工具类生成)
- package lzh.demo.pagebar.model {
- import mx.collections.ArrayCollection;
- [RemoteClass(alias="lzh.demo.pagebar.model.Page" )]
- [Bindable]
- public class Page {
- /**
- * 默认每页记录数
- */
- public static const DEFAULT_PAGE_SIZE:int = 20 ;
- /**
- * 每页的记录数
- */
- public var pageSize:int = DEFAULT_PAGE_SIZE;
- /**
- * 当前页第一条数据在List中的位置,从0 开始
- */
- public var start:int;
- /**
- * 总记录数
- */
- public var totalCount:int;
- /**
- * 总页数
- */
- public var totalPageCount:int;
- /**
- * 当前页数
- */
- public var currentPageNo:int = 1 ;
- /**
- * 查询结果
- */
- public var resultList:ArrayCollection;
- public function Page() {
- }
- public static function buildPage(item:Object) : Page{
- if(null==item) return null;
- var page:Page = new Page();
- page.pageSize = item.pageSize;
- page.start = item.start;
- page.data = item.data;
- page.totalCount = item.totalCount;
- page.totalPageCount = item.totalPageCount;
- page.currentPageNo = item.currentPageNo;
- page.resultList = item.resultList;
- return page;
- }
- }
- }
- package lzh.demo.pagebar.model {
- import mx.collections.ArrayCollection;
- [RemoteClass(alias="lzh.demo.pagebar.model.Page")]
- [Bindable]
- public class Page {
- /**
- * 默认每页记录数
- */
- public static const DEFAULT_PAGE_SIZE:int = 20;
- /**
- * 每页的记录数
- */
- public var pageSize:int = DEFAULT_PAGE_SIZE;
- /**
- * 当前页第一条数据在List中的位置,从0开始
- */
- public var start:int;
- /**
- * 总记录数
- */
- public var totalCount:int;
- /**
- * 总页数
- */
- public var totalPageCount:int;
- /**
- * 当前页数
- */
- public var currentPageNo:int = 1;
- /**
- * 查询结果
- */
- public var resultList:ArrayCollection;
- public function Page() {
- }
- public static function buildPage(item:Object) : Page{
- if(null==item) return null;
- var page:Page = new Page();
- page.pageSize = item.pageSize;
- page.start = item.start;
- page.data = item.data;
- page.totalCount = item.totalCount;
- page.totalPageCount = item.totalPageCount;
- page.currentPageNo = item.currentPageNo;
- page.resultList = item.resultList;
- return page;
- }
- }
- }
2、PageEvent
- package lzh.demo.pagebar.event {
- import flash.events.Event;
- import lzh.demo.pagebar.model.Page;
- public class PageEvent extends Event {
- public var page:Page;
- public function PageEvent(page:Page, type:String) {
- super(type);
- this.page = page;
- }
- public override function clone():Event{
- return new PageEvent(page, type);
- }
- }
- }
- package lzh.demo.pagebar.event {
- import flash.events.Event;
- import lzh.demo.pagebar.model.Page;
- public class PageEvent extends Event {
- public var page:Page;
- public function PageEvent(page:Page, type:String) {
- super(type);
- this.page = page;
- }
- public override function clone():Event{
- return new PageEvent(page, type);
- }
- }
- }
3、PageBar
- <?xml version= "1.0" encoding= "utf-8" ?>
- <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
- verticalAlign="bottom"
- creationComplete="init()" horizontalGap= "4" >
- <mx:Metadata>
- [Event(name="goPage" ,type= "lzh.demo.pagebar.event.PageEvent" )]
- </mx:Metadata>
- <mx:Script>
- <![CDATA[
- import lzh.demo.pagebar.event.PageEvent;
- import lzh.demo.pagebar.model.Page;
- import mx.events.ListEvent;
- import mx.events.NumericStepperEvent;
- private var _page:Page;
- [Bindable]
- public function set page(page:Page):void{
- _page = page;
- configPageBar();
- }
- public function get page():Page{
- return _page;
- }
- [Bindable]
- /**
- * 在HorizontalList中显示的页码
- */
- public var pageNumbers:Array=[];
- /**
- * HorizontalList中显示的最大数字
- */
- private static const SIZE:int = 10 ;
- /**
- * HorizontalList左边显示的数量
- */
- private static const LEFT_SIZE:int = 2 ;
- private function init():void{
- if(null==_page) {
- _page = new Page();
- }
- configPageBar();
- }
- /**
- * 配置PageBar
- */
- private function configPageBar():void{
- configPageNumbers();
- hbFirst.addChild(lbtnFirst);
- hbPrev.addChild(btnPrev);
- hbNext.addChild(btnNext);
- hbLast.addChild(lbtnLast);
- // 左边的显示:首页\上一页
- if (1 ==_page.currentPageNo){
- hbFirst.removeChild(lbtnFirst);
- hbPrev.removeChild(btnPrev);
- } else if((1 <_page.currentPageNo) && (_page.currentPageNo<= 4 )){
- hbFirst.removeChild(lbtnFirst);
- }
- // 右边的显示:下一页\尾页
- if (_page.totalPageCount<=_page.currentPageNo){
- hbLast.removeChild(lbtnLast);
- hbNext.removeChild(btnNext);
- } else if(pageNumbers.indexOf(_page.totalPageCount)>-1 ){
- hbLast.removeChild(lbtnLast);
- }
- hListNumbers.columnCount = pageNumbers.length;
- }
- /**
- * 配置显示的可选页码
- */
- private function configPageNumbers():void{
- pageNumbers = [];
- if (_page.totalPageCount<1 ){ // 总页数为 0
- return;
- }
- var i:int=0 ;
- if (_page.currentPageNo<4 ){
- for(i=1 ; i<=_page.currentPageNo; i++){ //将<=currentPageNo的页码加入
- pageNumbers.push(i);
- }
- } else {
- for(i=LEFT_SIZE; i>=0 ; i--){
- pageNumbers.push(_page.currentPageNo-i);
- }
- }
- // 从currentPage后起,分别加入,总数不超过10
- for(i=1 ; pageNumbers.length<SIZE && (_page.currentPageNo+i)<=_page.totalPageCount; i++){
- pageNumbers.push(_page.currentPageNo+i);
- }
- if((pageNumbers.length<SIZE)
- &&
- pageNumbers.indexOf(_page.totalPageCount)>-1
- &&
- (pageNumbers.indexOf(1 )==- 1 )){
- pageNumbers = [];
- i =((_page.totalPageCount<SIZE)?_page.totalPageCount:SIZE) - 1 ;
- for ( ; i>=0 ; i--){
- pageNumbers.push(_page.totalPageCount-i);
- }
- }
- hListNumbers.selectedItem = _page.currentPageNo;
- }
- protected function btnPrev_clickHandler(event:MouseEvent):void {
- goPage((hListNumbers.selectedItem as uint) - 1 );
- }
- protected function btnNext_clickHandler(event:MouseEvent):void {
- goPage((hListNumbers.selectedItem as uint) + 1 );
- }
- /**
- * 向上分发事件,一般情况下,需要与服务器端通信
- */
- private function goPage(pageNo:uint):void{
- _page.currentPageNo = pageNo;
- this.dispatchEvent(new PageEvent(_page, "goPage" ));
- }
- protected function hListNumbers_changeHandler(event:ListEvent):void {
- goPage(hListNumbers.selectedItem as uint);
- }
- protected function lbtnFirst_clickHandler(event:MouseEvent):void {
- goPage(1 );
- }
- protected function lbtnLast_clickHandler(event:MouseEvent):void {
- goPage(_page.totalPageCount);
- }
- protected function pageSize_changeHandler(event:NumericStepperEvent):void {
- _page.totalPageCount = _page.totalCount / pageSize.value;
- _page.totalPageCount += ((_page.totalCount % pageSize.value)>0 )? 1 : 0 ;
- if (_page.totalPageCount>0 ){
- _page.currentPageNo = 1 ;
- goPage(_page.currentPageNo);
- }
- }
- protected function btnGo_clickHandler(event:MouseEvent):void {
- var pageNo:int = (Number)(targetPageNo.text);
- if (0 ==pageNo) {
- targetPageNo.text = 1 + "" ;
- }
- if(pageNo<=0 ){
- targetPageNo.text = 1 + "" ;
- }
- if (pageNo>_page.totalPageCount){
- targetPageNo.text = _page.totalPageCount + "" ;
- }
- pageNo = (Number)(targetPageNo.text);
- goPage(pageNo);
- }
- ]]>
- </mx:Script>
- <mx:Text text="{page.totalCount+'条记录'}" />
- <mx:Text text="每页" />
- <mx:NumericStepper id="pageSize"
- minimum="10" stepSize= "5" maximum= "5000" value= "20"
- change="pageSize_changeHandler(event)" />
- <mx:HBox id="hbFirst" >
- <mx:LinkButton id="lbtnFirst" label= "1..." fontWeight= "normal" click= "lbtnFirst_clickHandler(event)" />
- </mx:HBox>
- <mx:HBox id="hbPrev" >
- <mx:Button id="btnPrev" icon= "@Embed(source='/assets/prev_page.gif')" enabled= "{1!=hListNumbers.selectedItem}" toolTip= "上一页" click= "btnPrev_clickHandler(event)" cornerRadius= "20" alpha= "1.0" borderColor= "#FDFDFD" width= "30" />
- </mx:HBox>
- <mx:HorizontalList id="hListNumbers" dataProvider= "{pageNumbers}"
- columnCount="10" columnWidth= "22"
- borderStyle="none" backgroundColor= "#FFFFFF" height= "23"
- change="hListNumbers_changeHandler(event)" >
- </mx:HorizontalList>
- <mx:HBox id="hbNext" >
- <mx:Button id="btnNext" icon= "@Embed(source='assets/next_page.gif')" enabled= "{page.totalPageCount!=hListNumbers.selectedItem}" toolTip= "下一页" click= "btnNext_clickHandler(event)" cornerRadius= "20" borderColor= "#F9FBFC" width= "30" />
- </mx:HBox>
- <mx:HBox id="hbLast" >
- <mx:LinkButton id="lbtnLast" label= "{'...'+page.totalPageCount}" fontWeight= "normal" click= "lbtnLast_clickHandler(event)" />
- </mx:HBox>
- <mx:TextInput maxChars="3" restrict= "0-9" textAlign= "right" id= "targetPageNo" />
- <mx:Button label="Go" cornerRadius= "10" width= "50" id= "btnGo" click= "btnGo_clickHandler(event)" />
- </mx:HBox>
- <?xml version="1.0" encoding="utf-8"?>
- <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
- verticalAlign="bottom"
- creationComplete="init()" horizontalGap="4">
- <mx:Metadata>
- [Event(name="goPage",type="lzh.demo.pagebar.event.PageEvent")]
- </mx:Metadata>
- <mx:Script>
- <![CDATA[
- import lzh.demo.pagebar.event.PageEvent;
- import lzh.demo.pagebar.model.Page;
- import mx.events.ListEvent;
- import mx.events.NumericStepperEvent;
- private var _page:Page;
- [Bindable]
- public function set page(page:Page):void{
- _page = page;
- configPageBar();
- }
- public function get page():Page{
- return _page;
- }
- [Bindable]
- /**
- * 在HorizontalList中显示的页码
- */
- public var pageNumbers:Array=[];
- /**
- * HorizontalList中显示的最大数字
- */
- private static const SIZE:int = 10;
- /**
- * HorizontalList左边显示的数量
- */
- private static const LEFT_SIZE:int = 2;
- private function init():void{
- if(null==_page) {
- _page = new Page();
- }
- configPageBar();
- }
- /**
- * 配置PageBar
- */
- private function configPageBar():void{
- configPageNumbers();
- hbFirst.addChild(lbtnFirst);
- hbPrev.addChild(btnPrev);
- hbNext.addChild(btnNext);
- hbLast.addChild(lbtnLast);
- // 左边的显示:首页\上一页
- if (1==_page.currentPageNo){
- hbFirst.removeChild(lbtnFirst);
- hbPrev.removeChild(btnPrev);
- } else if((1<_page.currentPageNo) && (_page.currentPageNo<=4)){
- hbFirst.removeChild(lbtnFirst);
- }
- // 右边的显示:下一页\尾页
- if (_page.totalPageCount<=_page.currentPageNo){
- hbLast.removeChild(lbtnLast);
- hbNext.removeChild(btnNext);
- } else if(pageNumbers.indexOf(_page.totalPageCount)>-1){
- hbLast.removeChild(lbtnLast);
- }
- hListNumbers.columnCount = pageNumbers.length;
- }
- /**
- * 配置显示的可选页码
- */
- private function configPageNumbers():void{
- pageNumbers = [];
- if (_page.totalPageCount<1){ // 总页数为0
- return;
- }
- var i:int=0;
- if (_page.currentPageNo<4 ){
- for(i=1; i<=_page.currentPageNo; i++){ //将<=currentPageNo的页码加入
- pageNumbers.push(i);
- }
- } else {
- for(i=LEFT_SIZE; i>=0; i--){
- pageNumbers.push(_page.currentPageNo-i);
- }
- }
- // 从currentPage后起,分别加入,总数不超过10
- for(i=1; pageNumbers.length<SIZE && (_page.currentPageNo+i)<=_page.totalPageCount; i++){
- pageNumbers.push(_page.currentPageNo+i);
- }
- if((pageNumbers.length<SIZE)
- &&
- pageNumbers.indexOf(_page.totalPageCount)>-1
- &&
- (pageNumbers.indexOf(1)==-1)){
- pageNumbers = [];
- i =((_page.totalPageCount<SIZE)?_page.totalPageCount:SIZE) - 1;
- for ( ; i>=0; i--){
- pageNumbers.push(_page.totalPageCount-i);
- }
- }
- hListNumbers.selectedItem = _page.currentPageNo;
- }
- protected function btnPrev_clickHandler(event:MouseEvent):void {
- goPage((hListNumbers.selectedItem as uint) - 1);
- }
- protected function btnNext_clickHandler(event:MouseEvent):void {
- goPage((hListNumbers.selectedItem as uint) + 1);
- }
- /**
- * 向上分发事件,一般情况下,需要与服务器端通信
- */
- private function goPage(pageNo:uint):void{
- _page.currentPageNo = pageNo;
- this.dispatchEvent(new PageEvent(_page, "goPage"));
- }
- protected function hListNumbers_changeHandler(event:ListEvent):void {
- goPage(hListNumbers.selectedItem as uint);
- }
- protected function lbtnFirst_clickHandler(event:MouseEvent):void {
- goPage(1);
- }
- protected function lbtnLast_clickHandler(event:MouseEvent):void {
- goPage(_page.totalPageCount);
- }
- protected function pageSize_changeHandler(event:NumericStepperEvent):void {
- _page.totalPageCount = _page.totalCount / pageSize.value;
- _page.totalPageCount += ((_page.totalCount % pageSize.value)>0)?1:0;
- if (_page.totalPageCount>0){
- _page.currentPageNo = 1;
- goPage(_page.currentPageNo);
- }
- }
- protected function btnGo_clickHandler(event:MouseEvent):void {
- var pageNo:int = (Number)(targetPageNo.text);
- if (0==pageNo) {
- targetPageNo.text = 1 + "";
- }
- if(pageNo<=0){
- targetPageNo.text = 1 + "";
- }
- if (pageNo>_page.totalPageCount){
- targetPageNo.text = _page.totalPageCount + "";
- }
- pageNo = (Number)(targetPageNo.text);
- goPage(pageNo);
- }
- ]]>
- </mx:Script>
- <mx:Text text="{page.totalCount+'条记录'}" />
- <mx:Text text="每页"/>
- <mx:NumericStepper id="pageSize"
- minimum="10" stepSize="5" maximum="5000" value="20"
- change="pageSize_changeHandler(event)"/>
- <mx:HBox id="hbFirst">
- <mx:LinkButton id="lbtnFirst" label="1..." fontWeight="normal" click="lbtnFirst_clickHandler(event)"/>
- </mx:HBox>
- <mx:HBox id="hbPrev">
- <mx:Button id="btnPrev" icon="@Embed(source='/assets/prev_page.gif')" enabled="{1!=hListNumbers.selectedItem}" toolTip="上一页" click="btnPrev_clickHandler(event)" cornerRadius="20" alpha="1.0" borderColor="#FDFDFD" width="30"/>
- </mx:HBox>
- <mx:HorizontalList id="hListNumbers" dataProvider="{pageNumbers}"
- columnCount="10" columnWidth="22"
- borderStyle="none" backgroundColor="#FFFFFF" height="23"
- change="hListNumbers_changeHandler(event)">
- </mx:HorizontalList>
- <mx:HBox id="hbNext">
- <mx:Button id="btnNext" icon="@Embed(source='assets/next_page.gif')" enabled="{page.totalPageCount!=hListNumbers.selectedItem}" toolTip="下一页" click="btnNext_clickHandler(event)" cornerRadius="20" borderColor="#F9FBFC" width="30"/>
- </mx:HBox>
- <mx:HBox id="hbLast">
- <mx:LinkButton id="lbtnLast" label="{'...'+page.totalPageCount}" fontWeight="normal" click="lbtnLast_clickHandler(event)"/>
- </mx:HBox>
- <mx:TextInput maxChars="3" restrict="0-9" textAlign="right" id="targetPageNo"/>
- <mx:Button label="Go" cornerRadius="10" width="50" id="btnGo" click="btnGo_clickHandler(event)"/>
- </mx:HBox>
4、调用
- <components:PageBar id= "pageBar" goPage= "pagedQuery()" />
- /**
- * 调用服务器端方法
- */
- private function pagedQuery():void{
- itemManager.pagedQuery( condition.text, pageBar.page.currentPageNo, pageBar.pageSize.value); }
- }
- /**
- * 相应分页查询方法
- */
- private function onPagedQuery(event:ResultEvent):void{
- pageBar.page = Page.buildPage(event.result); items = pageBar.page.resultList; // items为DataGrid的dataProvider
- }
- <components:PageBar id="pageBar" goPage="pagedQuery()"/>
- /**
- * 调用服务器端方法
- */
- private function pagedQuery():void{
- itemManager.pagedQuery( condition.text, pageBar.page.currentPageNo, pageBar.pageSize.value); }
- }
- /**
- * 相应分页查询方法
- */
- private function onPagedQuery(event:ResultEvent):void{
- pageBar.page = Page.buildPage(event.result); items = pageBar.page.resultList; // items为DataGrid的dataProvider
- }