Flex4自定义分页组件

最近因为项目需求，需要写个分页组件，我这人比较懒 一般写出来之后 就记下来供以后粘贴复制了 哈哈，希望大家学习的时候不要这样搞啊

下面贴出代码

PagingBar.mxml

[html] view plaincopyprint?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009"   
  3.          xmlns:s="library://ns.adobe.com/flex/spark"   
  4.          xmlns:mx="library://ns.adobe.com/flex/mx" >  
  5.     <fx:Script>  
  6.         <![CDATA[ 
  7.             import mx.collections.ArrayCollection; 
  8.             import mx.events.ItemClickEvent; 
  9.             import flash.events.KeyboardEvent; 
  10.             import mx.controls.DataGrid; 
  11.             import mx.validators.NumberValidator; 
  12.             import mx.rpc.events.ResultEvent;  
  13.             import mx.rpc.events.FaultEvent; 
  14.             import mx.controls.Alert; 
  15.             [Bindable] 
  16.             [Embed(source='com/iman/sps/sheet/image/first.jpg')] 
  17.             public var firstIcon:Class;                
  18.             public var firstPage:uint;  
  19.              
  20.             [Bindable] 
  21.             [Embed(source='com/iman/sps/sheet/image/pre.jpg')] 
  22.             public var preIcon:Class; 
  23.             public var prePage:uint;  
  24.              
  25.             [Bindable] 
  26.             [Embed(source='com/iman/sps/sheet/image/next.jpg')] 
  27.             public var nextIcon:Class; 
  28.             public var nextPage:uint;  
  29.              
  30.             [Bindable] 
  31.             [Embed(source='com/iman/sps/sheet/image/last.jpg')] 
  32.             public var lastIcon:Class; 
  33.             public var lastPage:uint; 
  34.              
  35.             [Bindable]public var pageSize:int=15;//单页行数 
  36.             [Bindable]public var totalPage:int=1;//总页数 
  37.             [Bindable]public var currentPage:int=1;//当前页 
  38.             [Bindable]public var totalClum:int=0;//总记录数 
  39.              
  40.             //分页函数 
  41.             public var localFunction:Function=null; 
  42.              
  43.             //重新为当前页的变量赋值 
  44.             public function loadData(pageNum:int):void{ 
  45.                 this.pageSize = setPageSize.selectedItem.data as Number;  
  46.                 this.totalPage =Math.ceil(this.totalClum/this.pageSize); 
  47.                 if(pageNum>0 && pageNum<=this.totalPage){ 
  48.                     this.currentPage=pageNum; 
  49.                     if(this.localFunction!=null){ 
  50.                          
  51.                         localFunction(pageNum); 
  52.                     }else{ 
  53.                         Alert.show("请设置回调方法！"); 
  54.                     } 
  55.                 } 
  56.             } 
  57.              
  58.             //重新设置每页显示记录数 
  59.             public function changePagesize():void{ 
  60.                 //当前页首条记录的序号 
  61.                 var currentPageRows:int=((this.currentPage-1)*this.pageSize); 
  62.                 //Alert.show(String(currentPageRows)); 
  63.                 //重新设置以后，单页显示记录数 
  64.                 this.pageSize = setPageSize.selectedItem.data as Number;  
  65.                 //重新设置以后，总页数 
  66.                 this.totalPage =Math.ceil(this.totalClum/this.pageSize); 
  67.                 //重新调整当前页码           
  68.                 //Alert.show(String(newPageNum)); 
  69.                 if(this.localFunction!=null){ 
  70.                     localFunction(this.currentPage); 
  71.                 }else{ 
  72.                     Alert.show("请设置回调方法！"); 
  73.                 } 
  74.             } 
  75.         ]]>  
  76.     </fx:Script>  
  77.     <mx:Text id="temp" text="" visible="false" includeInLayout="false"/>  
  78.     <mx:HBox   
  79.         verticalGap="0"    
  80.         horizontalGap="0"   
  81.         horizontalAlign="center"  
  82.         verticalAlign="middle"  
  83.         >   
  84.         <mx:Text text="{'   共'+(totalClum)+'条记录'}" fontSize="12"/>                  
  85.         <mx:Label   text="每页显示："/>  
  86.         <mx:ComboBox id="setPageSize" width="52" height="16" change="changePagesize()">  
  87.             <mx:dataProvider>  
  88.                 <fx:Array>       
  89.                     <fx:Object label="15" data="15" />                                                                                                           
  90.                     <fx:Object label="20" data="20" />  
  91.                     <fx:Object label="30" data="30" />   
  92.                     <fx:Object label="40" data="40" />                                                                                                           
  93.                     <fx:Object label="50" data="50" />  
  94.                     <fx:Object label="60" data="60" />      
  95.                     <fx:Object label="70" data="70" />                                                                                                           
  96.                     <fx:Object label="80" data="80" />                                     
  97.                 </fx:Array>  
  98.             </mx:dataProvider>  
  99.         </mx:ComboBox>  
  100.         <mx:Label text="条"/>  
  101.           
  102.         <mx:Button id="firstNavBtn" icon="{firstIcon}" width="10" height="10" click="loadData(1)" enabled="{lbtnPrevious.enabled}"/>  
  103.         <mx:LinkButton id="lbtnFirst" label="首页" click="loadData(1)" enabled="{lbtnPrevious.enabled}" fontSize="12"/>  
  104.           
  105.         <mx:Button id="preNavBtn" icon="{preIcon}" width="7" height="10" click="loadData(currentPage-1)" enabled="{currentPage!=1?true:false}"/>  
  106.         <mx:LinkButton id="lbtnPrevious" label="上一页" click="loadData(currentPage-1)" enabled="{currentPage!=1?true:false}" fontSize="12"/>  
  107.           
  108.         <mx:Text text="{'【 '+(Math.ceil(this.totalClum/this.pageSize)>0?(currentPage):1)+'/'+(Math.ceil(this.totalClum/this.pageSize)>0?Math.ceil(this.totalClum/this.pageSize):1)+'页】  '}" fontSize="12"/>  
  109.           
  110.         <mx:Button id="nextNavBtn" icon="{nextIcon}" width="7" height="10" click="loadData(currentPage+1)" enabled="{Math.ceil(this.totalClum/this.pageSize)>(currentPage)?true:false}"/>  
  111.         <mx:LinkButton id="lbtnNext" label="下一页" click="loadData(currentPage+1)" enabled="{Math.ceil(this.totalClum/this.pageSize)>(currentPage)?true:false}" fontSize="12"/>  
  112.           
  113.         <mx:Button id="lastNavBtn" icon="{lastIcon}" width="10" height="10" click="loadData(Math.ceil(this.totalClum/this.pageSize))" enabled="{lbtnNext.enabled}"/>  
  114.         <mx:LinkButton id="lbtnLast" label="尾页" click="loadData(Math.ceil(this.totalClum/this.pageSize))" enabled="{lbtnNext.enabled}" fontSize="12"/>  
  115.           
  116.         <mx:Label text="跳转到"/>  
  117.         <mx:NumericStepper id="nsPageNum" width="50" height="22" stepSize="1" minimum="1" maximum="{Math.ceil(this.totalClum/this.pageSize)}" enabled="{lbtnJump.enabled}" cornerRadius="0" fontSize="12"/>  
  118.         <mx:Label text="页"/>  
  119.         <mx:LinkButton id="lbtnJump" label="GO"  click="loadData(nsPageNum.value)" enabled="{Math.ceil(this.totalClum/this.pageSize)>1?true:false}" fontSize="12"/>                
  120.           
  121.     </mx:HBox>  
  122. </mx:HBox>  


在其他组件中引用 其中common 是我自定义的标签 里面引入了这个分页组件的所在位置 例如： xmlns:common="com.iman.common.*"

 

[html] view plaincopyprint?
  1. <common:PagingBar width="100%" height="5%" id="pageBar">  
  2.         </common:PagingBar>  

 

写完之后说说怎么用。里面每次改变分页某个属性 就会触发一个叫做localFunction的函数 这个函数是对外暴漏给引用页面来实现他的功能的

下面是一个示例代码：作用是 首先设置初始页 然后获得 每页显示的数据记录条数 然后 实现分页组件暴露出来的分页功能函数

[html] view plaincopyprint?
  1. protected function test_clickHandler(event:MouseEvent):void  
  2.         {   firstStart=0;  
  3.             pagesize=pageBar.pageSize;  
  4.             pageBar.localFunction=fun;  
  5.   
  6.                           }  


下面我们来实现这个函数 也就是fun 这个fun获得当前页数  因为后台调用了Oracle实现的分页查询 所以我要算出数据从第几条开始 到第几条结束 然后就是调用查询方法了

[html] view plaincopyprint?
  1. public function fun(pageNo:int):void  
  2.         {  
  3.             this.firstStart=(pageNo - 1) * pageBar.pageSize;  
  4.             pagesize=pageBar.pageSize;  
  5.             commonQuery.commonQuery(firstStart, pagesize, commonQueryData,accountInfo);  
  6.         }  


posted on 2012-02-26 16:56  唐朝  阅读(2194)  评论(1)  编辑  收藏  举报

Powered by: 博客园 Copyright © 2024 唐朝
Powered by .NET 9.0 on Kubernetes