生活随笔
收集整理的這篇文章主要介紹了
Flex实现分页显示功能(mx:DataGrid)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Flex使用DataGrid實現的分頁顯示在線運行效果見:http://tongqiuyan.blog.163.com/blog/static/19554530220119267352154/
靜態效果:
通過提供的“首頁”、“上一頁”、“下一頁”、“末頁”和“跳轉”等按鈕,能夠隨意顯示相關頁面的數據。
相關源碼如下:
分頁組件代碼
<?xml?version="1.0"?encoding="utf-8"?> ?<mx:VBox?xmlns:mx="http://www.adobe.com/2006/mxml"?initialize="initData(dataProvider);"> ?????<mx:Script> ?????????<![CDATA[ ?????????????import?mx.collections.ArrayCollection; ?????????????//?當前需要顯示的記錄 ?????????????[Bindable] ?????????????private?var?mypagedata:ArrayCollection?=?new?ArrayCollection(); ?????????????[Bindable] ?????????????public?var?columns:Array;?//?數據集合 ?????????????public?var?dataProvider:ArrayCollection;?//?所有數據 ?????????????public?var?pageCount:int?=?6;//?每頁包含的記錄數,默認6條 ?????????????public?var?curPage:int;?//?當前頁碼 ?????????????public?var?totalPage:int;?//?總頁數 ?????????????public?var?totalCount:int;?//?總記錄條數 ?????????????public?function?initData(value:ArrayCollection):void ?????????????{ ?????????????????//?將所有的數據都賦值給?dataProvider?變量 ?????????????????dataProvider?=?value; ?????????????????//?移除當前頁面中所有數據記錄 ?????????????????mypagedata.removeAll(); ?????????????????if(null?!=?dataProvider?&&?dataProvider.length?>?0) ?????????????????{ ?????????????????????totalCount?=?dataProvider.length; ?????????????????????totalPage?=?(totalCount?+?pageCount?-1)/pageCount; ?????????????????????setPager(0); ?????????????????????inputpage.minimum=1; ?????????????????????inputpage.maximum=?totalPage; ?????????????????}else{ ?????????????????????totalCount?=?0; ?????????????????????totalPage?=?0; ?????????????????????curPage?=?0; ?????????????????????inputpage.minimum=0; ?????????????????????inputpage.maximum=?0; ?????????????????????pagedetail.text?=?"第?0?頁/共?0?頁?共?0?條記錄"; ?????????????????} ?????????????} ?????????????public?function?setPager(value:int):void ?????????????{ ?????????????????if(value?<0?||?(value+1)>totalPage){ ?????????????????????return; ?????????????????} ?????????????????curPage?=?value; ?????????????????//?計算跳轉到頁面中的第一條記錄所在記錄中是第幾條記錄 ?????????????????var?curNum?:?int?=?value*pageCount; ?????????????????//?清空當前顯示的數據記錄 ?????????????????mypagedata.removeAll(); ?????????????????for(var?i:int?=?0;?curNum<dataProvider.length&&i<pageCount;?i++,curNum++){ ?????????????????????mypagedata.addItem(dataProvider.getItemAt(curNum)); ?????????????????} ?????????????????var?temp:int=curPage+1; ?????????????????pagedetail.text?=?"第?"+temp+"?頁/共?"+totalPage+"?頁?共?"+totalCount+"?條記錄"; ?????????????????cudg.dataProvider?=?mypagedata; ?????????????} ?????????]]> ?????</mx:Script> ?????<mx:DataGrid?id="cudg"?columns="{columns}"?width="100%"?height="100%"?/> ?????<mx:HBox?verticalAlign="middle"?horizontalAlign="center"> ?????????<mx:Label?text="第?0?頁/共?0?頁"?id="pagedetail"?/> ?????????<mx:LinkButton?label="首頁"?click="setPager(0);"?/> ?????????<mx:LinkButton?label="上一頁"?click="setPager(curPage?-?1);"?/> ?????????<mx:LinkButton?label="下一頁"?click="setPager(curPage?+?1);"?/> ?????????<mx:LinkButton?label="末頁"?click="setPager(totalPage?-?1);"?/> ?????????<mx:NumericStepper?id="inputpage"?stepSize="1"?minimum="0"?maximum="0"?/> ?????????<mx:LinkButton?label="跳轉"?click="setPager(inputpage.value?-?1);"?/> ?????</mx:HBox> ?</mx:VBox>? 涉及控件包括:<mx:DataGrid>、<mx:HBox>、<mx:LinkButton>、<mx:NumericStepper>等。
轉載于:https://blog.51cto.com/tongqiuyan/698465
總結
以上是生活随笔為你收集整理的Flex实现分页显示功能(mx:DataGrid)的全部內容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。