Is there a library or plugin that could be added to a Flex project to add pagination to a Flex Dat开发者_运维百科agrid?
The source code for this paginated datagrid can be found here.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="InitApp()" xmlns:MyComp="*">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.ItemClickEvent;
import mx.controls.Button;
import mx.controls.Alert;
[Bindable]
public var myData:ArrayCollection = new ArrayCollection();
public var orgData:ArrayCollection = new ArrayCollection();
[Bindable]
public var nav:ArrayCollection = new ArrayCollection();
public var pageSize:uint = 10;
public var navSize:uint = 10;
private var index:uint = 0;
private var navPage:uint = 1;
private function InitApp():void
{
for( var x:uint = 1; x <= 500; x++ )
{
var obj:Object = new Object();
obj.Id = x.toString();
obj.Name = "Column " + x.toString();
obj.Street = "5555 Street";
obj.Title = "CEO";
obj.City = "El Paso";
orgData.addItem(obj);
}
refreshDataProvider(index);
createNavBar(Math.ceil(orgData.length/pageSize));
}
private function createNavBar(pages:uint = 1,set:uint = 0):void
{
nav.removeAll();
if( pages > 1 )
{
if( set != 0 )
{
nav.addItem({label:"<<",data:0});
if( (set - navSize ) >= 0 )
{
nav.addItem({label:"<",data:set - navSize});
}
else
{
nav.addItem({label:"<",data:0});
}
}
for( var x:uint = 0; x < navSize; x++)
{
var pg:uint = x + set;
nav.addItem({label: pg + 1,data: pg});
}
if( pg < pages - 1 )
{
nav.addItem({label:">",data:pg + 1});
nav.addItem({label:">>",data:pages - pageSize});
}
}
}
private function navigatePage(event:ItemClickEvent):void
{
refreshDataProvider(event.item.data);
var lb:String = event.item.label.toString();
if( lb.indexOf("<") > -1 || lb.indexOf(">") > -1 )
{
createNavBar(Math.ceil(orgData.length/pageSize),event.item.data);
if( event.item.data == 0 )
{
pageNav.selectedIndex = 0;
}
else
{
pageNav.selectedIndex = 2;
}
}
}
private function refreshDataProvider(start:uint):void
{
myData = new ArrayCollection( orgData.source.slice((start * pageSize),(start * pageSize) + pageSize) );
}
]]>
</mx:Script>
<mx:VBox verticalGap="0">
<mx:DataGrid id="dg" dataProvider="{myData}"></mx:DataGrid>
<mx:ToggleButtonBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{nav}" width="{dg.width}"></mx:ToggleButtonBar>
</mx:VBox>
</mx:Application>
精彩评论