推荐订阅源

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

下面贴出代码

PagingBar.mxml

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.*"

1. <common:PagingBar width="100%" height="5%" id="pageBar">  
2.         </common:PagingBar>  

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

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

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

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

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.         }