flex 客户端分页

Main.mxml

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:file="file.*"><mx:Script><!--[CDATA[import simPager.PagerEvent;import mx.collections.ArrayCollection; [Bindable] private var arr:ArrayCollection = new ArrayCollection([ {A:1, B:20, selected:false, label:"one"}, {A:2, B:20, selected:false, label:"two"}, {A:3, B:20, selected:true, label:"three"}, {A:4, B:20, selected:true, label:"four"}, {A:5, B:20, selected:true, label:"five"}, {A:6, B:20, selected:true, label:"six"}, {A:7, B:20, selected:true, label:"seven"}, {A:8, B:20, selected:true, label:"eight"}, {A:9, B:20, selected:true, label:"nine"}, {A:10, B:20, selected:true, label:"ten"}, {A:11, B:20, selected:true, label:"Hello"}, {A:12, B:20, selected:true, label:"Hello"}, {A:13, B:20, selected:true, label:"Hello"}, {A:14, B:20, selected:true, label:"Hello"}, {A:15, B:20, selected:true, label:"Hello"}, {A:16, B:20, selected:false, label:"Hello"}, {A:17, B:20, selected:false, label:"Hello"}, {A:18, B:20, selected:true, label:"seven"}, {A:19, B:20, selected:true, label:"eight"}, {A:20, B:20, selected:true, label:"nine"}, {A:21, B:20, selected:true, label:"ten"}, {A:22, B:20, selected:true, label:"Hello"}, {A:23, B:20, selected:true, label:"Hello"}, {A:24, B:20, selected:true, label:"Hello"}, {A:25, B:20, selected:true, label:"Hello"}, {A:26, B:20, selected:true, label:"Hello"}, {A:27, B:20, selected:false, label:"Hello"}, {A:28, B:20, selected:false, label:"Hello"} ]); private function initData():void{this.pbar.dataGrid=dg2;this.pbar.orgData=arr;this.pbar.dataBind();}]]--></mx:Script><mx:Panel width="704" height="296" layout="absolute"><mx:DataGrid id="dg2" x="10" y="10" width="432" height="200" creationComplete="initData()"><mx:columns><mx:DataGridColumn headerText="Column 1" dataField="A"/><mx:DataGridColumn headerText="Column 2" dataField="B"/><mx:DataGridColumn headerText="Column 3" dataField="label"/></mx:columns></mx:DataGrid><file:PagingBar id="pbar" x="10" y="218" width="674"></file:PagingBar></mx:Panel></mx:Application> 

PagingBar.mxml(修改了网上的帖子)

<?xml version="1.0" encoding="utf-8"?><mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white" fontSize="12" paddingTop="2"><mx:Script><!--[CDATA[ import mx.collections.ArrayCollection; import mx.events.ItemClickEvent; import flash.events.KeyboardEvent; import mx.controls.DataGrid; import mx.validators.NumberValidator; [Bindable] [Embed(source='images/first.png')] private var firstIcon:Class; private var firstPage:uint; [Bindable] [Embed(source='images/previous.png')] private var preIcon:Class; private var prePage:uint; [Bindable] [Embed(source='images/next.png')] private var nextIcon:Class; private var nextPage:uint; [Bindable] [Embed(source='images/last.png')] private var lastIcon:Class; private var lastPage:uint; //页码条数据,绑定 [Bindable] private var nav:ArrayCollection = new ArrayCollection(); //默认起始页码,第1页 private var currentPageIndex:uint = 0; //是否已初始化 private var isInit:Boolean=true; //总页数 private var totalPages:uint = 0; //是否重绘页码条，当使用服务端分页时使用 private var isCreateNavBar:Boolean = true; /************************************************************/ //显示到Grid的数据 [Bindable] public var viewData:ArrayCollection=null; //所有的数据 public var orgData:ArrayCollection=null; //每页记录数下拉框 public var pageSizeDropDownListData:ArrayCollection=null; // 每页记录数 public var pageSize:uint = 10; // 页码条上显示页码的个数 public var navSize:uint = 3; //记录总数，调用服务端发页时使用 public var totalRecord:int=0; //分页函数 public var pagingFunction:Function=null; //分页条对应的Grid public var dataGrid:DataGrid=null; /***************************************************************/ public function dataBind(isServerSide:Boolean=false):void{ //是否初始化 if(isInit){if(pageSizeDropDownListData==null){pageSizeDropDownListData = new ArrayCollection();pageSizeDropDownListData.addItem({label:5,data:5});pageSizeDropDownListData.addItem({label:10,data:10});pageSizeDropDownListData.addItem({label:20,data:20});pageSizeDropDownListData.addItem({label:30,data:30}); }pageSizeComobox.dataProvider=pageSizeDropDownListData;pageSizeComobox.selectedIndex=1;isInit=false; } // refreshDataProvider(currentPageIndex,isCreateNavBar,pageSize,isServerSide); } /*** 构建页码条 * pages:总页数 * pageIndex:当前页（注意，从0开始） * */ private function createNavBar(pageIndex:uint = 0):void{ nav.removeAll(); //向前图标操作,first,Pre if( pageIndex > 1 ){ firstPage=0; firstNavBtn.visible=true; var intLFive:int = pageIndex-navSize; // calculate start of last 5; // prePage=intLFive; preNavBtn.visible=true; } else{ firstNavBtn.visible=false; preNavBtn.visible=false; } //页码条 for( var x:uint = 0; x < navSize; x++){ var pg:uint = x + pageIndex; nav.addItem({label: pg + 1,data: pg});//var pgg:uint = pg+1;if(pgg>=totalPages){ //搜索到最后一个页码，停止添加到navbarx=navSize; } } //计算最后一组页码条中第一个页码的页码编号 var lastpage:Number = 0; for( var y:uint = navSize; y <= totalPages-1;y = y + navSize ){ //lets calculate the lastpage button if(y+5 > navSize){ lastpage = y; } } //向后图标 if( pg < totalPages - 1 ){ nextPage=pg + 1; nextNavBtn.visible=true; lastPage=lastpage; lastNavBtn.visible=true; } else{ nextNavBtn.visible=false; lastNavBtn.visible=false; } } /** * 页码按钮按下(页码条点击) */ private function navigatePage(event:ItemClickEvent):void { refreshDataProvider(event.item.data,false); } /** * 页码按钮按下,first,pre,next,last */ private function navigateButtonClick(pageString:String):void{ var pageIndex:uint=0; switch(pageString){ case "firstPage": pageIndex=firstPage; break; case "prePage": pageIndex=prePage; break; case "nextPage": pageIndex=nextPage; break; default://lastPage pageIndex=lastPage; } // refreshDataProvider(pageIndex); } /** * 更新数据源,更新表格显示数据 */ private function refreshDataProvider(pageIndex:uint,isCreateNavBar:Boolean=true,pageSize:uint=0,resultReturn:Boolean=false):void{ //分页函数 if(dataGrid==null) return; currentPageIndex=pageIndex; if(pageSize==0){ pageSize=this.pageSize; }else{ this.pageSize=pageSize; if(!resultReturn) totalPages = Math.ceil(orgData.length/pageSize); } if(!resultReturn){ if(this.pagingFunction!=null){pagingFunction(pageIndex,pageSize);this.isCreateNavBar=isCreateNavBar; } else{ viewData = new ArrayCollection( orgData.source.slice((pageIndex * pageSize),(pageIndex * pageSize) + pageSize) ); dataGrid.dataProvider=viewData; pageNumber.text=(pageIndex+1).toString(); totalRecordLabel.text = '总记录数：' + orgData.length.toString(); } } else{ dataGrid.dataProvider=orgData; totalPages = Math.ceil(totalRecord/pageSize); pageNumber.text=(pageIndex+1).toString(); totalRecordLabel.text = '总记录数：' + totalRecord.toString() } totalPagesLabel.text = '总页数：' + totalPages; if(isCreateNavBar) createNavBar(pageIndex); } // /** * 每页记录数变更（下拉框选择） */ private function pageSizeSelectChange():void{ refreshDataProvider(0,true,uint(pageSizeComobox.value)); } /** * 页码变更（直接输入） */ private function pageIndexInsertChange(event:Event):void{ var keyboardEvent:KeyboardEvent=event as KeyboardEvent; if(keyboardEvent!=null&&keyboardEvent.keyCode== Keyboard.ENTER){ var pageIndex:uint=uint(pageNumber.text)-1; if(pageIndex>0&&pageIndex<totalPages&&pageIndex!=currentPageIndex){ refreshDataProvider(pageIndex); } else{ pageNumber.text = (currentPageIndex+1).toString(); } } } /** * 查看所有 */ /* private function viewAll():void{ var tempTotalRecord:uint=0; if(pagingFunction!=null) tempTotalRecord=totalRecord;else tempTotalRecord=orgData.length;//pageSizeComobox.text=tempTotalRecord.toString();pageSizeComobox.selectedIndex=-1;refreshDataProvider(0,true,tempTotalRecord); } */]]--></mx:Script><mx:Label paddingTop="3" id="totalPagesLabel" text="" color="#FA1F02"/><mx:Label paddingTop="3" id="totalRecordLabel" text="" color="#FA0213"/><mx:Button id="firstNavBtn" icon="{firstIcon}" width="20" height="20" click="navigateButtonClick('firstPage');" /> <mx:Button id="preNavBtn" icon="{preIcon}" width="20" height="20" click="navigateButtonClick('prePage');"/><mx:LinkBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{nav}" height="26"/> <mx:Button id="nextNavBtn" icon="{nextIcon}" width="20" height="20" click="navigateButtonClick('nextPage');"/> <mx:Button id="lastNavBtn" icon="{lastIcon}" width="20" height="20" click="navigateButtonClick('lastPage');"/><mx:Label paddingTop="3" text="每页记录:"/><mx:ComboBox id="pageSizeComobox" cornerRadius="0" paddingLeft="0" fontWeight="normal" width="50" arrowButtonWidth="10" change="pageSizeSelectChange()"/><mx:Label paddingTop="3" text="页码:"/><mx:TextInput id="pageNumber" width="40" keyDown="pageIndexInsertChange(event);"/><!--<mx:LinkButton id="viewAllLinkBtn" label="查看所有" click="viewAll();"/>--> </mx:HBox>