Flex4自定义分页组件
来源:互联网 发布:中诚信国际 知乎 编辑:程序博客网 时间:2024/06/14 11:23
最近因为项目需求,需要写个分页组件,我这人比较懒 一般写出来之后 就记下来供以后粘贴复制了 哈哈,希望大家学习的时候不要这样搞啊
下面贴出代码
PagingBar.mxml
<?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" ><fx:Script><![CDATA[import mx.collections.ArrayCollection;import mx.events.ItemClickEvent;import flash.events.KeyboardEvent;import mx.controls.DataGrid;import mx.validators.NumberValidator;import mx.rpc.events.ResultEvent; import mx.rpc.events.FaultEvent;import mx.controls.Alert;[Bindable][Embed(source='com/iman/sps/sheet/image/first.jpg')]public var firstIcon:Class; public var firstPage:uint; [Bindable][Embed(source='com/iman/sps/sheet/image/pre.jpg')]public var preIcon:Class;public var prePage:uint; [Bindable][Embed(source='com/iman/sps/sheet/image/next.jpg')]public var nextIcon:Class;public var nextPage:uint; [Bindable][Embed(source='com/iman/sps/sheet/image/last.jpg')]public var lastIcon:Class;public var lastPage:uint;[Bindable]public var pageSize:int=15;//单页行数[Bindable]public var totalPage:int=1;//总页数[Bindable]public var currentPage:int=1;//当前页[Bindable]public var totalClum:int=0;//总记录数//分页函数public var localFunction:Function=null;//重新为当前页的变量赋值public function loadData(pageNum:int):void{this.pageSize = setPageSize.selectedItem.data as Number; this.totalPage =Math.ceil(this.totalClum/this.pageSize);if(pageNum>0 && pageNum<=this.totalPage){this.currentPage=pageNum;if(this.localFunction!=null){localFunction(pageNum);}else{Alert.show("请设置回调方法!");}}}//重新设置每页显示记录数public function changePagesize():void{//当前页首条记录的序号var currentPageRows:int=((this.currentPage-1)*this.pageSize);//Alert.show(String(currentPageRows));//重新设置以后,单页显示记录数this.pageSize = setPageSize.selectedItem.data as Number; //重新设置以后,总页数this.totalPage =Math.ceil(this.totalClum/this.pageSize);//重新调整当前页码//Alert.show(String(newPageNum));if(this.localFunction!=null){localFunction(this.currentPage);}else{Alert.show("请设置回调方法!");}}]]></fx:Script><mx:Text id="temp" text="" visible="false" includeInLayout="false"/><mx:HBox verticalGap="0" horizontalGap="0" horizontalAlign="center"verticalAlign="middle"> <mx:Text text="{' 共'+(totalClum)+'条记录'}" fontSize="12"/> <mx:Label text="每页显示:"/><mx:ComboBox id="setPageSize" width="52" height="16" change="changePagesize()"><mx:dataProvider><fx:Array> <fx:Object label="15" data="15" /> <fx:Object label="20" data="20" /><fx:Object label="30" data="30" /> <fx:Object label="40" data="40" /> <fx:Object label="50" data="50" /><fx:Object label="60" data="60" /> <fx:Object label="70" data="70" /> <fx:Object label="80" data="80" /> </fx:Array></mx:dataProvider></mx:ComboBox><mx:Label text="条"/><mx:Button id="firstNavBtn" icon="{firstIcon}" width="10" height="10" click="loadData(1)" enabled="{lbtnPrevious.enabled}"/><mx:LinkButton id="lbtnFirst" label="首页" click="loadData(1)" enabled="{lbtnPrevious.enabled}" fontSize="12"/><mx:Button id="preNavBtn" icon="{preIcon}" width="7" height="10" click="loadData(currentPage-1)" enabled="{currentPage!=1?true:false}"/><mx:LinkButton id="lbtnPrevious" label="上一页" click="loadData(currentPage-1)" enabled="{currentPage!=1?true:false}" fontSize="12"/><mx:Text text="{'【 '+(Math.ceil(this.totalClum/this.pageSize)>0?(currentPage):1)+'/'+(Math.ceil(this.totalClum/this.pageSize)>0?Math.ceil(this.totalClum/this.pageSize):1)+'页】 '}" fontSize="12"/><mx:Button id="nextNavBtn" icon="{nextIcon}" width="7" height="10" click="loadData(currentPage+1)" enabled="{Math.ceil(this.totalClum/this.pageSize)>(currentPage)?true:false}"/><mx:LinkButton id="lbtnNext" label="下一页" click="loadData(currentPage+1)" enabled="{Math.ceil(this.totalClum/this.pageSize)>(currentPage)?true:false}" fontSize="12"/><mx:Button id="lastNavBtn" icon="{lastIcon}" width="10" height="10" click="loadData(Math.ceil(this.totalClum/this.pageSize))" enabled="{lbtnNext.enabled}"/><mx:LinkButton id="lbtnLast" label="尾页" click="loadData(Math.ceil(this.totalClum/this.pageSize))" enabled="{lbtnNext.enabled}" fontSize="12"/><mx:Label text="跳转到"/><mx:NumericStepper id="nsPageNum" width="50" height="22" stepSize="1" minimum="1" maximum="{Math.ceil(this.totalClum/this.pageSize)}" enabled="{lbtnJump.enabled}" cornerRadius="0" fontSize="12"/><mx:Label text="页"/><mx:LinkButton id="lbtnJump" label="GO" click="loadData(nsPageNum.value)" enabled="{Math.ceil(this.totalClum/this.pageSize)>1?true:false}" fontSize="12"/> </mx:HBox></mx:HBox>
在其他组件中引用 其中common 是我自定义的标签 里面引入了这个分页组件的所在位置 例如: xmlns:common="com.iman.common.*"
<common:PagingBar width="100%" height="5%" id="pageBar"></common:PagingBar>
写完之后说说怎么用。里面每次改变分页某个属性 就会触发一个叫做localFunction的函数 这个函数是对外暴漏给引用页面来实现他的功能的
下面是一个示例代码:作用是 首先设置初始页 然后获得 每页显示的数据记录条数 然后 实现分页组件暴露出来的分页功能函数
protected function test_clickHandler(event:MouseEvent):void{firstStart=0;pagesize=pageBar.pageSize;pageBar.localFunction=fun; }
下面我们来实现这个函数 也就是fun 这个fun获得当前页数 因为后台调用了Oracle实现的分页查询 所以我要算出数据从第几条开始 到第几条结束 然后就是调用查询方法了
public function fun(pageNo:int):void{this.firstStart=(pageNo - 1) * pageBar.pageSize;pagesize=pageBar.pageSize;commonQuery.commonQuery(firstStart, pagesize, commonQueryData,accountInfo);}
- Flex4自定义分页组件
- Flex4自定义分页组件
- flex4 自定义分页组件
- android自定义分页组件
- Android 自定义分页组件
- Android 自定义分页组件
- extjs_09_自定义分页组件
- Angular2自定义分页组件
- Flex4组件教程:自定义两级导航菜单组件
- Flex4组件教程:自定义两级导航菜单组件
- 自定义分页组件DATAGRID-DataTable
- 自定义分页组件DATAGRID-SQL
- 自定义JSF通用分页组件
- flex4 list 实现分页
- flex4自动分页
- 自定义Flex4+的Spark组件part1:使用ActionScript3开发Spark组件Component类
- 自定义Flex4+的Spark组件part1:使用ActionScript3开发Spark组件Component类
- flex4 组件执行顺序
- sockaddr与sockaddr_in结构体详细讲解
- gridlayout
- 如何去掉a标签的下划线
- iMx53开发
- LDD3学习笔记(22):感想
- Flex4自定义分页组件
- 异步触发器
- JQuery的强大筛选器
- HDOJ 1342 Lotto
- vc调用dos命令总结(systerm)
- I2C的内核驱动测试代码
- 一款实用的对联广告代码
- USING INDUCTION TO DESIGN 使用归纳法设计算法 [6/14]
- 输入子系统--event层分析