Flex分頁(yè)控件

2019-11-17 03:52:33

字體：大中小

供稿：網(wǎng)友

提到分頁(yè)大家應(yīng)該都很熟悉了，幾乎所有的應(yīng)用中都會(huì)用到。因而完成一個(gè)分頁(yè)組件在不同的應(yīng)用中進(jìn)行復(fù)用是必須的，剛寫(xiě)完了一個(gè)flex分頁(yè)的組件，拿來(lái)分享一下。如果有什么建議、問(wèn)題歡迎大家提出。希望可以為flex的開(kāi)發(fā)者們提供一個(gè)可靠的分頁(yè)組件。



package utils.page

{

    import Flash.events.MouseEvent;



    import mx.controls.Button;

    import mx.controls.Label;



    //分頁(yè)組件類

    //作者：孫鏡濤

    //日期：2010-01-12

    //描述：本類主要負(fù)責(zé)對(duì)分頁(yè)相關(guān)的按鈕以及信息顯示的標(biāo)簽進(jìn)行管理；對(duì)數(shù)據(jù)顯示內(nèi)容進(jìn)行控制

    public class PageComponent

    {

       //首頁(yè)按鈕

       PRivate var firstButton:Button;

       //下一頁(yè)按鈕

       private var nextButton:Button;

       //前一頁(yè)按鈕

       private var previousButton:Button;

       //最后頁(yè)按鈕

       private var lastButton:Button;

       //當(dāng)前頁(yè)信息顯示

       private var curPageInfoLbl:Label;

       //所有頁(yè)信息顯示

       private var totalPageInfoLbl:Label;

       //當(dāng)前頁(yè)改變時(shí)數(shù)據(jù)處理方法

       private var handleDataFun:Function;

       //分頁(yè)數(shù)據(jù)的處理類

       private var page:PageUtils;



       //first,next,previous,last:第一頁(yè)，下一頁(yè)，上一頁(yè)，最后頁(yè)的button

       //curPageInfoLbl,totalPageInfoLbl:當(dāng)前頁(yè)，所有頁(yè)信息顯示的label

       //handleDataFun：分頁(yè)的頁(yè)碼改變后數(shù)據(jù)的處理函數(shù)，該函數(shù)符合的簽名為：（data:Array):void

       //exeFun:查詢數(shù)據(jù)的sql，該函數(shù)的簽名為：（sql:String):Array

       //pageNum:每頁(yè)顯示數(shù)據(jù)條數(shù)

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

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

       {

           //分頁(yè)按鈕初始化

           this.firstButton=first;

           this.nextButton=next;

           this.previousButton=previous;

           this.lastButton=last;



           //分頁(yè)信息顯示控件初始化

           this.curPageInfoLbl=curPageInfoLbl;

           this.totalPageInfoLbl=totalPageInfoLbl;



           //頁(yè)面改變后數(shù)據(jù)處理函數(shù)

           this.handleDataFun=handleDataFun;



           //分頁(yè)數(shù)據(jù)類初始化

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



           //為分頁(yè)按鈕增加相應(yīng)的事件處理函數(shù)

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

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

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

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

       }



       //需要分頁(yè)查詢的的sql

       public function initSql(sql:String):void

       {

           this.page.initSqlAndInitDataIfNecessary(sql);

           setButtonStatus();

           setLabelInfo();

           this.handleDataFun(page.getPageData());

       }

       //分頁(yè)按鈕被點(diǎn)擊時(shí)的處理邏輯為：

       //1.設(shè)置當(dāng)前數(shù)據(jù)的頁(yè)數(shù)

       //2.設(shè)置分頁(yè)控件按鈕的狀態(tài)

       //3.設(shè)置分頁(yè)控件信息顯示label的內(nèi)容

       //4.查詢?cè)擁?yè)數(shù)據(jù)并執(zhí)行數(shù)據(jù)處理函數(shù)



       //點(diǎn)擊第一頁(yè)時(shí)觸發(fā)的事件

       public function firstButtonClicked(event:MouseEvent):void

       {

           page.setCurrentPage(1);

           setButtonStatus();

           setLabelInfo();

           this.handleDataFun(page.getPageData());

       }



       //點(diǎn)擊下一頁(yè)時(shí)觸發(fā)的事件

       public function nextButtonClicked(event:MouseEvent):void

       {

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

           {

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

           }

           setButtonStatus();

           setLabelInfo();

           this.handleDataFun(page.getPageData());

       }



       //點(diǎn)擊上一頁(yè)時(shí)觸發(fā)的事件

       public function previousButtonClicked(event:MouseEvent):void

       {

           if(page.getCurrentPage()>1)

           {

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

           }

           setButtonStatus();

           setLabelInfo();

           this.handleDataFun(page.getPageData());

       }



       //點(diǎn)擊最后頁(yè)時(shí)觸發(fā)的事件

       public function lastButtonClicked(event:MouseEvent):void

       {

           page.setCurrentPage(page.getPageCount());

           setButtonStatus();

           setLabelInfo();

           this.handleDataFun(page.getPageData());

       }



       //設(shè)置所有分頁(yè)按鈕的狀態(tài)為不可用

       private function setAllButtonStatusDisabled():void

       {

           this.firstButton.enabled=false;

           this.previousButton.enabled=false;

           this.nextButton.enabled=false;

           this.lastButton.enabled=false;

       }



       //設(shè)置分頁(yè)按鈕的狀態(tài)

       //步驟為：

       //     1.首先設(shè)置所有分頁(yè)按鈕的狀態(tài)為不可用

       //     2.判斷是否需要啟用某些分頁(yè)按鈕（僅當(dāng)查詢有數(shù)據(jù)并且數(shù)據(jù)頁(yè)數(shù)大于一的時(shí)候才有必要）

       //         2.1如果需要啟用某些按鈕分為三種情況：

       //            2.1.1位于第一頁(yè)那么下一頁(yè)和最后頁(yè)的按鈕可用

       //            2.1.2位于中間頁(yè)那么所有按鈕可用

       //            2.1.3位于最后也那么上一頁(yè)和第一頁(yè)的按鈕可用

       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;

              }

           }

       }



       //設(shè)置查詢結(jié)果分頁(yè)信息的label內(nèi)容

       private function setLabelInfo():void

       {

           this.totalPageInfoLbl.text="共"+page.getPageCount()+"頁(yè)";

           this.curPageInfoLbl.text="當(dāng)前第"+page.getCurrentPage()+"頁(yè)";

       }



    }

}

package utils.page

{

    import entity.ConsumptionRecord;



    //分頁(yè)數(shù)據(jù)組件類

    //作者：孫鏡濤

    //日期：2010-01-12

    //描述：本類主要負(fù)責(zé)對(duì)分頁(yè)數(shù)據(jù)的狀態(tài)進(jìn)行控制，以及進(jìn)行查詢數(shù)據(jù)

    public class PageUtils

    {

       //查詢數(shù)據(jù)的函數(shù)

       private var exeFun:Function;



       //分頁(yè)查詢的sql

       private var sql:String;

       //每頁(yè)顯示的記錄條數(shù)

       private var pageNumber:int=0;

       //當(dāng)前查詢的記錄總數(shù)

       private var totalCount:int=0;

       //當(dāng)前所處的頁(yè)數(shù)

       private var currentPage:int=0;

       //當(dāng)前查詢的記錄總頁(yè)數(shù)

       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;

       }



       //構(gòu)造函數(shù)， exeFun為查詢數(shù)據(jù)的函數(shù)，簽名需要符合：(sql:String):Array

       //         pageNum為每頁(yè)顯示記錄數(shù)，默認(rèn)為10

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

       {

           this.exeFun=exeFun;

           this.pageNumber=pageNum;

       }



       //初始化查詢sql，如果必要那么進(jìn)行分頁(yè)數(shù)據(jù)的初始化

       //具體步驟為：

       //         1.如果本次查詢和上次查詢的sql不一樣，那么進(jìn)行分頁(yè)數(shù)據(jù)初始化

       //         2.構(gòu)造查詢記錄總數(shù)的sql

       //         3.根據(jù)查詢記錄總數(shù)的結(jié)果初始化本類的相關(guān)變量，如果沒(méi)有返回結(jié)果那么使用默認(rèn)值：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)

              {

                  //設(shè)置總條數(shù)

                  this.totalCount=data[0].COUNT_NUMBER;

                  //設(shè)置總頁(yè)數(shù)

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

                  //設(shè)置當(dāng)前頁(yè)

                  this.currentPage=1;

              }

           }

       }



       //獲取分頁(yè)數(shù)據(jù)的方法

       public function getPageData():Array

       {

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

           return exeFun(tempSql);

       }



       //為查詢sql增加分頁(yè)條件

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

       {

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

       }

    }

}

使用該代碼你需要做什么：

           //處理分頁(yè)數(shù)據(jù)的方法

           private function bindDataToGrid(data:Array):void

           {

              //將數(shù)據(jù)綁定到DataGrid上

              dataGrid.dataProvider=data;

           }

           //執(zhí)行數(shù)據(jù)查詢的方法

            public static function execute(sql:String):Array

           {

               sqlStatement.text=sql;

               sqlStatement.execute();

               return sqlStatement.getResult().data;

           }

           //查詢條件改變時(shí)執(zhí)行的方法

           private function searchConditionChanged():void

           {

//初始化分頁(yè)組件

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);

           }

上一篇：基于插件式的開(kāi)發(fā)框架: (2)責(zé)任分配

下一篇：關(guān)于測(cè)試用例的一點(diǎn)思考