Home > Article > Web Front-end > Flex real paging, one page supports multiple reuse_html/css_WEB-ITnose
<?xml version="1.0" encoding="utf-8"?><mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="initHandler(event)" width="100%" height="300" backgroundColor="0xffffff"> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.controls.DataGrid; import mx.events.FlexEvent; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import mx.rpc.remoting.RemoteObject; [Bindable] //记录数 private var items:ArrayCollection; [Bindable] //分页参数 private var params:Array = new Array(); [Bindable] //每页显示的条数 private var pageSizeBoxListData:ArrayCollection = new ArrayCollection([ {pageSize:10}, {pageSize:20}, {pageSize:30}, {pageSize:50}, {pageSize:100} ]); [Bindable] //每页显示的记录数 public var pageSize:int = 10; [Bindable] //当前页 public var curPage:int = 1; [Bindable] //下一页到多少记录数 public var offSet:int = 1; [Bindable] //总页数 public var totalPage:int = 0; [Bindable] //总记录数 public var totalCount:int = 263; public var destination:String; public var methodName:String; [Bindable] //组件宽度 public var widthTo:int; [Bindable] //服务请求地址 public var url:String; [Bindable] //datagrid public var datagrid:DataGrid; /** * */ protected function progressBarClickHandler(event:MouseEvent):void { var bc:HBox = HBox(event.target); widthTo = event.localX; progressBarEffect.target = progressBarPagerBlue; progressBarEffect.play(); } /** * */ private function getMinimum():int { if(totalCount < 1) { return 0; } else { return 1; } } /** * */ protected function pageFirstClickHandler(event:MouseEvent):void { curPage = getMinimum(); getBtnEnabled(); pagingRemoteObject(); } /** * 上一页 */ protected function pagePrevClickHandler(event:MouseEvent):void { var tempNum:int = getMinimum(); curPage = curPage - 1; getBtnEnabled(); pagingRemoteObject(); } /** * 跳转到指定页 */ protected function pageStepperClickHandler(event:MouseEvent):void { curPage = pageStepper.value; } /** * 下一页 */ protected function pageNextClickHandler(event:MouseEvent):void { if(curPage < totalPage) { curPage = curPage + 1; } getBtnEnabled(); pagingRemoteObject(); } /** * 最后一页 */ protected function pageLastClickHandler(event:MouseEvent):void { curPage = totalPage; getBtnEnabled(); pagingRemoteObject(); } /** * 刷新当前页 */ protected function pageRefreshClickHandler(event:MouseEvent):void { totalPage = getTotalPageNum(); pagingRemoteObject(); } /** * 初始化函数 */ protected function initHandler(event:FlexEvent):void { totalPage = getTotalPageNum(); } /** * 设置每页显示多少条记录 */ protected function pageSizeComboboxChangeHandler(event:MouseEvent):void { var obj:Object = pageSizeCombobox.selectedItem; pageSize = obj.pageSize; trace(url,"",pageSize); } /** * 获取总页数 */ private function getBtnEnabled():void { if(totalPage < 1) { pageFirstBtn.enabled = false; pagePreBtn.enabled = false; pageNextBtn.enabled = false; pageLastBtn.enabled = false; pageRefreshBtn.enabled = false; } else if(curPage == 1) { pageFirstBtn.enabled = false; pagePreBtn.enabled = false; pageNextBtn.enabled = true; pageLastBtn.enabled = true; pageRefreshBtn.enabled = true; } else if(curPage < totalPage && curPage > 1) { pageFirstBtn.enabled = true; pagePreBtn.enabled = true; pageNextBtn.enabled = true; pageLastBtn.enabled = true; pageRefreshBtn.enabled = true; } else if(curPage == totalPage) { pageFirstBtn.enabled = true; pagePreBtn.enabled = true; pageNextBtn.enabled = false; pageLastBtn.enabled = false; pageRefreshBtn.enabled = true; } } /** * 服务请求成功的处理 */ private function serviceSuccessResult(event:ResultEvent):void { totalCount = event.result.totalCounts; items = event.result.entityList as ArrayCollection; trace(url,"",items); } /** * 服务请求失败的处理 */ private function httpServiceFault(event:FaultEvent):void { Alert.show(event.fault.message,"服务请求失败"); } /** * 发送服务请求 */ private function pagingRemoteObject():void { var remote:RemoteObject = new RemoteObject(destination); offSet = (curPage - 1)*pageSize; remote.getOperation(methodName).send(pageSize,offSet); remote.addEventListener(ResultEvent.RESULT,serviceSuccessResult); remote.addEventListener(FaultEvent.FAULT,httpServiceFault); } /** * */ private function loadingDatagrid():void { } ]]> </fx:Script> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <mx:HBox width="30%" height="100%" verticalAlign="middle"> <mx:LinkButton styleName="pageFirstBtn" id="pageFirstBtn" enabled="false" click="pageFirstClickHandler(event)"/> <mx:LinkButton styleName="pagePreBtn" id="pagePreBtn" enabled="false" click="pagePrevClickHandler(event)"/> <mx:LinkButton styleName="pageNextBtn" id="pageNextBtn" enabled="false" click="pageNextClickHandler(event)"/> <mx:LinkButton styleName="pageLastBtn" id="pageLastBtn" enabled="false" click="pageLastClickHandler(event)"/> </mx:HBox> <mx:HBox width="40%" height="100%" verticalAlign="middle"> <s:Label text="Page"/> <s:NumericStepper id="pageStepper" width="78" click="pageStepperClickHandler(event)" maximum="{totalPage}" minimum="{getMinimum()}" value="{curPage}"/> <s:Label text="of"/> <s:Label id="totalPageLab" text="{totalPage}"/> </mx:HBox> <mx:HBox verticalAlign="middle"> <s:ComboBox dataProvider="{pageSizeBoxListData}" selectedIndex="1" width="60" labelField="pageSize" id="pageSizeComboBox" change="pageSizeComboboxChangeHandler(event)"/> <s:Label text="共{totalCount}条 记录"/> </mx:HBox> <mx:LinkButton styleName="pageRefreshBtn" id="pageRefreshBtn" click="pageRefreshClickHandler(event)"/> </mx:HBox> <s:BorderContainer x="0" y="0" width="40%" height="20" borderColor="0x336699" textAlign="center" visible="false"> <s:Group id="hgimg" x="0" y="0" width="100%" height="100%" clipAndEnableScrolling="true"> <mx:HBox width="60%" height="18" styleName="progressBarPageBlue" id="progressBarPageBlue"> </mx:HBox> <mx:HBox width="96%" height="100%" paddingLeft="3" x="2" horizontalAlign="center" verticalAlign="middle"> <s:Label text="Displaying "/> <s:Label text="{pageSize*curPage - 1 - pageSize}" id="pageStartLab"/> <s:Label text="-"/> <s:Label text="{pageSize*curPage - 1}" id="pageSizeLab"/> <s:Label text="of"/> <s:Label text="{totalCount}" id="allRecordsLab"/> </mx:HBox> <mx:HBox width="100%" height="100%" click="progressBarClickHandler(event)" verticalAlign="middle"> </mx:HBox> </s:Group> </s:BorderContainer></mx:HBox>