flex通用分页控件


       用flex做项目也做了一段时间了,也做了一些项目,但是一直都为做flex的datdgrid的分页功能而蛋疼,重复的代码总是写的太多,这周末闲着无事,把以前做的分页功能好好的总结了一下,做了个通用的flex分页控件,现在把他记录下来,为以后查看方便也共大家学习和讨论,也希望有哪位大虾,给个好的的建议,怎么能把flex datagrid分页控件很好的从业务代码里面分离出来,以前用extjs开发的时候,感觉extjs的grid感觉就是用的很舒服,因为它自己内置了分一条,本来自己也想写的像extjs grid那样,但是感觉如果把flex datagrid做成那样,做起来太反锁,要重写datagrid的很多的功能,这样感觉得不偿失,这个分页控件的测试项目,用的是hibernate实现的JPA规范+flex4.6+java,flex和java交互用的是blazeds;好了废话不多说了,看看分页控件的代码吧:

<?xml version="1.0" encoding="utf-8"?>
<s:HGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
		  xmlns:s="library://ns.adobe.com/flex/spark"
		  xmlns:mx="library://ns.adobe.com/flex/mx"
		  width="100%" height="20" gap="2" verticalAlign="middle">
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import cn.ganmeng.util.FlexUtil;
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.events.FlexEvent;
			import mx.rpc.AsyncToken;
			import mx.rpc.events.ResultEvent;
			[Bindable]
			private var pageCount :int=0;
			[Bindable]
			public var dataGridArr:ArrayCollection = null
				//总记录数
			private  var recordCount:int = 0;
				
			//获取data-------------------------
			public function getPageData(token1:AsyncToken,token2:AsyncToken):void{
				
				FlexUtil.addResponder(token1,getDataFn,FlexUtil.getROFaultFn);
				FlexUtil.addResponder(token2,getRecordCountFn,FlexUtil.getROFaultFn);
				barStr.text = "稍后,数据加载中...";
			}
			
			//回调getPageData
			private function getDataFn(event:ResultEvent):void{
				dataGridArr = event.result as ArrayCollection;
				
			}
			//获取data-------------------------end
			
			//回调getRecordCount
			private function getRecordCountFn(event:ResultEvent):void{
				recordCount = event.result as int;
				pageCount = getPageCount(recordCount,35);
				selectPageNS.maximum = pageCount;
				barStr.text = "共"+recordCount+"条/共"+pageCount+"页";
			}
			
			
			//首页
			public function homePage_btn_clickHandler(token1:AsyncToken,token2:AsyncToken):void
			{
				if(selectPageNS.value>1){
						 getPageData(token1,token2);
					}
					selectPageNS.value = 1 ;
			}
			
			//上一页
			public function backPage_btn_clickHandler(token1:AsyncToken,token2:AsyncToken):void
			{
					if(selectPageNS.value>selectPageNS.minimum){
						getPageData(token1,token2);
						selectPageNS.value = selectPageNS.value-1 ;
					}
			}
			
			//下一页
			public function nextPage_btn_clickHandler(token1:AsyncToken,token2:AsyncToken):void
			{
					
					if(selectPageNS.value<selectPageNS.maximum){
						getPageData(token1,token2);
						selectPageNS.value = selectPageNS.value+1 ;
					}
				
			}
			
			//尾页
			public function lastPage_btn_clickHandler(token1:AsyncToken,token2:AsyncToken):void
			{
					if(selectPageNS.value<selectPageNS.maximum){
						getPageData(token1,token2);
					}
					  selectPageNS.value = selectPageNS.maximum;
			}
			
			
	//算页数
	//size表示记录总数  每页显示记录数showSize
	public function getPageCount(size:int,showSize:int):int{
				var sizeNO:int = 0;
				if(size>0){
					if(size<=showSize){
						sizeNO=1
					}else{
						sizeNO = (size/showSize)+(size%showSize !=0?1:0)
					}
				}else if(size==0){
					sizeNO = 0;
				}
				pageCount = sizeNO;
				return sizeNO;
				
			}
			public function selectPageNS_changeHandler(token1:AsyncToken,token2:AsyncToken):void
			{
					getPageData(token1,token2);
			}
		]]>
	</fx:Script>
	<mx:LinkButton id="homePage_btn" width="30"  icon="@Embed('assets/images/firstPage.png')" toolTip="返回首页"/>
	<mx:LinkButton id="backPage_btn" width="30"
				   icon="@Embed('assets/images/backPage.png')" toolTip="上一页"/>
	<s:NumericStepper id="selectPageNS" height="20" cornerRadius="4" fontWeight="bold" minimum="1"
					  textAlign="center"/>
	<mx:LinkButton id="nextPage_btn" width="30"
				   icon="@Embed('assets/images/nextPage.png')" toolTip="下一页"/>
	<mx:LinkButton id="lastPage_btn" width="30" 
				   icon="@Embed('assets/images/lastPage.png')" toolTip="返回尾页"/>
	<s:Label id="barStr" color="#1C3B61" text="稍后,数据加载中..."/>
</s:HGroup>

但是感觉还是很不舒服的是在业务代码中还是有一些的侵入,如代码:

protected function pageToolBarID_clickHandler(event:MouseEvent):void
{
 var strID:String = event.target.id
 var pno:int = pageToolBarID.selectPageNS.value;
 var _par:String = StringUtil.trim(par.text);
 if(strID == "homePage_btn"){
  pageToolBarID.homePage_btn_clickHandler(PRO.searchPatient(1,35,_par),PRO.getSum(_par));
 } else if(strID == "backPage_btn"){
  pageToolBarID.backPage_btn_clickHandler(PRO.searchPatient(pageToolBarID.selectPageNS.value-1<pageToolBarID.selectPageNS.minimum?1:pageToolBarID.selectPageNS.value-1,PRO.getSum(_par));
 }else if(strID == "nextPage_btn"){
  pageToolBarID.nextPage_btn_clickHandler(PRO.searchPatient(pageToolBarID.selectPageNS.value+1>pageToolBarID.selectPageNS.maximum?pageToolBarID.selectPageNS.maximum:pageToolBarID.selectPageNS.value+1,PRO.getSum(_par));
 }else if(strID == "lastPage_btn"){
  pageToolBarID.lastPage_btn_clickHandler(PRO.searchPatient(pageToolBarID.selectPageNS.maximum,PRO.getSum(_par));
 }else if(strID == "incrementButton"){
  if(pno<pageToolBarID.selectPageNS.maximum)
   pageToolBarID.selectPageNS_changeHandler(PRO.searchPatient(pageToolBarID.selectPageNS.value,PRO.getSum(_par));
 }else if(strID == "decrementButton"){
  if(pno>1)
   pageToolBarID.selectPageNS_changeHandler(PRO.searchPatient(pageToolBarID.selectPageNS.value,PRO.getSum(_par));
 }
 
}

分页条代码:

 

<local:pageToolBar id="pageToolBarID"   click="pageToolBarID_clickHandler(event)"  />


效果图:

 

 

测试项目下载地址:点击打开链接

相关文章

一:display:flex布局display:flex是一种布局方式。它即可以...
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何...
移动端开发知识点pc端软件和移动端apppc端软件是什么,有哪些...
最近挺忙的,准备考试,还有其他的事,没时间研究东西,快周...
display:flex;把容器设置为弹性盒模型(设置为弹性盒模型之后...
我在网页上运行了一个Flex应用程序,我想使用Command←组合键...