用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)" />
效果图:
测试项目下载地址:点击打开链接