flex 分页功能参考

你的名字 2022-09-29 12:57 152阅读 0赞

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** );  
  
        \}  
         
    \}  
\}