Flex分页组件

有好用的东西一定要共享。

PaginationDataGrid.mxml文件分页组件

<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300"> <mx:Script source="../../../common/utils/Common.as"/> <mx:Script> <!--[CDATA[ import mx.core.Application; import mx.containers.Grid; import mx.managers.PopUpManager; import mx.events.CloseEvent; import mx.containers.TitleWindow; import mx.controls.listClasses.ListData; import mx.events.DataGridEvent; import mx.controls.dataGridClasses.DataGridColumn; import mx.controls.CheckBox; import mx.controls.Alert; import common.controls.ItsmHttpService; import mx.rpc.http.HTTPService; import com.adobe.serialization.json.JSON; import mx.rpc.events.ResultEvent; import mx.collections.ArrayCollection; /* 分页DataGrid * 加了一个pageSize,用来控制每页显示的行数，可以在调用这个组件的时候为pageSize属性赋值， * 默认为每页显示10行数据,不需要为DataGrid指定高度。 */ [Bindable] public var rowClick:Function; [Bindable] public var dataUrl:String; //获取数据的url地址 [Bindable] public var arrColumns:Array; //DataGrid列,在调用时需要为这个数组设置数据 [Bindable] public var queryParams:Object={}; //查询需要的参数 [Bindable] public var ifShowCheck:Boolean=true; //是否有check框进行选择，默认有 [Bindable] public var idProperty:String="id"; //如果需要check进行选择，指定主键属性。默认为“id” [Bindable] public var acPageData:ArrayCollection=new ArrayCollection(); //当前页数据 [Bindable] private var pageSize:int=10; //每页显示行数 [Bindable] private var totalPage:int=0; //总页数 [Bindable] private var totalCount:int=0; //总记录数 [Bindable] private var currentPage:int=0; //当前页 //悬浮窗口对象 [Bindable] public var infoGrid:Grid=new Grid(); private var pn:TitleWindow=new TitleWindow(); private var headerSelected:SimpleClassFactory; //checkBox列头 //对元素进行初始化 public function init(o:Object):void { var page:Page=Page.buildPage(o); totalCount=page.totalCount; totalPage=page.totalCount / page.pageSize + (page.totalCount % page.pageSize == 0 ? 0 : 1); acPageData=page.result; currentPage=page.pageIndex; } //获取所选check的数据集合 public function getSelectData():Array { var selectArray:Array=new Array(); for (var i:int=0; i < acPageData.length; i++) { if (acPageData[i].available) { selectArray.push(acPageData[i][idProperty]) } } return selectArray; } //分页组件初始化方法 public function creationComplete(pageIndex:int=1):void { //如果有多选框时取消选择 if (headerSelected != null && headerSelected.generator == CheckBox) { headerSelected.instance.selected=false; //取消全选 //遍历后取消所有的check框选项 var rendererArray:Array=customgrid.mx_internal::rendererArray; for (var i:int=1; i < acPageData.length + 1; i++) { rendererArray[i][0].selected=false; acPageData[i - 1].available=rendererArray[i][0].selected; } } //如果有checkBox列时添加checkBox列 if (ifShowCheck) { //checkBox列 var checkDataGridColumn:DataGridColumn=new DataGridColumn(); //header全选check定义 headerSelected=new SimpleClassFactory(CheckBox, function(checkBox:CheckBox):void { checkBox.addEventListener(Event.CHANGE, function(evt:Event):void { //遍历所有checkBox进行选中/取消 var rendererArray:Array=customgrid.mx_internal::rendererArray; for (var i:int=1; i < acPageData.length + 1; i++) { rendererArray[i][0].selected=checkBox.selected; acPageData[i - 1].available=rendererArray[i][0].selected; } }); }); checkDataGridColumn.sortable=false; //取消排序事件，否则全选框事件无效 checkDataGridColumn.headerRenderer=headerSelected; checkDataGridColumn.width=30; checkDataGridColumn.setStyle("textAlign", "center"); //checkBox数据 var checkItem:SimpleClassFactory=new SimpleClassFactory(CheckBox, function(checkBox:CheckBox):void { checkBox.addEventListener(MouseEvent.CLICK, function(evt:MouseEvent):void { evt.stopPropagation(); //改变数据 checkBox.data.available=!checkBox.data.available; //当所有checkBox都选中时，全选check框选中，当有没选中的框时取消全选 var ifSelectAllCheck:Boolean=true; for (var i:int=0; i < acPageData.length; i++) { if (!acPageData[i].available) { ifSelectAllCheck=false; break; } } headerSelected.instance.selected=ifSelectAllCheck; }); }); checkDataGridColumn.itemRenderer=checkItem; arrColumns.unshift(checkDataGridColumn); //添加check框列 customgrid.columns=arrColumns; ifShowCheck=false; //保证在点击下一页或其他查询再执行此方法时不再添加check列 } //请求对象初始化 queryParams["page.pageIndex"]=pageIndex; if (dataUrl.length > 0) { httpSend(dataUrl, queryParams, function(event:ResultEvent):void { var data:String=event.result.toString(); data=data.replace(//s/g, ''); var page:Object=JSON.decode(data); init(page); }); //数据处理方法 } } //如果需要记录鼠标坐标在每行上的事件，需要给customgrid添加事件：itemRollOver="getMouseOverRow()" private var findex1:Number; //记录当前行号 private function getMouseOverRow():void { var findex:Number=Math.floor(customgrid.contentMouseY / customgrid.rowHeight) - 1 + customgrid.verticalScrollPosition; if (findex == -1) { findex=findex + 1; } //customgrid.contentMouseY是鼠标所在的local坐标系相对于datagrid的高度 //customgrid.rowHeight是datagrid的行高，math.floor作用是截断小数点 //verticalScrollPosition是如果datagrid有滚动条的话，向下滚动的行数。这样findex就是鼠标所在的行数 var point:Point=localToGlobal(new Point(mouseX, mouseY)); //转换为整个舞台的坐标 if (point.x + pn.width > Application.application.width) { //如果鼠标再最右边，悬浮窗口显示不下时的判断处理 point.x=point.x - pn.width; if (point.x + pn.width > Application.application.width * 0.93) { point.x=point.x - Application.application.width * 0.02; } } if (point.y + pn.height > Application.application.height) { point.y=point.y - pn.height; } pn.x=point.x; pn.y=point.y; if (findex != findex1) { //判断鼠标坐标行号是否发生变化 rowClick(customgrid.mx_internal::rendererArray[findex + 1][0].data); pn.addChild(infoGrid); pn.addEventListener(MouseEvent.ROLL_OUT, function(event:MouseEvent):void { var tempPoint:Point=localToGlobal(new Point(mouseX, mouseY)); //转换为整个舞台的坐标 //这里判断鼠标是否放到了悬浮框上，暂时还没有找到合适的方法 var dgPoint:Point=localToGlobal(new Point(customgrid.x, customgrid.y)); if (tempPoint.x < dgPoint.x || tempPoint.x > dgPoint.x + customgrid.width || tempPoint.y < dgPoint.y || tempPoint.y > dgPoint.y + customgrid.height) { PopUpManager.removePopUp(pn); findex1=pageSize + 1; } }); findex1=findex; PopUpManager.removePopUp(pn); pn.width=400; pn.height=300; //pn.title="testPn" + findex.toString(); pn.showCloseButton=true; pn.addEventListener(CloseEvent.CLOSE, function():void { PopUpManager.removePopUp(pn) }); PopUpManager.addPopUp(pn, this, false); // PopUpManager.centerPopUp(pn); } } //鼠标移出grid时关闭悬浮窗口的事件监听 private function clearInfoWindow():void { var tempPoint:Point=localToGlobal(new Point(mouseX, mouseY)); //转换为整个舞台的坐标 //这里判断鼠标是否放到了悬浮框上，暂时还没有找到合适的方法 var dgPoint:Point=localToGlobal(new Point(customgrid.x, customgrid.y)); if (tempPoint.x < dgPoint.x || tempPoint.x > dgPoint.x + customgrid.width || tempPoint.y < dgPoint.y || tempPoint.y > dgPoint.y + customgrid.height) { PopUpManager.removePopUp(pn); findex1=pageSize + 1; } // if(tempPoint.x<pn.x||tempPoint.x>pn.x+pn.width||tempPoint.y<pn.y||tempPoint.y>pn.y+pn.height){ // PopUpManager.removePopUp(pn); // } } ]]--> </mx:Script> <!--设置数据源--> <!--<mx:HTTPService id="jsonservice" url="{dataUrl}" resultFormat="text" result="onJSONResult(event)"/>--> <mx:VBox x="0" y="0" width="100%" height="100%" verticalGap="0" horizontalAlign="center"> <mx:DataGrid id="customgrid" width="100%" dataProvider="{acPageData}" columns="{arrColumns}" verticalScrollPolicy="off" rowCount="{pageSize}" itemRollOver="getMouseOverRow()" rollOut="clearInfoWindow()"/> <mx:HBox styleName="pageBottom" width="100%"> <mx:Text text="{' 第'+(totalPage>0?(currentPage):0)+'页/共'+totalPage+'页'+' 共'+totalCount+'条记录'}"/> <mx:LinkButton id="lbtnFirst" label="首页" click="creationComplete(1)" enabled="{lbtnPrevious.enabled}"/> <mx:LinkButton id="lbtnPrevious" label="上一页" click="creationComplete(currentPage - 1)" enabled="{currentPage!=1?true:false}"/> <mx:LinkButton id="lbtnNext" label="下一页" click="creationComplete(currentPage + 1)" enabled="{totalPage>(currentPage)?true:false}"/> <mx:LinkButton id="lbtnLast" label="尾页" click="creationComplete(totalPage)" enabled="{lbtnNext.enabled}"/> <mx:NumericStepper id="nsPageNum" value="{currentPage}" stepSize="1" minimum="1" maximum="{totalPage}" enabled="{lbtnJump.enabled}"/> <mx:LinkButton id="lbtnJump" label="跳转" click="creationComplete(nsPageNum.value)" enabled="{totalPage>1?true:false}"/> </mx:HBox> </mx:VBox> </mx:Canvas>

Page.as 分页对象

package common.controls.grid { import mx.collections.ArrayCollection; /** * 分页对象 * @author liuhaibo */ public class Page { public var pageSize:int; //每页显示数量 public var pageIndex:int; //开始位置 public var totalCount:int; //数据总数量 public var result:ArrayCollection; //数据集 public function Page(_pageSize:int,_pageIndex:int,_totalCount:int,_result:ArrayCollection) { this.pageSize=_pageSize; this.pageIndex=_pageIndex; this.totalCount=_totalCount; this.result=_result; } /** * 分页对象的转换方法 * @param o 分页对象 * @return */ public static function buildPage(o:Object):Page { var page:Page=new Page(o.pageSize, o.pageIndex, o.totalCount, new ArrayCollection(o.result)); return page; } } }

SimpleClassFactory.as 重写了ClassFactory，在行前加check框方便引用

package common.controls.grid { import mx.core.ClassFactory; public class SimpleClassFactory extends ClassFactory { public var instance:Object; public function SimpleClassFactory(generator:Class = null, initializer : Function = null) { super(); this.generator = generator; this.initializer = initializer; } public var initializer : Function; public override function newInstance():* { instance = super.newInstance(); if (initializer != null) { initializer(instance); } return instance; } } }

ItsmHttpService.as  建议工程中应用，方便统一处理异常和错误信息

package common.controls { import common.utils.JSON; import mx.controls.Alert; import mx.rpc.events.ResultEvent; import mx.rpc.http.HTTPService; /**改写HttpService，统一处理错误和业务异常信息 * * @author liuhaibo */ public class ItsmHttpService extends HTTPService { /** * 处理业务的方法参数，需要外部赋值 * @default */ public var successFunction:Function; /** * 错误处理 */ public var failureFunction:Function; /** * @param rootURL * @param destination */ public function ItsmHttpService(rootURL:String=null, destination:String=null) { initItsm(); super(rootURL, destination); } /** * 初始化 */ private function initItsm():void { this.addEventListener(ResultEvent.RESULT,resultHandler); } /** * 服务响应事件处理 */ private function resultHandler(event:ResultEvent):void{ var d:Object = JSON.decode(event.result.toString()); if (d.hasOwnProperty("sucess") && !d.sucess) { if (failureFunction == null) Alert.show(d.code); else failureFunction(d.code,JSON.decode(d.params) as Array); } else successFunction(event); } } }