Flex 網頁開發

Flex教學-DataGrid加入分頁功能

2010/04/28

梅問題-Flex教學-DataGrid加入分頁功能

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


Step1
新增一個Flex的Compnent元件,並輸入下方語法。
DataGridAdv.mxml

<?xml version=“1.0” encoding=“utf-8”?>

mx:Script

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 = valuepagecount;
mypagedata.removeAll();

for(var i:int=0;curNum/mx:Script


/mx:DataGrid

/mx:Spacer







/mx:HBox
/mx:VBox


Step2
新增一個Flex App,語法如下:
DataGrid2Page.mxml

<?xml version=“1.0” encoding=“utf-8”?>
<mx:Application xmlns:mx=“http://www.adobe.com/2006/mxml" layout=“absolute” xmlns:com=”
” creationComplete=“init()” fontSize=“12” viewSourceURL=“srcview/index.html”>

mx:Script

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);
}

/mx:Script





com:mygridcolumns



/com:mygridcolumns
/com:DataGridAdv

/mx:Panel

/mx:Application


  好久沒碰Flex忘的還真快,好在三不五時有加減用一下,還可找回一點片刻記憶,Flex真是一個蠻好用的工具,只不過好多元件都要再手工加強,但也好在網路資料都很蠻豐富,而這分頁功能方法真得很簡單喔!有需要的朋友不坊可以試試看。 
[範例預覽] [範例下載]