标签:des style blog http io ar color os 使用
直接先上源码;
分页组件Pager.mamx
<?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" creationComplete="initHandler(event)" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" verticalAlign="middle"> <!-- /** 这里注意,有四个重要的参数需要传递: 1.pageSize:页面大小,每页显示多少条刻录,如果不传递,则按每页10条显示; 2.destination:服务名称,具体可以参考代码; 3.methodName:服务调用的方法,具体可以参考代码 4.datagrid:使用分页的datagrid <p> <code> <control:PagingBar id="serverPagingBar1" url="USER_DATAGRID" datagrid="{userAdg}" pageSize="3" destination="userFlexServices" methodName="getUsers" height="26" width="100%" /> </code> </p> */ --> <fx:Script> <![CDATA[ import com.gwtjs.events.PagerEvent; 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; import spark.events.IndexChangeEvent; [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]//总记录数 private var _allRecorders:int = 263; private var _destination:String; private var _methodName:String; [Bindable]//组件宽度 public var widthTo:int; //服务请求地址 public var url:String; [Bindable]//datagrid private var _datagrid:DataGrid; public function get offset():int { return _offset; } public function set offset(value:int):void { _offset = value; } public function get datagrid():DataGrid { return _datagrid; } public function set datagrid(value:DataGrid):void { _datagrid = value; } public function get items():ArrayCollection { return _items; } public function set items(value:ArrayCollection):void { _items = value; } public function get params():Array { return _params; } public function set params(value:Array):void { _params = value; } public function get methodName():String { return _methodName; } public function set methodName(value:String):void { _methodName = value; } public function get allRecorders():int { return _allRecorders; } public function set allRecorders(value:int):void { _allRecorders = value; } public function get destination():String { return _destination; } public function set destination(value:String):void { _destination = value; } /** * */ 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(allRecorders < 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();getBtnEnabled(); //pagingRemoteObject(); } /** * 设置每页显示多少条记录 */ protected function pageSizeComboboxChangeHandler(event:IndexChangeEvent):void { var obj:Object = pageSizeCombobox.selectedItem; pageSize = obj.pageSize; trace(url,"",pageSize); } /** * 求总页面数 * //计算总页面数-->总页数=(总记录数+每页显示的记录数-1)/每页显示的记录数 * */ private function getTotalPageNum():int { return (allRecorders + pageSize - 1) / pageSize; } /** * 获取总页数 */ private function getBtnEnabled():void { if(totalPage<=1)//所有按钮全灰掉 { pageFirstBtn.enabled = false; pagePrevBtn.enabled = false; pageNextBtn.enabled = false; pageLastBtn.enabled = false; refrePageBtn.enabled = false; }else if(curpage==1){ //当前在第一页 pageFirstBtn.enabled = false; pagePrevBtn.enabled = false; pageNextBtn.enabled = true; pageLastBtn.enabled = true; refrePageBtn.enabled = true; }else if(curpage<totalPage && curpage > 1){ //当前在中间页数,不在第一页也不在最后一页 pageFirstBtn.enabled = true; pagePrevBtn.enabled = true; pageNextBtn.enabled = true; pageLastBtn.enabled = true; refrePageBtn.enabled = true; }else if(curpage==totalPage){ //当前在最后一页 pageFirstBtn.enabled = true; pagePrevBtn.enabled = true; pageNextBtn.enabled = false; pageLastBtn.enabled = false; refrePageBtn.enabled = true; } /**如果有页数则刷新可用*/ if(totalPage > 0) { refrePageBtn.enabled = true; }else{ refrePageBtn.enabled = false; } } /** * 服务请求成功的处理 */ private function serviceSuccessResult(event:ResultEvent):void { var results:ArrayCollection = ArrayCollection(event.result.list); trace(url,"请求成功,共"+_allRecorders+"条记录","每页显示",results,"\n当前页",curpage); datagrid.dataProvider = results; totalPage = getTotalPageNum(); pageStepper.value = curpage; getBtnEnabled(); //发事件到上级视图 this.dispatchEvent(new Event("myFunction")); } /** * 服务请求失败的处理 */ private function httpServiceFault(event:FaultEvent):void { var str:String = "客户端异常"; var index:int = -1; var faultCode:String = event.fault.faultCode.toString(); index = faultCode.indexOf("Server", 0); if(index!=-1) { str= "服务端异常"; } //trace(index,str); //客户端的faultCode以Client开头,服务器端的faultCode以Server开头 Alert.show(event.fault.toString(),faultCode); trace(event.fault.toString()); } /** * 发送服务请求 */ private function pagingRemoteObject():void { //var remote:RemoteObject = new RemoteObject(destination); //页面偏移量这里计划好了,java不需要计算了 offset = (curpage - 1) * pageSize; trace("pageSize",pageSize,"offset",offset); /*remote.getOperation(methodName).send(pageSize,_offset); remote.addEventListener(ResultEvent.RESULT,serviceSuccessResult); remote.addEventListener(FaultEvent.FAULT,httpServiceFault);*/ //这里调用上级的方法发请求,这里不发了. //发事件到上级视图 var pager:Object = new Object(); pager.offset = offset; pager.pageSize = pageSize; //发事件到上级视图 this.dispatchEvent(new PagerEvent("myPagerEvent",pager)); } /** * */ private function loadingDatagrid():void { } protected function refrePageBtnClickHandler(event:MouseEvent):void { var obj:Object = pageSizeCombobox.selectedItem; pageSize = obj.pageSize; Alert.show("每页显示,"+pageSize.toString()); } private function pageHSliderChangeHandler(event:Event):void { curpage = pageStepper.value; getBtnEnabled(); pagingRemoteObject(); } ]]> </fx:Script> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <fx:Metadata> [Event(name="myFunction",type="flash.events.Event")] [Event(name="myPagerEvent",type="com.gwtjs.events.PagerEvent")] </fx:Metadata> <mx:HBox width="30%" height="100%" verticalAlign="middle"> <mx:LinkButton styleName="pageFirstBtn" id="pageFirstBtn" enabled="false" click="pageFirstClickHandler(event)" /> <mx:LinkButton styleName="pagePrevBtn" id="pagePrevBtn" 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 width="40%" height="100%" verticalAlign="middle"> <s:Label text="Page" /> <s:NumericStepper id="pageStepper" width="78" click="pageStepperClickHandler(event)" maximum="{totalPage}" minimum="{_allRecorders!=0?1:0}" value="{curpage}" /> <s:Label text=" Of " /> <s:Label id="totalPageLab" text="{totalPage}" /> </mx:HBox> </mx:HBox> <mx:HBox verticalAlign="middle"> <s:ComboBox dataProvider="{pageSizeBoxListData}" skinClass="assets.skin.ComboBoxTextInputEditSkin" selectedIndex="1" width="60" labelField="pageSize" id="pageSizeCombobox" change="pageSizeComboboxChangeHandler(event)"/> <mx:LinkButton id="refrePageBtn" click="refrePageBtnClickHandler(event)" styleName="myRrfreshBtn" /> </mx:HBox> <!-- <mx:LinkButton styleName="pageRefreshBtn" id="pageRefreshBtn" click="pageRefreshClickHandler(event)"/> --> <mx:HBox width="100%" height="100%" click="progressBarClickHandler(event)" verticalAlign="middle"> <s:HSlider width="98%" stepSize="1" dataTipPrecision="0" maximum="{totalPage}" minimum="{_allRecorders!=0?1:0}" value="{curpage}" change="pageHSliderChangeHandler(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="{_allRecorders}" id="allRecordsLab"/> </mx:HBox> </s:Group> </s:BorderContainer> </mx:HBox>
分页事件--PagerEvent.as
package com.gwtjs.events { import flash.events.Event; public class PagerEvent extends Event { private var _pager:Object; public function set item(item:Object):void{ this._pager = item; } public function get item():Object{ return this._pager; } public function PagerEvent(type:String,obj:Object, bubbles:Boolean=false, cancelable:Boolean=false) { super(type, bubbles, cancelable); this._pager = obj; } } }
Test.mamx
<mx:Canvas 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="99%" height="780" xmlns:components="com.gwtjs.components.*"> <fx:Script> <![CDATA[ import com.gwtjs.events.PagerEvent; import com.gwtjs.renderer.grid.EnableItemIFactory; import com.gwtjs.util.SimpleIndexUtil; import com.gwtjs.window.UserAclEditorWindow; import com.gwtjs.window.UserBugTypesEditorWindow; import com.gwtjs.window.UserEditorWindow; import com.gwtjs.window.UserParentUserEditorWindow; import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.events.CloseEvent; import mx.events.FlexEvent; import mx.managers.PopUpManager; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; [Bindable] private var currentItem:Object = new Object(); [Bindable] private var userArray:ArrayCollection = new ArrayCollection([ {userId:"1000101",userAccount:"playCol",userName:"张111",parentUser:"",userMobile:"13902762078",status:"1",userAclTypeCode:"10",userAclTypeNames:"超级管理员",bugTypeNames:"蠕虫病毒",bugTypeCodes:"1",userDesc:"说明"}, {userId:"1000102",userAccount:"administrator",userName:"李芳",parentUser:"1000101",userMobile:"13902762078",status:"1",userAclTypeCode:"10",userAclTypeNames:"超级管理员",bugTypeNames:"木马植入",bugTypeCodes:"2",userDesc:"说明"}, {userId:"10001",userAccount:"admin888",userName:"陈真",parentUser:"",userMobile:"13902762078",status:"1",userAclTypeCode:"10",userAclTypeNames:"超级管理员",bugTypeNames:"SQL注入",bugTypeCodes:"3",userDesc:"说明"}, {userId:"10002",userAccount:"dzg867",userName:"王时",parentUser:"10001",userMobile:"13902762078",status:"1",userAclTypeCode:"20,30",userAclTypeNames:"安全管理员,检测人员",bugTypeNames:"木马植入",bugTypeCodes:"2",userDesc:"说明"}, {userId:"10003",userAccount:"you29386",userName:"杨二辉",parentUser:"10002",userMobile:"13902762078",status:"1",userAclTypeCode:"30,40",userAclTypeNames:"检测人员",bugTypeNames:"SQL注入",bugTypeCodes:"3",userDesc:"说明"}, {userId:"10004",userAccount:"zhang382",userName:"施文杰",parentUser:"10003",userMobile:"13902762078",status:"0",userAclTypeCode:"30",userAclTypeNames:"检测人员",bugTypeNames:"蠕虫病毒",bugTypeCodes:"1",userDesc:"说明"}, {userId:"10005",userAccount:"guangdong",userName:"晓科",parentUser:"10003",userMobile:"13902762078",status:"1",userAclTypeCode:"20,40",userAclTypeNames:"安全管理员,修复人员",bugTypeNames:"SQL注入",bugTypeCodes:"3",userDesc:"说明"} ]); [Bindable] [Embed("assets/images/user_edit.png")] private var userEditorIcon:Class; [Bindable] [Embed("assets/images/user_add.png")] private var userAddIcon:Class; [Bindable] //叶子节点 [Embed(source="assets/images/user_delete.png")] private var userDeleteIcon:Class; [Bindable] //叶子节点 [Embed(source="assets/images/arrow_refresh_small.png")] private var refreshBtnIcon:Class; [Bindable] //定义渲染器 - 是否 private var enabledRender:IFactory = new EnableItemIFactory(); [Bindable] private var indexRenderer:Class = SimpleIndexUtil; import mx.formatters.DateFormatter; public function compareTime(str:String):Boolean { var myPattern1:RegExp=/-|:| /g; var dateFormatter:DateFormatter = new DateFormatter(); dateFormatter.formatString = "YYYY-MM-DD JJ:NN:SS"; var now:String= dateFormatter.format(new Date()); str = dateFormatter.format(str); str = str.replace(myPattern1,''); now = now.replace(myPattern1,''); if(Number(str)>Number(now)){return true;}else{return false;} } public var time:String = "2014-11-29 18:33:22"; /** * 初始化函数 */ protected function initHandler(event:FlexEvent):void { var bool:Boolean = compareTime(time); if(bool){ UserServicesController.getUsers(0,12); } } /** * 数据请求成功处理 * */ private function getUsersResultHandler(event:ResultEvent):void { var obj:Object = event.result; trace(obj.list,obj.totalCount); userArray = obj.list; } /** * 请求异常 * 客户端的faultCode以Client开头,服务器端的faultCode以Server开头 * */ private function httpServiceFault(event:FaultEvent):void { var str:String = "客户端异常"; var index:int = -1; var faultCode:String = event.fault.faultCode.toString(); index = faultCode.indexOf("Server", 0); if(index!=-1) { str= "服务端异常"; } //trace(index,str); //客户端的faultCode以Client开头,服务器端的faultCode以Server开头 Alert.show(event.fault.toString(),faultCode); trace(event.fault.toString()); } /**添加用户*/ protected function userAddClickHandler(event:MouseEvent):void { var itemEditorWindow:UserEditorWindow = new UserEditorWindow(); //传值过去; itemEditorWindow.title = "新增用户条目"; itemEditorWindow.action = "Insert"; itemEditorWindow.items = userArray; itemEditorWindow.arrIndex = 0; PopUpManager.addPopUp(itemEditorWindow,this,true); PopUpManager.centerPopUp(itemEditorWindow); } /** * 修改用户 * */ protected function userEditorClickHandler(event:MouseEvent):void { var index:int = userDataGrid.selectedIndex; trace("103",index); currentItem = userArray.getItemAt(index); if(null==currentItem){ Alert.show("请选择编辑的条目","信息提示"); return; } var itemEditorWindow:UserEditorWindow = new UserEditorWindow(); //传值过去; itemEditorWindow.title = "修改用户条目"; itemEditorWindow.action = "Update"; itemEditorWindow.items = userArray; itemEditorWindow.item = currentItem; itemEditorWindow.arrIndex = index; PopUpManager.addPopUp(itemEditorWindow,this,true); PopUpManager.centerPopUp(itemEditorWindow); } /** * 删除用户 * */ protected function userRemoveClickHandler(event:MouseEvent):void { var item:Object = userDataGrid.selectedItem; Alert.show("确定删除用户:"+item.userAccount+"密码 ?","信息提示",(1|2),this,function(event:CloseEvent):void{ if(event.detail == Alert.YES){ for(var i:int=0;i<userArray.length;i++){ if(item.userId==userArray[i].userId){ userArray.removeItemAt(i); } } } }); } /** * 删除用户 * */ protected function resetUserClickHandler(event:MouseEvent):void { var item:Object = userDataGrid.selectedItem; Alert.show("确定重置用户:"+item.userAccount+"密码 ?","信息提示",(1|2),this,function(event:CloseEvent):void{ if(event.detail == Alert.YES){ Alert.show(item.userAccount+"密码重置成功!","信息提示"); } }); } [Bindable] public var offset:int=0; [Bindable] public var pageSize:int=20; /** * 分页回调 * */ protected function serverPagingBarFunctionHandler(event:Event):void { trace("分页回调"); } /** * 在这里调用分页查询 * */ protected function userDataGridPagerEventHandler(event:PagerEvent):void { var obj:Object = event.item; var bool:Boolean = compareTime(time); if(bool){ UserServicesController.getUsers(obj.offset,obj.pageSize); } } ]]> </fx:Script> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> <s:RemoteObject id="UserServicesController" destination="UserServicesController" fault="httpServiceFault(event)" endpoint="http://127.0.0.1:8080/buganalysis/messagebroker/amf"> <s:method name="getUsers" result="getUsersResultHandler(event)" /> </s:RemoteObject> </fx:Declarations> <mx:VBox width="100%" height="100%" verticalGap="0"> <mx:HBox width="100%" height="32" horizontalAlign="left" styleName="panelTitleBg" verticalAlign="middle" horizontalGap="0"> <mx:LinkButton icon="@Embed(source='assets/images/icons/grid.png')" color="#FFFFFF" fontWeight="bold" label="用户管理" /> </mx:HBox> <mx:VBox width="100%" height="100%" id="gridMainLayout" verticalGap="6" horizontalAlign="center" horizontalGap="6" paddingLeft="6" paddingRight="6" paddingBottom="6" paddingTop="6" > <mx:HBox width="100%" height="36" verticalAlign="middle" borderColor="#696969" backgroundColor="#E6E0E0" cornerRadius="6" > <mx:LinkButton label="新增用户" icon="{userAddIcon}" styleName="btnWeight" click="userAddClickHandler(event)" /> <mx:LinkButton label="修改用户" icon="{userEditorIcon}" styleName="btnWeight" click="userEditorClickHandler(event)" /> <mx:LinkButton label="删除用户" icon="{userDeleteIcon}" styleName="btnWeight" click="userRemoveClickHandler(event)" /> <mx:LinkButton label="重置密码" styleName="twoRrfreshBtn" click="resetUserClickHandler(event)" /> <mx:HBox width="100%" /> <mx:LinkButton label="刷新" icon="{refreshBtnIcon}" /> </mx:HBox> <mx:DataGrid id="userDataGrid" headerStyleName="myHead" dataProvider="{userArray}" rowCount="{userArray.length}" textAlign="center" width="100%" height="100%" verticalGridLineColor="#CCCCCC" horizontalGridLines="true" horizontalGridLineColor="#CCCCCC"> <mx:columns> <mx:DataGridColumn headerText="序号" itemRenderer="{new ClassFactory(indexRenderer)}" visible="false" /> <mx:DataGridColumn headerText="编号" dataField="userId" width="50" /> <mx:DataGridColumn headerText="登陆帐号" dataField="userAccount" textAlign="left" width="160" /> <mx:DataGridColumn headerText="用户姓名" dataField="userName" textAlign="left" width="160" /> <mx:DataGridColumn headerText="所属上级" dataField="parentUser" textAlign="left" width="160"> <!-- <mx:itemRenderer> <fx:Component> <mx:HBox textAlign="center" verticalAlign="middle" horizontalAlign="left"> <mx:LinkButton label="{data.parentUser}" width="88" click="outerDocument.parentUserBtnLickHandler(event)" /> <mx:LinkButton width="16" icon="@Embed(source='assets/images/icons/page_attach.png')" click="outerDocument.parentUserBtnLickHandler(event)" /> </mx:HBox> </fx:Component> </mx:itemRenderer> --> </mx:DataGridColumn> <mx:DataGridColumn headerText="手机号" dataField="userMobile" textAlign="left" width="160" /> <mx:DataGridColumn headerText="工号状态" dataField="status" textAlign="center" width="80" itemRenderer="{enabledRender}" /> <mx:DataGridColumn headerText="权限类别" dataField="userAclTypeNames" textAlign="left" width="180" visible="false"> <!-- <mx:itemRenderer> <fx:Component> <mx:HBox textAlign="center" verticalAlign="middle" horizontalAlign="left"> <mx:LinkButton label="{data.userAclTypeNames}" click="outerDocument.bugTypeBtnLickHandler(event)" /> <mx:LinkButton width="16" icon="@Embed(source='assets/images/icons/edit.gif')" click="outerDocument.bugTypeBtnLickHandler(event)" /> </mx:HBox> </fx:Component> </mx:itemRenderer> --> </mx:DataGridColumn> <mx:DataGridColumn headerText="操作权限" dataField="bugTypeNames" textAlign="left" width="180"> <!-- <mx:itemRenderer> <fx:Component> <mx:HBox textAlign="center" verticalAlign="middle" horizontalAlign="left"> <mx:LinkButton label="{data.bugTypeNames}" click="outerDocument.aclBtnLickHandler(event)" /> <mx:LinkButton width="16" icon="@Embed(source='assets/images/icons/set-ico.gif')" click="outerDocument.aclBtnLickHandler(event)" /> </mx:HBox> </fx:Component> </mx:itemRenderer> --> </mx:DataGridColumn> <mx:DataGridColumn headerText="用户说明" dataField="userDesc" textAlign="left" /> </mx:columns> </mx:DataGrid> <components:Pager id="serverPagingBar1" url="USER_DATAGRID" datagrid="{userDataGrid}" myPagerEvent="userDataGridPagerEventHandler(event)" myFunction="serverPagingBarFunctionHandler(event)" offset="{offset}" pageSize="{pageSize}" destination="userFlexServices" methodName="getUsers" height="26" width="100%" /> </mx:VBox> </mx:VBox> </mx:Canvas>
处理流程:
1.调用分页组件
<components:Pager id="serverPagingBar1" url="USER_DATAGRID" datagrid="{userDataGrid}" myPagerEvent="userDataGridPagerEventHandler(event)" myFunction="serverPagingBarFunctionHandler(event)" offset="{offset}" pageSize="{pageSize}" destination="userFlexServices" methodName="getUsers" height="26" width="100%" />
请求服务处理完成功后,再次将offset和pageSize传入Pager组件;
标签:des style blog http io ar color os 使用
原文地址:http://blog.csdn.net/flash8627/article/details/41415123