Flex分頁控件

2019-11-17 03:52:33

字體：大中小

來源：轉載

供稿：網友

提到分頁大家應該都很熟悉了，幾乎所有的應用中都會用到。因而完成一個分頁組件在不同的應用中進行復用是必須的，剛寫完了一個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);

           }

上一篇：基于插件式的開發框架: (2)責任分配

下一篇：關于測試用例的一點思考