Datagrid分页

Datagrid没有自己的分页组件，只好自己做。本分页组件只接受外部传进的分页参数，生成页面分页信息。作为标签独立使用。

 

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" creationComplete="init()" >
3.     <!-- 基于服务器端的分页组件 -->
4.     <mx:Script>
5.         <![CDATA[
6.             import mx.collections.ArrayCollection;
7.             import mx.events.FlexEvent;
8.             import mx.controls.Alert;
9.             private var totalCount:Number=0;//总记录数
10.             private var countPerPage:Number=1;//每页记录数
11.             [Bindable]
12.             private var curPage:Number=1;//当前
13.             [Bindable]
14.             private var totalPage:Number=1;//总页数
15.             private var jumpFun:Function;
16.             private var pageC:ArrayCollection=new ArrayCollection();
17.             //初始化
18.             private function init():void {
19.                 firstPageBtn.enabled=false;
20.                 prePageBtn.enabled=false;
21.                 nextPageBtn.enabled=false;
22.                 lastPageBtn.enabled=false;
23.                 this.addEventListener(FlexEvent.DATA_CHANGE,dataUpdate);
24.             }
25.             private function dataUpdate(e:FlexEvent):void {
26.                 update();
27.             }
28.             //执行更新
29.             private function update():void {
30.                 
31.                 
32.                 this.totalCount=this.data.totalCount;
33.                 this.countPerPage=this.data.countPerPage;
34.                 this.curPage=this.data.curPage;
35.                 this.totalPage=Math.ceil(totalCount/countPerPage);
36.                 this.jumpFun=this.data.jumpFun;
37.                 this.pageC.removeAll();
38.                 for(var i=1;i<=totalPage;i++){
39.                     var o:Object=new Object();
40.                     o.num=i;
41.                     this.pageC.addItem(o);
42.                 }
43.                 checkButton();
44.             }
45.             //根据总页数和当前页数，调整按钮的可用性
46.             private function checkButton():void{
47.                 if(totalPage==1){
48.                     firstPageBtn.enabled=false;
49.                     prePageBtn.enabled=false;
50.                     nextPageBtn.enabled=false;
51.                     lastPageBtn.enabled=false;
52.                 }else if(curPage==1){
53.                     firstPageBtn.enabled=false;
54.                     prePageBtn.enabled=false;
55.                     nextPageBtn.enabled=true;
56.                     lastPageBtn.enabled=true;
57.                 }else if(curPage==totalPage){
58.                     firstPageBtn.enabled=true;
59.                     prePageBtn.enabled=true;
60.                     nextPageBtn.enabled=false;
61.                     lastPageBtn.enabled=false;
62.                 }
63.                 jumpPageBtn.selectedIndex=(curPage-1);
64.             }
65.             //执行页面跳转
66.             private function jumpToPage(pageNum:Number):void{
67.                 //Alert.show("to page"+ pageNum);
68.                 if(jumpFun){
69.                     jumpFun(pageNum);
70.                 }
71.             }
72.             private function selectChanged(event:Event):void{
73.                 var num:Number=ComboBox(event.target).selectedItem.num;
74.                 jumpToPage(num);
75.             }
76.                
77.         ]]>
78.     </mx:Script>
79.     <mx:Label text="{curPage}/{totalPage}页"/>
80.     <mx:Button id="firstPageBtn" label="首页" click="jumpToPage(1)"/>
81.     <mx:Button id="prePageBtn" label="上一页" click="jumpToPage(curPage-1)"/>
82.     <mx:Button id="nextPageBtn" label="下一页" click="jumpToPage(curPage+1)"/>
83.     <mx:Button id="lastPageBtn" label="末页" click="jumpToPage(totalPage)"/>  
84.     <mx:Label text="跳转到"/>  
85.     <mx:ComboBox id="jumpPageBtn" dataProvider="{pageC}" labelField="num" change="selectChanged(event)" maxWidth="100"/>
86. </mx:HBox>

保存为com/company/component/controls/SPagination.MXML

 

调用方式如下：

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:company="com.company.component.controls.*" creationComplete="init()" >
3.     <mx:Script>
4.         <![CDATA[
5.             import mx.controls.Alert;
6.             private function init():void {
7.                 //update();
8.                 var pageObject:Object=new Object();
9.                 pageObject.totalCount=120;
10.                 pageObject.countPerPage=20;
11.                 pageObject.curPage=6;
12.                 pageObject.jumpFun=jumpToPage;
13.                 myPagination.data=pageObject;
14.             }
15.             private function jumpToPage(pageNum:Number):void{
16.                 Alert.show("out to page"+ pageNum);
17.                 //这里写上执行向服务器请求查询的代码
18.             }
19.         ]]>
20.     </mx:Script>
21.     <mx:VBox >
22.         <mx:DataGrid id="dataGrid" 
23.             width="320" 
24.             rowCount="8" 
25.             verticalScrollPolicy="on"
26.             > 
27.         <mx:columns> 
28.             <mx:DataGridColumn dataField="type" /> 
29.             <mx:DataGridColumn dataField="time" 
30.                     headerText="time (ms)" 
31.                     /> 
32.         </mx:columns> 
33.     </mx:DataGrid> 
34.     <company:SPagination id="myPagination"/>
35.         
36.     
37.     </mx:VBox>
38. </mx:Application>