Flex, 網頁設計

Flex教學-DataGrid加入分頁功能

梅干 2010/04/28
梅問題-Flex教學-DataGrid加入分頁功能
  最近有網友問到,Flex的DataGrid要怎麼作分頁,一開始梅干心裡還想說,不是把裡面的屬性開啟就好了嗎?於是便開啟那八百年沒用的Flex,實際測試一下才發現,原來那是aspx才可以,Flex內建的DataGrid並沒有分頁功能,梅干就上網Google一下,找到一個簡易的分頁功能,在梅干測試後,沒什麼太大問題,且也很方便使用,稍作了點整理,提供給有需要的朋友。

Step1
新增一個Flex的Compnent元件,並輸入下方語法。
DataGridAdv.mxml import mx.collections.ArrayCollection; [Bindable] private var mypagedata:ArrayCollection = new ArrayCollection(); [Bindable] public var mygridcolumns:Array; public var mydata:ArrayCollection;//所有的數據 public var pagecount:int=10;//分頁筆數,預設為10筆 public var curpage:int;//當前的頁碼 public var totalpage:int;//總頁數 public var totalcount:int;//總筆數 public function DataProvider(value:ArrayCollection):void { mydata = value; mypagedata.removeAll();//移除目前所顯示的資料 if(mydata.length>0 && null!=mydata) { totalcount = mydata.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>totalpage) return; curpage = value; var curNum:int = value*pagecount; mypagedata.removeAll(); for(var i:int=0;curNum
Step2
新增一個Flex App,語法如下:
DataGrid2Page.mxml import mx.collections.ArrayCollection; import mx.rpc.events.ResultEvent; [Bindable] private var docData:ArrayCollection; private function init():void { this.myxml.send(); } private function resultHandler(event:ResultEvent):void { this.docData=event.result.minwt.doc as ArrayCollection; //將ArrayCollection放到DataGrid中 this.DG.DataProvider(docData); }
  好久沒碰Flex忘的還真快,好在三不五時有加減用一下,還可找回一點片刻記憶,Flex真是一個蠻好用的工具,只不過好多元件都要再手工加強,但也好在網路資料都很蠻豐富,而這分頁功能方法真得很簡單喔!有需要的朋友不坊可以試試看。 
[範例預覽] [範例下載]