Flex分页控件

核心提示：提到分页大家应该都很熟悉了，几乎所有的应用中都会用到，Flex分页控件，因而完成一个分页组件在不同的应用中进行复用是必须的，刚写完了一个flex分页的组件，默认为10 public function PageUtils(exeFun:Function,pageNum:int=10) { this.exeFun=exeF

提到分页大家应该都很熟悉了，几乎所有的应用中都会用到。因而完成一个分页组件在不同的应用中进行复用是必须的，刚写完了一个flex分页的组件，拿来分享一下。如果有什么建议、问题欢迎大家提出。希望可以为flex的开发者们提供一个可靠的分页组件。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

package utils.page

{

　　import Flash.events.MouseEvent;

　　

　　import mx.controls.Button;

　　import mx.controls.Label;

　　

　　//分页组件类

　　//作者：孙镜涛

　　//日期：2010-01-12

　　//描述：本类主要负责对分页相关的按钮以及信息显示的标签进行管理；对数据显示内容进行控制

　　public class PageComponent

　　{

　　　 //首页按钮

　　　 PRivate var firstButton:Button;

　　　 //下一页按钮

　　　 private var nextButton:Button;

　　　 //前一页按钮

　　　 private var previousButton:Button;

　　　 //最后页按钮

　　　 private var lastButton:Button;

　　　 //当前页信息显示

　　　 private var curPageInfoLbl:Label;

　　　 //所有页信息显示

　　　 private var totalPageInfoLbl:Label;

　　　 //当前页改变时数据处理方法

　　　 private var handleDataFun:Function;

　　　 //分页数据的处理类

　　　 private var page:PageUtils;

　　　 

　　　 //first,next,previous,last:第一页，下一页，上一页，最后页的button

　　　 //curPageInfoLbl,totalPageInfoLbl:当前页，所有页信息显示的label

　　　 //handleDataFun：分页的页码改变后数据的处理函数，该函数符合的签名为：（data:Array):void

　　　 //exeFun:查询数据的sql，该函数的签名为：（sql:String):Array

　　　 //pageNum:每页显示数据条数

　　　 public function PageComponent(first:Button,next:Button,previous:Button,last:Button,curPageInfoLbl:Label,

　　　　　　　　　　　　　　　　　　 totalPageInfoLbl:Label,handleDataFun:Function,exeFun:Function,pageNum:int)

　　　 {

　　　　　 //分页按钮初始化

　　　　　 this.firstButton=first;

　　　　　 this.nextButton=next;

　　　　　 this.previousButton=previous;

　　　　　 this.lastButton=last;

　　　　　 

　　　　　 //分页信息显示控件初始化

　　　　　 this.curPageInfoLbl=curPageInfoLbl;

　　　　　 this.totalPageInfoLbl=totalPageInfoLbl;

　　　　　 

　　　　　 //页面改变后数据处理函数

　　　　　 this.handleDataFun=handleDataFun;

　　　　　 

　　　　　 //分页数据类初始化

　　　　　 this.page=new PageUtils(exeFun,pageNum);

　　　　　 

　　　　　 //为分页按钮增加相应的事件处理函数

　　　　　 this.firstButton.addEventListener(MouseEvent.CLICK,firstButtonClicked);

　　　　　 this.nextButton.addEventListener(MouseEvent.CLICK,nextButtonClicked);

　　　　　 this.previousButton.addEventListener(MouseEvent.CLICK,previousButtonClicked);

　　　　　 this.lastButton.addEventListener(MouseEvent.CLICK,lastButtonClicked);

　　　 }

　　　 

　　　 //需要分页查询的的sql

　　　 public function initSql(sql:String):void

　　　 {

　　　　　 this.page.initSqlAndInitDataIfNecessary(sql);　　　　

　　　　　 setButtonStatus();

　　　　　 setLabelInfo();

　　　　　 this.handleDataFun(page.getPageData());

　　　 }



　　　 //分页按钮被点击时的处理逻辑为：

　　　 //1.设置当前数据的页数

　　　 //2.设置分页控件按钮的状态

　　　 //3.设置分页控件信息显示label的内容

　　　 //4.查询该页数据并执行数据处理函数

　　　 

　　　 //点击第一页时触发的事件

　　　 public function firstButtonClicked(event:MouseEvent):void

　　　 {

　　　　　 page.setCurrentPage(1);

　　　　　 setButtonStatus();

　　　　　 setLabelInfo();

　　　　　 this.handleDataFun(page.getPageData());

　　　 }

　　　 

　　　 //点击下一页时触发的事件

　　　 public function nextButtonClicked(event:MouseEvent):void

　　　 {

　　　　　 if(page.getCurrentPage()<page.getPageCount())

　　　　　 {

　　　　　　　page.setCurrentPage(page.getCurrentPage()+1);

　　　　　 }

　　　　　 setButtonStatus();

　　　　　 setLabelInfo();

　　　　　 this.handleDataFun(page.getPageData());

　　　 }

　　　 

　　　 //点击上一页时触发的事件

　　　 public function previousButtonClicked(event:MouseEvent):void

　　　 {

　　　　　 if(page.getCurrentPage()>1)

　　　　　 {

　　　　　　　page.setCurrentPage(page.getCurrentPage()-1);

　　　　　 }

　　　　　 setButtonStatus();

　　　　　 setLabelInfo();

　　　　　 this.handleDataFun(page.getPageData());

　　　 }

　　　 

　　　 //点击最后页时触发的事件

　　　 public function lastButtonClicked(event:MouseEvent):void

　　　 {

　　　　　 page.setCurrentPage(page.getPageCount());

　　　　　 setButtonStatus();

　　　　　 setLabelInfo();

　　　　　 this.handleDataFun(page.getPageData());

　　　 }

　　　 

　　　 //设置所有分页按钮的状态为不可用

　　　 private function setAllButtonStatusDisabled():void

　　　 {

　　　　　 this.firstButton.enabled=false;

　　　　　 this.previousButton.enabled=false;

　　　　　 this.nextButton.enabled=false;

　　　　　 this.lastButton.enabled=false;

　　　 }

　　　 

　　　 //设置分页按钮的状态

　　　 //步骤为：

　　　 //　　 1.首先设置所有分页按钮的状态为不可用

　　　 //　　 2.判断是否需要启用某些分页按钮（仅当查询有数据并且数据页数大于一的时候才有必要）

　　　 //　　　　 2.1如果需要启用某些按钮分为三种情况：

　　　 //　　　　　　2.1.1位于第一页那么下一页和最后页的按钮可用

　　　 //　　　　　　2.1.2位于中间页那么所有按钮可用

　　　 //　　　　　　2.1.3位于最后也那么上一页和第一页的按钮可用

　　　 private function setButtonStatus():void

　　　 {

　　　　　 setAllButtonStatusDisabled();

　　　　　 if(page.getTotalCount()>0&&page.getPageCount()>1)

　　　　　 {

　　　　　　　if(page.getCurrentPage()==1)

　　　　　　　{

　　　　　　　　　this.nextButton.enabled=true;

　　　　　　　　　this.lastButton.enabled=true;

　　　　　　　}

　　　　　　　else if(page.getCurrentPage()<page.getPageCount()&&page.getCurrentPage()>1)

　　　　　　　{

　　　　　　　　　this.nextButton.enabled=true;

　　　　　　　　　this.firstButton.enabled=true;

　　　　　　　　　this.previousButton.enabled=true;

　　　　　　　　　this.lastButton.enabled=true;

　　　　　　　}

　　　　　　　else if(page.getCurrentPage()==page.getPageCount())

　　　　　　　{

　　　　　　　　　this.firstButton.enabled=true;

　　　　　　　　　this.previousButton.enabled=true;

　　　　　　　}　　　　　　 

　　　　　 }

　　　 }　 

　　　 

　　　 //设置查询结果分页信息的label内容

　　　 private function setLabelInfo():void

　　　 {

　　　　　 this.totalPageInfoLbl.text="共"+page.getPageCount()+"页";

　　　　　 this.curPageInfoLbl.text="当前第"+page.getCurrentPage()+"页";

　　　 }

　　　 

　　}

}







package utils.page

{

　　import entity.ConsumptionRecord;

　　

　　//分页数据组件类

　　//作者：孙镜涛

　　//日期：2010-01-12

　　//描述：本类主要负责对分页数据的状态进行控制，以及进行查询数据

　　public class PageUtils

　　{

　　　 //查询数据的函数

　　　 private var exeFun:Function;

　　　 

　　　 //分页查询的sql

　　　 private var sql:String;

　　　 //每页显示的记录条数

　　　 private var pageNumber:int=0;

　　　 //当前查询的记录总数

　　　 private var totalCount:int=0;

　　　 //当前所处的页数

　　　 private var currentPage:int=0;

　　　 //当前查询的记录总页数

　　　 private var totalPage:int=0;

　　　 

　　　 public function getPageCount():int

　　　 {

　　　　　 return this.totalPage;

　　　 }

　　　 

　　　 public function getTotalCount():int

　　　 {

　　　　　 return this.totalCount;

　　　 }

　　　 

　　　 public function getCurrentPage():int

　　　 {

　　　　　 return this.currentPage;

　　　 }

　　　 

　　　 public function setCurrentPage(pageNum:int):void

　　　 {

　　　　　 this.currentPage=pageNum;

　　　 }

　　　 

　　　 //构造函数， exeFun为查询数据的函数，签名需要符合：(sql:String):Array

　　　 //　　　　 pageNum为每页显示记录数，默认为10

　　　 public function PageUtils(exeFun:Function,pageNum:int=10)

　　　 {

　　　　　 this.exeFun=exeFun;

　　　　　 this.pageNumber=pageNum;

　　　 }

　　　 

　　　 //初始化查询sql，如果必要那么进行分页数据的初始化

　　　 //具体步骤为：

　　　 //　　　　 1.如果本次查询和上次查询的sql不一样，那么进行分页数据初始化

　　　 //　　　　 2.构造查询记录总数的sql

　　　 //　　　　 3.根据查询记录总数的结果初始化本类的相关变量，如果没有返回结果那么使用默认值：0

　　　 public function initSqlAndInitDataIfNecessary(sql:String):void

　　　 {

　　　　　 if(this.sql!=sql)

　　　　　 {

　　　　　　　this.sql=sql;

　　　　　　　var countSql:String="SELECT COUNT(*) COUNT_NUMBER "+sql.substring(sql.indexOf("FROM"));

　　　　　　　var data:Array=exeFun(countSql);

　　　　　　　if(data!=null)

　　　　　　　{　 

　　　　　　　　　//设置总条数

　　　　　　　　　this.totalCount=data[0].COUNT_NUMBER;

　　　　　　　　　//设置总页数

　　　　　　　　　this.totalPage=this.totalCount%this.pageNumber==0?this.totalCount/this.pageNumber:this.totalCount/this.pageNumber+1;

　　　　　　　　　//设置当前页

　　　　　　　　　this.currentPage=1;

　　　　　　　}　 

　　　　　 }

　　　 }

　　　 

　　　 //获取分页数据的方法

　　　 public function getPageData():Array

　　　 {

　　　　　 var tempSql:String=this.sql+getLimitOffsetSuffix(this.pageNumber,(this.currentPage-1)*this.pageNumber);

　　　　　 return exeFun(tempSql);　　　　　　

　　　 }

　　　 

　　　 //为查询sql增加分页条件

　　　 private function getLimitOffsetSuffix(limit:int,offset:int):String

　　　 {

　　　　　 return " LIMIT "+limit+" OFFSET "+offset;

　　　 }



　　}

}







使用该代码你需要做什么：

　　　　　 //处理分页数据的方法

　　　　　 private function bindDataToGrid(data:Array):void

　　　　　 {

　　　　　　　//将数据绑定到DataGrid上

　　　　　　　dataGrid.dataProvider=data;

　　　　　 }

　　　　　 //执行数据查询的方法

　　　　　　public static function execute(sql:String):Array

　　　　　 {　　　

　　　　　　　 sqlStatement.text=sql;

　　　　　　　 sqlStatement.execute();

　　　　　　　 return sqlStatement.getResult().data;

　　　　　 }

　　　　　 //查询条件改变时执行的方法

　　　　　 private function searchConditionChanged():void

　　　　　 {

//初始化分页组件

var pageComponent:PageComponent=new

PageComponent(firstBtn,nextBtn,previousBtn,lastBtn,lblCurrentPage,lblTotalPage,bindDataToGrid,execute,20);　　　 

var sql:String=”select name id from users”;

//初始化查询sql

　　　　　　　pageComponent.initSql(sql);　　　　　　

　　　　　 }