flex 分页功能参考

0. 为外层容器的creationComplete指定获取数据的方法

 

         creationComplete="getInfo(1)"//1是当前页

 

1. 获取数据的方法

<fx:Script>
        <![CDATA[

 

            import com.adobe.cairngorm.CairngormUtil;
            import fx.model.ModelConfig;
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
           
            private var selectedPaperids:ArrayCollection = new ArrayCollection();

            //ModelConfig存储全局配置信息，getOne()以单例的方式返回一个对象注意ModelConfig要声明[Bindable]

 

            [Bindable]
            public var model:ModelConfig=ModelConfig.getOne();

 

           /**
             * 页面初始化函数
             * 设置查询条件值
             * 设置pagingbar
             **/
            public function getInfo(page:int):void{
                //参数处理：包括查询约束条件、分页信息
                var params:Object={paperName:paperName.text
                    ,source:source.text
                    ,currentPage:page
                    ,pageSize:10
                    ,pageNumShow:10
                    ,eventName:"TestCD"
                    ,pagingbar:pagingBar
                };
                //调用事件处理类
                CairngormUtil.event("TestCD",params);
            }

     ]]>
    </fx:Script>

 

2. 数据显示界面调用分页组件

<paging:PagingBar id="pagingBar"></paging:PagingBar>

 

 

3.TestCD.as

-------------------------------------------------------------------

package fx.commands
{
    import com.adobe.cairngorm.BaseCommand;
    import com.adobe.cairngorm.CairngormUtil;
    import com.adobe.cairngorm.control.CairngormEvent;
    import com.adobe.serialization.json.JSON;
   
    import flash.events.MouseEvent;
   
    import fx.model.ModelConfig;
    import fx.util.PagingBar;
   
    import mx.collections.ArrayCollection;
    import mx.controls.Alert;
    import mx.controls.Button;
    import mx.formatters.DateFormatter;
   
    public class TestCD extends BaseCommand
    {
        public var model:ModelConfig=ModelConfig.getOne();
        public var pbar:PagingBar=new PagingBar();
       
        public function TestCD()
        {
            //TODO: implement function
            super();
        }

       
        /**
         * 获取查询约束条件查询已做试卷
         **/
        override public function execute(event:CairngormEvent):void{
            //查询界面传来的参数
            var data:Object=event.data;

            //设置pbar 对应getInfo(1)中的pagingbar:pagingBar
            pbar = data.pagingbar;

            this.showBusy();
           
            var url:String = model.urlRemoteWebServer+"/testAction.action";
            //存储查询条件
            model.testPageBar.params={paperName:data.paperName,source:data.source,currentPage:data.currentPage,pageSize:data.pageSize,pageNumShow:data.pageNumShow,eventName:data.eventName,pagingbar:data.pagingbar};
            var params:Object={userid:model.uservo.getUserid(),papername:data.paperName,source:data.source,currentPage:data.currentPage,pageSize:data.pageSize};
            //发送请求到远程服务器端获取信息
            CairngormUtil.send(url
                ,this
                ,params);
        }
       
        override public function result(data:Object):void{
            var json_str:String = data.result as String;
            //trace(json_str);

            //服务器端的返回结果是json的形式
            var result_str:Object= JSON.decode(json_str);

            //返回的json串自己设定了一个标识，标识服务器端操作是否成功。根据自己定义的情况定
            if(result_str.status=="200"){
                //设置界面上要展示的已做试卷数据
                getData(result_str.context[0].infos);
                pbar.pageBar=model.testPageBar;//设置对应分页信息来自testPageBar
                //获取到返回数据后，设置分页基本信息
                model.testPageBar.initPageBar(result_str.context[0].totalSize,model.testPageBar.pageSize,result_str.context[0].currentPage,model.testPageBar.params.pageNumShow,model.testPageBar.params.eventName);
                //view.delayView.addElement( new DelayView() );
               
            }else{
               
            }
            this.closeBusy();
        }
        /**
         * 填充数据到ArrayCollection
         **/
        public function getData(data:Object):void{
            //清空数据
            model.testPageBar.clearOrgData();

            for(var i:int=0;i<data.length;i++){
                var testData:Object={id:data[i].id,paperId:data[i].paperId,paperName:data[i].paperName,source:data[i].source,userScore:data[i].userScore,finalTime:data[i].finalTimeStr};
         //设定数据到orgData中      

model.testPageBar.setOrgData(testData);

            }

        }
       
        override public function fault(info:Object):void{
            Alert.show(info.toString());
        }
    }
}

----------------------------------------------------------------------------------

 

 

分页PagingBar.mxml

-----------------------------------------------------------------------------------

<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:mx="library://ns.adobe.com/flex/mx"
         paddingLeft="10"
         backgroundColor="white">
    <fx:Style>
       
        LinkBar {
            borderStyle: none;
            backgroundAlpha: 0.06;
            separatorColor: #c4cccc;
            rollOverColor: #009999;
            selectionColor: #7fcdfe;
            textSelectedColor: #6600cc;
            disabledColor: #33ffff;
            dropShadowEnabled: false;
        }
    </fx:Style>
    <fx:Script>
        <![CDATA[
            import com.adobe.cairngorm.CairngormUtil;
           
            import flash.events.KeyboardEvent;
           
            import fx.model.ModelConfig;
           
            import mx.collections.ArrayCollection;
            import mx.controls.AdvancedDataGrid;
            import mx.controls.DataGrid;
            import mx.events.ItemClickEvent;
            import mx.utils.ObjectProxy;
            import mx.validators.NumberValidator;
           
            [Bindable]
            public var model:ModelConfig=ModelConfig.getOne();//在声明ModelConfig是用到[Bindable],在界面使用时也需要用[Bindable]

            [Bindable]
            public var pageBar:PageBar=null;//这才是最关键的，分页的相关信息都从此对象来获取
           
            public var advancedDataGrid:AdvancedDataGrid=null;
       
            //页面初始化函数
            public function getDatas(page:int):void{
                //重新设定当前页
                pageBar.params.currentPage=page;
                //参数处理
                var params:Object=pageBar.params;
               
                //调用事件处理类
                CairngormUtil.event(pageBar.eventName,params);
               
            }
            /**
             * 页码按钮按下,first,pre,next,last
             */
            private function navigateButtonClick(pageString:int):void{
                //1.重新设置首页、上一页、下一页、尾页
                //3.重新设置每页显示的页码条
                //2.重新填充页面数据
                //pageBar.createNavBar(pageString);
               
                getDatas(pageString);
            }
            /**
             * 页码按钮按下(页码条点击)
             */
            private function navigatePage(event:ItemClickEvent):void
            {
                //重发数据请求
                getDatas(event.item.data);
            }
        ]]>
    </fx:Script>

    <mx:Label text="第" width="100%"/>
    <mx:Label id="curPageLabel" text="{pageBar.currentPage}" width="100%"/>
    <mx:Label text="页/共" width="100%"/>
    <mx:Label id="totalPageLabel" text="{pageBar.totalPageSize}" width="100%"/>
    <mx:Label text="页 共" width="100%"/>
    <mx:Label id="countRecordSizeLabel" text="{pageBar.totalRecordSize}" width="100%"/>
    <mx:Label text="条记录" width="100%"/>

    <mx:Button id="firstNavBtn" label="首页" click="navigateButtonClick(pageBar.firstPage)"/>
    <mx:Button id="preNavBtn" label="上一页" click="navigateButtonClick(pageBar.prePage)"/>

    <mx:LinkBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{pageBar.pageNumData}"/>
   
    <mx:Button id="nextNavBtn" label="下一页" click="navigateButtonClick(pageBar.nextPage)"/>
    <mx:Button id="lastNavBtn" label="尾页" click="navigateButtonClick(pageBar.lastPage)"/>
   
</mx:HBox>

 

-----------------------------------------------------------------------------------

 

分页数据存储类PageBar.as

------------------------------------------------------------------------------------

package fx.util
{
    import com.adobe.cairngorm.CairngormUtil;
   
    import mx.collections.ArrayCollection;
    import mx.controls.Button;
    import mx.controls.Label;
    import mx.controls.LinkBar;
    import mx.events.ItemClickEvent;
   
    //必须声明成Bindable才能在其他mxml中Bindable
    [Bindable]
    public class PageBar
    {
        /**
         * 查询数据的事件名称
         **/
        public var eventName:String="";
        /**
         * 总记录数
         **/
        public var totalRecordSize:int=0;
        /**
         * 每页显示行数
         **/
        public var pageSize:int=10;       
        /**
         * 当前页数
         **/
        public var currentPage:int=1;       
        /**
         * 总页数
         **/
        public var totalPageSize:int=1;   
        /**
         * 首页
         **/
        public var firstPage:int=1;
        /**
         * 上一页
         **/
        public var prePage:int=1;
        /**
         * 下一页
         **/
        public var nextPage:int=1;
        /**
         * 尾页
         **/
        public var lastPage:int=1;
        /**
         * 所有的数据
         **/
        public var orgData:ArrayCollection=new ArrayCollection();
        /**
         * 每页显示页码数
         **/
        public var pageNumShow:int=10;
        /**
         * 每页显示页码
         **/
        public var pageNumData:ArrayCollection=new ArrayCollection();
        /**
         * 存储查询参数
         * */
        public var params:Object={};
        /**
         * 当前页
         **/
        public var curPageLabel:Label=new Label();
        /**
         * 共多少页
         **/
        public var totalPageLabel:Label=new Label();
        /**
         * 共多少条记录
         **/
        public var countRecordSizeLabel:Label=new Label();
        /**
         * 首页
         **/
        public var firstNavBtn:Button=new Button();
        /**
         * 上一页
         **/
        public var preNavBtn:Button=new Button();
        /**
         * 分页块
         **/
        public var pageNav:LinkBar=new LinkBar();
        /**
         * 下一页
         **/
        public var nextNavBtn:Button=new Button();
        /**
         * 尾页
         **/
        public var lastNavBtn:Button=new Button();
       
        public function PageBar()
        {
        }
       
        /**
         * 计算总页数
         **/
        public function countTotalPageSize():void{
            //1.总记录数小于每页显示记录数时
            if(this.totalRecordSize<=this.pageSize && this.totalRecordSize>=0){
                this.totalPageSize=1
            }
            //2.总记录数大于每页显示记录数时  
            if(this.totalRecordSize>this.pageSize && this.pageSize>=0){
                //trace("this.totalRecordSize/this.pageSize="+this.totalRecordSize/this.pageSize);
                //2.1 总记录数正好是每页显示记录数的倍数时，总页数=总记录数/每页显示记录数
                this.totalPageSize=this.totalRecordSize/this.pageSize;
                //trace("this.totalRecordSize%this.pageSize="+this.totalRecordSize%this.pageSize);
                //2.2 总记录数不是每页显示记录数的倍数时，总页数=总记录数/每页显示记录数+1
                if(this.totalRecordSize%this.pageSize>0){
                    this.totalPageSize+=1;
                }
            }
        }
        /**
         * 设置首页和尾页
         **/
        public function setFirstPageAndLastPage():void{
            //1.总体分页数第一页和最后一页
            this.firstPage=1;
            this.lastPage=this.totalPageSize;
            //2.还有一中设置是根据this.pageNumData来设置
            var size:int=this.pageNumData.length;
            //this.firstPage=this.pageNumData.getItemAt(0).label
            //this.lastPage=this.pageNumData.getItemAt(size-1).label
        }

        /**
         * 初始化分页，设置总记录数、每页显示记录数、当前页、计算总页数、设置首页、设置尾页
         * @param totalRecordSize 总记录数
         * @param pageSize 每页显示记录数
         * @param currentPage 当前页页码
         *
         **/
        public function initPageBar(totalRecordSize:int,pageSize:int,currentPage:int,pageNumShow:int,eventName:String):void{
            this.pageSize=pageSize;
            this.totalRecordSize=totalRecordSize;
            this.pageNumShow=pageNumShow;
            this.eventName=eventName;
            countTotalPageSize();
            this.currentPage=currentPage;
            createNavBar(this.currentPage);
            setNavInfo();
           
        }
        /**
         * 创建各分页
         **/
        public function createNavBar(currentPage:int):void{
            //得知总页数、当前页数、每页显示页码数后就可以设置上一页和下一页
            //上一页
            this.prePage=this.currentPage-1>0?this.currentPage-1:1;
            //下一页
            this.nextPage=this.currentPage+1<=this.totalPageSize?this.currentPage+1:this.totalPageSize;
            this.pageNumData.removeAll();
            if(this.totalPageSize<=this.pageNumShow){//1.总页数小于设定的页码数pageNumShow时，显示所有页码
                for(var i:int=0;i<this.totalPageSize;i++){
                    //确保小于总页数，否则退出循环
                    this.pageNumData.addItem({label: 1+i ,data: 1+i});
                }
            }else{
                if(this.totalPageSize-this.currentPage+1<=this.pageNumShow){//2.剩余页码数(this.totalPageSize-this.currentPage+1)小于设定页码数pageNumShow,补全页码
                    for(var i:int=this.totalPageSize-this.pageNumShow+1;i<=this.totalPageSize;i++){
                        //确保小于总页数，否则退出循环
                        this.pageNumData.addItem({label: i ,data: i});
                    }
                }else{
                    for(var i:int=0;i<this.pageNumShow;i++){//3.当前页码+设定页码数小于totalPageSize时，正常滚动
                        //确保小于总页数，否则退出循环
                        if(this.currentPage+i<=this.totalPageSize){
                            this.pageNumData.addItem({label: this.currentPage+i ,data: this.currentPage+i});
                        }
                    }
                }
            }
            setFirstPageAndLastPage();
        }
        /**
         *    设置分页条上的分页统计信息
         **/
        public function setNavInfo():void{
            //设置界面上的分页统计数据
            this.curPageLabel.text=this.currentPage.toString();
            this.totalPageLabel.text=this.totalPageSize.toString();
            this.countRecordSizeLabel.text=this.totalRecordSize.toString();
            this.pageNav.dataProvider=this.pageNumData;
        }
        /**
         * 清空orgData中的数据，此数据用于在界面展示
         **/
        public function clearOrgData():void{
            this.orgData.removeAll();
        }
        /**
         *    绑定数据到orgData中
         **/
        public function setOrgData(data:Object):void{
            this.orgData.addItem(data);
        }
        /**
         * 清空分页条
         **/
        public function clearPageNumData():void{
            this.pageNumData.removeAll();
        }
        /**
         *    设定分页条
         **/
        public function setPageNumData(data:Object):void{
            this.pageNumData.addItem(data);
        }

    }
}

 

--------------------------------------------------------------------

ModelConfig.as

------------------------------------------------------------

package fx.model
{
    import com.adobe.cairngorm.model.IModelLocator;
   
    import fx.util.PageBar;
    import fx.util.Pages;
   
    import mx.collections.ArrayCollection;
   
    import spark.components.TitleWindow;
    import spark.components.WindowedApplication;
   
   
    [Bindable]
    /**
     *配置所有需要的model类
     * @author Administrator
     *
     */
    public class ModelConfig implements IModelLocator
    {
      
        //远端服务器地址
        public var urlRemoteWebServer:String="http://www.test.com";

        //存储我已做试卷分页信息
        public var testPageBar:PageBar=new PageBar();

        public var uservo:UserVO=null;//存放用户登录的信息
        //公用
        public var rootWin:WindowedApplication;
        public var loginViewWin:TitleWindow;
        public var mainViewWin:TitleWindow;
        public var doEvaluateVO:DoEvaluateVO;
      
           /////////////////////////////////////////////////////////////////         
          private static var one:ModelConfig=null;
         public static function getOne():ModelConfig
          {
               if (one == null)one = new ModelConfig();
               return one;
          }
          public function ModelConfig()
          {
             
          }
         
    }
}

----------------------------------------------------------

注册事件CommandConfig.as

 

package fx.commands
{
    import com.adobe.cairngorm.control.FrontController;
   
   
    /**
     * 注册所有的控制器
     * @author Administrator
     *
     */
    public class CommandConfig extends FrontController
    {
         
       
        public function CommandConfig(){
           //事件处理类不注册是不能使用的

          add(TestCD);

        }
       
    }
}