flex4下的代码
main.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()" xmlns:local="*">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private function initData():void
{
this.pbar.dataGroup=dg1;
this.pbar.orgData=arr;
this.pbar.dataBind();
}
private var arr:ArrayCollection = new ArrayCollection([
{A:1, B:20, selected:false, label:"one"},
{A:2, B:20, selected:false, label:"two"},
{A:3, B:20, selected:true, label:"three"},
{A:4, B:20, selected:true, label:"four"},
{A:5, B:20, selected:true, label:"five"},
{A:6, B:20, selected:true, label:"six"},
{A:7, B:20, selected:true, label:"seven"},
{A:8, B:20, selected:true, label:"eight"},
{A:9, B:20, selected:true, label:"nine"},
{A:10, B:20, selected:true, label:"ten"},
{A:11, B:20, selected:true, label:"Hello"},
{A:12, B:20, selected:true, label:"Hello"},
{A:13, B:20, selected:true, label:"Hello"},
{A:14, B:20, selected:true, label:"Hello"},
{A:15, B:20, selected:true, label:"Hello"},
{A:16, B:20, selected:false, label:"Hello"},
{A:17, B:20, selected:false, label:"Hello"},
{A:18, B:20, selected:true, label:"seven"},
{A:19, B:20, selected:true, label:"eight"},
{A:20, B:20, selected:true, label:"nine"},
{A:21, B:20, selected:true, label:"ten"},
{A:22, B:20, selected:true, label:"Hello"},
{A:23, B:20, selected:true, label:"Hello"},
{A:24, B:20, selected:true, label:"Hello"},
{A:25, B:20, selected:true, label:"Hello"},
{A:26, B:20, selected:true, label:"Hello"},
{A:27, B:20, selected:false, label:"Hello"},
{A:28, B:20, selected:false, label:"Hello"}
]);
]]>
</fx:Script>
<s:Panel>
<s:DataGroup id="dg1" x="57" y="19" creationComplete="initData()" itemRenderer="userRenderer">
<s:layout>
<s:VerticalLayout />
</s:layout>
</s:DataGroup>
<local:PagingBar id="pbar" x="10" y="218" width="674">
</local:PagingBar>
</s:Panel>
</s:Application>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()" xmlns:local="*">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private function initData():void
{
this.pbar.dataGroup=dg1;
this.pbar.orgData=arr;
this.pbar.dataBind();
}
private var arr:ArrayCollection = new ArrayCollection([
{A:1, B:20, selected:false, label:"one"},
{A:2, B:20, selected:false, label:"two"},
{A:3, B:20, selected:true, label:"three"},
{A:4, B:20, selected:true, label:"four"},
{A:5, B:20, selected:true, label:"five"},
{A:6, B:20, selected:true, label:"six"},
{A:7, B:20, selected:true, label:"seven"},
{A:8, B:20, selected:true, label:"eight"},
{A:9, B:20, selected:true, label:"nine"},
{A:10, B:20, selected:true, label:"ten"},
{A:11, B:20, selected:true, label:"Hello"},
{A:12, B:20, selected:true, label:"Hello"},
{A:13, B:20, selected:true, label:"Hello"},
{A:14, B:20, selected:true, label:"Hello"},
{A:15, B:20, selected:true, label:"Hello"},
{A:16, B:20, selected:false, label:"Hello"},
{A:17, B:20, selected:false, label:"Hello"},
{A:18, B:20, selected:true, label:"seven"},
{A:19, B:20, selected:true, label:"eight"},
{A:20, B:20, selected:true, label:"nine"},
{A:21, B:20, selected:true, label:"ten"},
{A:22, B:20, selected:true, label:"Hello"},
{A:23, B:20, selected:true, label:"Hello"},
{A:24, B:20, selected:true, label:"Hello"},
{A:25, B:20, selected:true, label:"Hello"},
{A:26, B:20, selected:true, label:"Hello"},
{A:27, B:20, selected:false, label:"Hello"},
{A:28, B:20, selected:false, label:"Hello"}
]);
]]>
</fx:Script>
<s:Panel>
<s:DataGroup id="dg1" x="57" y="19" creationComplete="initData()" itemRenderer="userRenderer">
<s:layout>
<s:VerticalLayout />
</s:layout>
</s:DataGroup>
<local:PagingBar id="pbar" x="10" y="218" width="674">
</local:PagingBar>
</s:Panel>
</s:Application>
PagingBar.mxml
<?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" fontSize="12" paddingTop="2">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.controls.DataGrid;
import mx.events.ItemClickEvent;
import spark.components.DataGroup;
private var firstPage:uint;
private var prePage:uint;
private var nextPage:uint;
private var lastPage:uint;
//是否已初始化
private var isInit:Boolean=true;
//分页条对应的Grid
public var dataGroup:DataGroup=null;
//默认起始页码,第1页
private var currentPageIndex:uint = 0;
//每页记录数
public var pageSize:uint = 10;
//总页数
private var totalPages:uint = 0;
//所有的数据
public var orgData:ArrayCollection=null;
//分页函数
public var pagingFunction:Function=null;
//是否重绘页码条,当使用服务端分页时使用
private var isCreateNavBar:Boolean = true;
//显示到Grid的数据
[Bindable]
public var viewData:ArrayCollection=null;
//记录总数,调用服务端发页时使用
public var totalRecord:int=0;
//页码条数据,绑定
[Bindable]
private var nav:ArrayCollection = new ArrayCollection();
// 页码条上显示页码的个数
public var navSize:uint = 3;
//每页记录数下拉框
public var pageSizeDropDownListData:ArrayCollection=null;
public function dataBind(isServerSide:Boolean=false):void
{
//是否初始化
if(isInit)
{
if(pageSizeDropDownListData==null)
{
pageSizeDropDownListData = new ArrayCollection();
pageSizeDropDownListData.addItem({label:5,data:5});
pageSizeDropDownListData.addItem({label:10,data:10});
pageSizeDropDownListData.addItem({label:20,data:20});
pageSizeDropDownListData.addItem({label:30,data:30});
}
pageSizeComobox.dataProvider=pageSizeDropDownListData;
pageSizeComobox.selectedIndex=1;
isInit=false;
}
refreshDataProvider(currentPageIndex,isCreateNavBar,pageSize,isServerSide);
}
/**
* 页码按钮按下,first,pre,next,last
*/
private function navigateButtonClick(pageString:String):void
{
var pageIndex:uint=0;
switch(pageString)
{
case "firstPage":
pageIndex=firstPage;
break;
case "prePage":
pageIndex=prePage;
break;
case "nextPage":
pageIndex=nextPage;
break;
default:
//lastPage
pageIndex=lastPage;
}
refreshDataProvider(pageIndex);
}
/**
* 更新数据源,更新表格显示数据
*/
private function refreshDataProvider(pageIndex:uint,isCreateNavBar:Boolean=true,pageSize:uint=0,resultReturn:Boolean=false):void
{
//分页函数
if(dataGroup==null)
{
return;
}
currentPageIndex=pageIndex;
if(pageSize==0)
{
pageSize=this.pageSize;
}
else
{
this.pageSize=pageSize;
if(!resultReturn) totalPages = Math.ceil(orgData.length/pageSize);
}
if(!resultReturn)
{
if(this.pagingFunction!=null)
{
pagingFunction(pageIndex,pageSize);
this.isCreateNavBar=isCreateNavBar;
}
else
{
viewData = new ArrayCollection( orgData.source.slice((pageIndex * pageSize),(pageIndex * pageSize) + pageSize) );
dataGroup.dataProvider=viewData;
pageNumber.text=(pageIndex+1).toString();
totalRecordLabel.text = '总记录数:' + orgData.length.toString();
}
}
else
{
dataGroup.dataProvider=orgData;
totalPages = Math.ceil(totalRecord/pageSize);
pageNumber.text=(pageIndex+1).toString();
totalRecordLabel.text = '总记录数:' + totalRecord.toString()
}
totalPagesLabel.text = '总页数:' + totalPages;
if(isCreateNavBar) createNavBar(pageIndex);
}
/**
* 构建页码条
* pages:总页数
* pageIndex:当前页(注意,从0开始)
*
*/
private function createNavBar(pageIndex:uint = 0):void
{
nav.removeAll();
//向前图标操作,first,Pre
if( pageIndex > 1 )
{
firstPage=0;
firstNavBtn.visible=true;
var intLFive:int = pageIndex-navSize; // calculate start of last 5;
prePage=intLFive;
preNavBtn.visible=true;
}
else
{
firstNavBtn.visible=false;
preNavBtn.visible=false;
}
//页码条
for( var x:uint = 0; x < navSize; x++)
{
var pg:uint = x + pageIndex;
nav.addItem({label: pg + 1,data: pg});
//
var pgg:uint = pg+1;
if(pgg>=totalPages){ //搜索到最后一个页码,停止添加到navbar
x=navSize;
}
}
//计算最后一组页码条中第一个页码的页码编号
var lastpage:Number = 0;
for( var y:uint = navSize; y <= totalPages-1;y = y + navSize )
{
//lets calculate the lastpage button
if(y+5 > navSize)
{
lastpage = y;
}
}
//向后图标
if( pg < totalPages - 1 )
{
nextPage=pg + 1;
nextNavBtn.visible=true;
lastPage=lastpage;
lastNavBtn.visible=true;
}
else
{
nextNavBtn.visible=false;
lastNavBtn.visible=false;
}
}
/**
* 页码按钮按下(页码条点击)
*/
private function navigatePage(event:ItemClickEvent):void
{
refreshDataProvider(event.item.data,false);
}
/**
* 每页记录数变更(下拉框选择)
*/
private function pageSizeSelectChange():void
{
refreshDataProvider(0,true,uint(pageSizeComobox.selectedItem.data));
}
/**
* 页码变更(直接输入)
*/
private function pageIndexInsertChange(event:Event):void
{
var keyboardEvent:KeyboardEvent=event as KeyboardEvent;
if(keyboardEvent!=null&&keyboardEvent.keyCode== Keyboard.ENTER)
{
var pageIndex:uint=uint(pageNumber.text)-1;
if(pageIndex>0&&pageIndex<totalPages&&pageIndex!=currentPageIndex)
{
refreshDataProvider(pageIndex);
}
else
{
pageNumber.text = (currentPageIndex+1).toString();
}
}
}
/**
* 查看所有
*/
private function viewAll():void{
var tempTotalRecord:uint=0;
if(pagingFunction!=null) tempTotalRecord=totalRecord;
else tempTotalRecord=orgData.length;
//
//pageSizeComobox.text=tempTotalRecord.toString();
//pageSizeComobox.selectedIndex=-1;
refreshDataProvider(0,true,tempTotalRecord);
}
]]>
</fx:Script>
<s:Label paddingTop="3" id="totalPagesLabel" color="#FA1F02" />
<s:Label paddingTop="3" id="totalRecordLabel" color="#FA0213" />
<s:Button id="firstNavBtn" label="首页" width="70" height="20" click="navigateButtonClick('firstPage');" />
<s:Button id="preNavBtn" label="上一页" width="70" height="20" click="navigateButtonClick('prePage');"/>
<mx:LinkBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{nav}" height="26"/>
<s:Button id="nextNavBtn" label="下一页" width="70" height="20" click="navigateButtonClick('nextPage');"/>
<s:Button id="lastNavBtn" label="尾页" width="70" height="20" click="navigateButtonClick('lastPage');"/>
<s:Label paddingTop="3" text="每页记录:"/>
<s:ComboBox id="pageSizeComobox" cornerRadius="0" paddingLeft="0" fontWeight="normal" width="50" change="pageSizeSelectChange()" />
<s:Label paddingTop="3" text="页码:"/>
<s:TextInput id="pageNumber" width="40" keyDown="pageIndexInsertChange(event);" />
<mx:LinkButton id="viewAllLinkBtn" label="查看所有" click="viewAll();"/>
</s:HGroup>
<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" fontSize="12" paddingTop="2">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.controls.DataGrid;
import mx.events.ItemClickEvent;
import spark.components.DataGroup;
private var firstPage:uint;
private var prePage:uint;
private var nextPage:uint;
private var lastPage:uint;
//是否已初始化
private var isInit:Boolean=true;
//分页条对应的Grid
public var dataGroup:DataGroup=null;
//默认起始页码,第1页
private var currentPageIndex:uint = 0;
//每页记录数
public var pageSize:uint = 10;
//总页数
private var totalPages:uint = 0;
//所有的数据
public var orgData:ArrayCollection=null;
//分页函数
public var pagingFunction:Function=null;
//是否重绘页码条,当使用服务端分页时使用
private var isCreateNavBar:Boolean = true;
//显示到Grid的数据
[Bindable]
public var viewData:ArrayCollection=null;
//记录总数,调用服务端发页时使用
public var totalRecord:int=0;
//页码条数据,绑定
[Bindable]
private var nav:ArrayCollection = new ArrayCollection();
// 页码条上显示页码的个数
public var navSize:uint = 3;
//每页记录数下拉框
public var pageSizeDropDownListData:ArrayCollection=null;
public function dataBind(isServerSide:Boolean=false):void
{
//是否初始化
if(isInit)
{
if(pageSizeDropDownListData==null)
{
pageSizeDropDownListData = new ArrayCollection();
pageSizeDropDownListData.addItem({label:5,data:5});
pageSizeDropDownListData.addItem({label:10,data:10});
pageSizeDropDownListData.addItem({label:20,data:20});
pageSizeDropDownListData.addItem({label:30,data:30});
}
pageSizeComobox.dataProvider=pageSizeDropDownListData;
pageSizeComobox.selectedIndex=1;
isInit=false;
}
refreshDataProvider(currentPageIndex,isCreateNavBar,pageSize,isServerSide);
}
/**
* 页码按钮按下,first,pre,next,last
*/
private function navigateButtonClick(pageString:String):void
{
var pageIndex:uint=0;
switch(pageString)
{
case "firstPage":
pageIndex=firstPage;
break;
case "prePage":
pageIndex=prePage;
break;
case "nextPage":
pageIndex=nextPage;
break;
default:
//lastPage
pageIndex=lastPage;
}
refreshDataProvider(pageIndex);
}
/**
* 更新数据源,更新表格显示数据
*/
private function refreshDataProvider(pageIndex:uint,isCreateNavBar:Boolean=true,pageSize:uint=0,resultReturn:Boolean=false):void
{
//分页函数
if(dataGroup==null)
{
return;
}
currentPageIndex=pageIndex;
if(pageSize==0)
{
pageSize=this.pageSize;
}
else
{
this.pageSize=pageSize;
if(!resultReturn) totalPages = Math.ceil(orgData.length/pageSize);
}
if(!resultReturn)
{
if(this.pagingFunction!=null)
{
pagingFunction(pageIndex,pageSize);
this.isCreateNavBar=isCreateNavBar;
}
else
{
viewData = new ArrayCollection( orgData.source.slice((pageIndex * pageSize),(pageIndex * pageSize) + pageSize) );
dataGroup.dataProvider=viewData;
pageNumber.text=(pageIndex+1).toString();
totalRecordLabel.text = '总记录数:' + orgData.length.toString();
}
}
else
{
dataGroup.dataProvider=orgData;
totalPages = Math.ceil(totalRecord/pageSize);
pageNumber.text=(pageIndex+1).toString();
totalRecordLabel.text = '总记录数:' + totalRecord.toString()
}
totalPagesLabel.text = '总页数:' + totalPages;
if(isCreateNavBar) createNavBar(pageIndex);
}
/**
* 构建页码条
* pages:总页数
* pageIndex:当前页(注意,从0开始)
*
*/
private function createNavBar(pageIndex:uint = 0):void
{
nav.removeAll();
//向前图标操作,first,Pre
if( pageIndex > 1 )
{
firstPage=0;
firstNavBtn.visible=true;
var intLFive:int = pageIndex-navSize; // calculate start of last 5;
prePage=intLFive;
preNavBtn.visible=true;
}
else
{
firstNavBtn.visible=false;
preNavBtn.visible=false;
}
//页码条
for( var x:uint = 0; x < navSize; x++)
{
var pg:uint = x + pageIndex;
nav.addItem({label: pg + 1,data: pg});
//
var pgg:uint = pg+1;
if(pgg>=totalPages){ //搜索到最后一个页码,停止添加到navbar
x=navSize;
}
}
//计算最后一组页码条中第一个页码的页码编号
var lastpage:Number = 0;
for( var y:uint = navSize; y <= totalPages-1;y = y + navSize )
{
//lets calculate the lastpage button
if(y+5 > navSize)
{
lastpage = y;
}
}
//向后图标
if( pg < totalPages - 1 )
{
nextPage=pg + 1;
nextNavBtn.visible=true;
lastPage=lastpage;
lastNavBtn.visible=true;
}
else
{
nextNavBtn.visible=false;
lastNavBtn.visible=false;
}
}
/**
* 页码按钮按下(页码条点击)
*/
private function navigatePage(event:ItemClickEvent):void
{
refreshDataProvider(event.item.data,false);
}
/**
* 每页记录数变更(下拉框选择)
*/
private function pageSizeSelectChange():void
{
refreshDataProvider(0,true,uint(pageSizeComobox.selectedItem.data));
}
/**
* 页码变更(直接输入)
*/
private function pageIndexInsertChange(event:Event):void
{
var keyboardEvent:KeyboardEvent=event as KeyboardEvent;
if(keyboardEvent!=null&&keyboardEvent.keyCode== Keyboard.ENTER)
{
var pageIndex:uint=uint(pageNumber.text)-1;
if(pageIndex>0&&pageIndex<totalPages&&pageIndex!=currentPageIndex)
{
refreshDataProvider(pageIndex);
}
else
{
pageNumber.text = (currentPageIndex+1).toString();
}
}
}
/**
* 查看所有
*/
private function viewAll():void{
var tempTotalRecord:uint=0;
if(pagingFunction!=null) tempTotalRecord=totalRecord;
else tempTotalRecord=orgData.length;
//
//pageSizeComobox.text=tempTotalRecord.toString();
//pageSizeComobox.selectedIndex=-1;
refreshDataProvider(0,true,tempTotalRecord);
}
]]>
</fx:Script>
<s:Label paddingTop="3" id="totalPagesLabel" color="#FA1F02" />
<s:Label paddingTop="3" id="totalRecordLabel" color="#FA0213" />
<s:Button id="firstNavBtn" label="首页" width="70" height="20" click="navigateButtonClick('firstPage');" />
<s:Button id="preNavBtn" label="上一页" width="70" height="20" click="navigateButtonClick('prePage');"/>
<mx:LinkBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{nav}" height="26"/>
<s:Button id="nextNavBtn" label="下一页" width="70" height="20" click="navigateButtonClick('nextPage');"/>
<s:Button id="lastNavBtn" label="尾页" width="70" height="20" click="navigateButtonClick('lastPage');"/>
<s:Label paddingTop="3" text="每页记录:"/>
<s:ComboBox id="pageSizeComobox" cornerRadius="0" paddingLeft="0" fontWeight="normal" width="50" change="pageSizeSelectChange()" />
<s:Label paddingTop="3" text="页码:"/>
<s:TextInput id="pageNumber" width="40" keyDown="pageIndexInsertChange(event);" />
<mx:LinkButton id="viewAllLinkBtn" label="查看所有" click="viewAll();"/>
</s:HGroup>
userRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<s:Label text="{data.A}"/>
</s:ItemRenderer>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<s:Label text="{data.A}"/>
</s:ItemRenderer>
flex3下的代码
main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:file="file.*" xmlns:local="*">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var arr:ArrayCollection = new ArrayCollection([
{A:1, B:20, selected:false, label:"one"},
{A:2, B:20, selected:false, label:"two"},
{A:3, B:20, selected:true, label:"three"},
{A:4, B:20, selected:true, label:"four"},
{A:5, B:20, selected:true, label:"five"},
{A:6, B:20, selected:true, label:"six"},
{A:7, B:20, selected:true, label:"seven"},
{A:8, B:20, selected:true, label:"eight"},
{A:9, B:20, selected:true, label:"nine"},
{A:10, B:20, selected:true, label:"ten"},
{A:11, B:20, selected:true, label:"Hello"},
{A:12, B:20, selected:true, label:"Hello"},
{A:13, B:20, selected:true, label:"Hello"},
{A:14, B:20, selected:true, label:"Hello"},
{A:15, B:20, selected:true, label:"Hello"},
{A:16, B:20, selected:false, label:"Hello"},
{A:17, B:20, selected:false, label:"Hello"},
{A:18, B:20, selected:true, label:"seven"},
{A:19, B:20, selected:true, label:"eight"},
{A:20, B:20, selected:true, label:"nine"},
{A:21, B:20, selected:true, label:"ten"},
{A:22, B:20, selected:true, label:"Hello"},
{A:23, B:20, selected:true, label:"Hello"},
{A:24, B:20, selected:true, label:"Hello"},
{A:25, B:20, selected:true, label:"Hello"},
{A:26, B:20, selected:true, label:"Hello"},
{A:27, B:20, selected:false, label:"Hello"},
{A:28, B:20, selected:false, label:"Hello"}
]);
private function initData():void
{
this.pbar.dataGrid=dg2;
this.pbar.orgData=arr;
this.pbar.dataBind();
}
]]>
</mx:Script>
<mx:Panel width="704" height="296" layout="absolute">
<mx:DataGrid id="dg2" x="10" y="10" width="432" height="200" creationComplete="initData()">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="A"/>
<mx:DataGridColumn headerText="Column 2" dataField="B"/>
<mx:DataGridColumn headerText="Column 3" dataField="label"/>
</mx:columns>
</mx:DataGrid>
<local:PagingBar id="pbar" x="10" y="218" width="674">
</local:PagingBar>
</mx:Panel>
</mx:Application>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:file="file.*" xmlns:local="*">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var arr:ArrayCollection = new ArrayCollection([
{A:1, B:20, selected:false, label:"one"},
{A:2, B:20, selected:false, label:"two"},
{A:3, B:20, selected:true, label:"three"},
{A:4, B:20, selected:true, label:"four"},
{A:5, B:20, selected:true, label:"five"},
{A:6, B:20, selected:true, label:"six"},
{A:7, B:20, selected:true, label:"seven"},
{A:8, B:20, selected:true, label:"eight"},
{A:9, B:20, selected:true, label:"nine"},
{A:10, B:20, selected:true, label:"ten"},
{A:11, B:20, selected:true, label:"Hello"},
{A:12, B:20, selected:true, label:"Hello"},
{A:13, B:20, selected:true, label:"Hello"},
{A:14, B:20, selected:true, label:"Hello"},
{A:15, B:20, selected:true, label:"Hello"},
{A:16, B:20, selected:false, label:"Hello"},
{A:17, B:20, selected:false, label:"Hello"},
{A:18, B:20, selected:true, label:"seven"},
{A:19, B:20, selected:true, label:"eight"},
{A:20, B:20, selected:true, label:"nine"},
{A:21, B:20, selected:true, label:"ten"},
{A:22, B:20, selected:true, label:"Hello"},
{A:23, B:20, selected:true, label:"Hello"},
{A:24, B:20, selected:true, label:"Hello"},
{A:25, B:20, selected:true, label:"Hello"},
{A:26, B:20, selected:true, label:"Hello"},
{A:27, B:20, selected:false, label:"Hello"},
{A:28, B:20, selected:false, label:"Hello"}
]);
private function initData():void
{
this.pbar.dataGrid=dg2;
this.pbar.orgData=arr;
this.pbar.dataBind();
}
]]>
</mx:Script>
<mx:Panel width="704" height="296" layout="absolute">
<mx:DataGrid id="dg2" x="10" y="10" width="432" height="200" creationComplete="initData()">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="A"/>
<mx:DataGridColumn headerText="Column 2" dataField="B"/>
<mx:DataGridColumn headerText="Column 3" dataField="label"/>
</mx:columns>
</mx:DataGrid>
<local:PagingBar id="pbar" x="10" y="218" width="674">
</local:PagingBar>
</mx:Panel>
</mx:Application>
PagingBar.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white" fontSize="12" paddingTop="2">
<mx:Script>
<![CDATA[
import mx.events.ItemClickEvent;
import mx.collections.ArrayCollection;
import mx.controls.DataGrid;
private var firstPage:uint;
private var prePage:uint;
private var nextPage:uint;
private var lastPage:uint;
//是否已初始化
private var isInit:Boolean=true;
//分页条对应的Grid
public var dataGrid:DataGrid=null;
//默认起始页码,第1页
private var currentPageIndex:uint = 0;
//每页记录数
public var pageSize:uint = 10;
//总页数
private var totalPages:uint = 0;
//所有的数据
public var orgData:ArrayCollection=null;
//分页函数
public var pagingFunction:Function=null;
//是否重绘页码条,当使用服务端分页时使用
private var isCreateNavBar:Boolean = true;
//显示到Grid的数据
[Bindable]
public var viewData:ArrayCollection=null;
//记录总数,调用服务端发页时使用
public var totalRecord:int=0;
//页码条数据,绑定
[Bindable]
private var nav:ArrayCollection = new ArrayCollection();
// 页码条上显示页码的个数
public var navSize:uint = 3;
//每页记录数下拉框
public var pageSizeDropDownListData:ArrayCollection=null;
public function dataBind(isServerSide:Boolean=false):void
{
//是否初始化
if(isInit)
{
if(pageSizeDropDownListData==null)
{
pageSizeDropDownListData = new ArrayCollection();
pageSizeDropDownListData.addItem({label:5,data:5});
pageSizeDropDownListData.addItem({label:10,data:10});
pageSizeDropDownListData.addItem({label:20,data:20});
pageSizeDropDownListData.addItem({label:30,data:30});
}
pageSizeComobox.dataProvider=pageSizeDropDownListData;
pageSizeComobox.selectedIndex=1;
isInit=false;
}
refreshDataProvider(currentPageIndex,isCreateNavBar,pageSize,isServerSide);
}
/**
* 页码按钮按下,first,pre,next,last
*/
private function navigateButtonClick(pageString:String):void
{
var pageIndex:uint=0;
switch(pageString)
{
case "firstPage":
pageIndex=firstPage;
break;
case "prePage":
pageIndex=prePage;
break;
case "nextPage":
pageIndex=nextPage;
break;
default:
//lastPage
pageIndex=lastPage;
}
refreshDataProvider(pageIndex);
}
/**
* 更新数据源,更新表格显示数据
*/
private function refreshDataProvider(pageIndex:uint,isCreateNavBar:Boolean=true,pageSize:uint=0,resultReturn:Boolean=false):void
{
//分页函数
if(dataGrid==null)
{
return;
}
currentPageIndex=pageIndex;
if(pageSize==0)
{
pageSize=this.pageSize;
}
else
{
this.pageSize=pageSize;
if(!resultReturn) totalPages = Math.ceil(orgData.length/pageSize);
}
if(!resultReturn)
{
if(this.pagingFunction!=null)
{
pagingFunction(pageIndex,pageSize);
this.isCreateNavBar=isCreateNavBar;
}
else
{
viewData = new ArrayCollection( orgData.source.slice((pageIndex * pageSize),(pageIndex * pageSize) + pageSize) );
dataGrid.dataProvider=viewData;
pageNumber.text=(pageIndex+1).toString();
totalRecordLabel.text = '总记录数:' + orgData.length.toString();
}
}
else
{
dataGrid.dataProvider=orgData;
totalPages = Math.ceil(totalRecord/pageSize);
pageNumber.text=(pageIndex+1).toString();
totalRecordLabel.text = '总记录数:' + totalRecord.toString()
}
totalPagesLabel.text = '总页数:' + totalPages;
if(isCreateNavBar) createNavBar(pageIndex);
}
/**
* 构建页码条
* pages:总页数
* pageIndex:当前页(注意,从0开始)
*
*/
private function createNavBar(pageIndex:uint = 0):void
{
nav.removeAll();
//向前图标操作,first,Pre
if( pageIndex > 1 )
{
firstPage=0;
firstNavBtn.visible=true;
var intLFive:int = pageIndex-navSize; // calculate start of last 5;
prePage=intLFive;
preNavBtn.visible=true;
}
else
{
firstNavBtn.visible=false;
preNavBtn.visible=false;
}
//页码条
for( var x:uint = 0; x < navSize; x++)
{
var pg:uint = x + pageIndex;
nav.addItem({label: pg + 1,data: pg});
//
var pgg:uint = pg+1;
if(pgg>=totalPages){ //搜索到最后一个页码,停止添加到navbar
x=navSize;
}
}
//计算最后一组页码条中第一个页码的页码编号
var lastpage:Number = 0;
for( var y:uint = navSize; y <= totalPages-1;y = y + navSize )
{
//lets calculate the lastpage button
if(y+5 > navSize)
{
lastpage = y;
}
}
//向后图标
if( pg < totalPages - 1 )
{
nextPage=pg + 1;
nextNavBtn.visible=true;
lastPage=lastpage;
lastNavBtn.visible=true;
}
else
{
nextNavBtn.visible=false;
lastNavBtn.visible=false;
}
}
/**
* 页码按钮按下(页码条点击)
*/
private function navigatePage(event:ItemClickEvent):void
{
refreshDataProvider(event.item.data,false);
}
/**
* 每页记录数变更(下拉框选择)
*/
private function pageSizeSelectChange():void
{
refreshDataProvider(0,true,uint(pageSizeComobox.value));
}
/**
* 页码变更(直接输入)
*/
private function pageIndexInsertChange(event:Event):void
{
var keyboardEvent:KeyboardEvent=event as KeyboardEvent;
if(keyboardEvent!=null&&keyboardEvent.keyCode== Keyboard.ENTER)
{
var pageIndex:uint=uint(pageNumber.text)-1;
if(pageIndex>0&&pageIndex<totalPages&&pageIndex!=currentPageIndex)
{
refreshDataProvider(pageIndex);
}
else
{
pageNumber.text = (currentPageIndex+1).toString();
}
}
}
/**
* 查看所有
*/
private function viewAll():void{
var tempTotalRecord:uint=0;
if(pagingFunction!=null) tempTotalRecord=totalRecord;
else tempTotalRecord=orgData.length;
//
pageSizeComobox.text=tempTotalRecord.toString();
pageSizeComobox.selectedIndex=-1;
refreshDataProvider(0,true,tempTotalRecord);
}
]]>
</mx:Script>
<mx:Label paddingTop="3" id="totalPagesLabel" text="" color="#FA1F02"/>
<mx:Label paddingTop="3" id="totalRecordLabel" text="" color="#FA0213"/>
<mx:Button id="firstNavBtn" label="F" width="20" height="20" click="navigateButtonClick('firstPage');" />
<mx:Button id="preNavBtn" label="pre" width="20" height="20" click="navigateButtonClick('prePage');"/>
<mx:LinkBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{nav}" height="26"/>
<mx:Button id="nextNavBtn" label="next" width="20" height="20" click="navigateButtonClick('nextPage');"/>
<mx:Button id="lastNavBtn" label="last" width="20" height="20" click="navigateButtonClick('lastPage');"/>
<mx:Label paddingTop="3" text="每页记录:"/>
<mx:ComboBox id="pageSizeComobox" cornerRadius="0" paddingLeft="0" fontWeight="normal" width="50" arrowButtonWidth="10" change="pageSizeSelectChange()"/>
<mx:Label paddingTop="3" text="页码:"/>
<mx:TextInput id="pageNumber" width="40" keyDown="pageIndexInsertChange(event);"/>
<mx:LinkButton id="viewAllLinkBtn" label="查看所有" click="viewAll();"/>
</mx:HBox>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white" fontSize="12" paddingTop="2">
<mx:Script>
<![CDATA[
import mx.events.ItemClickEvent;
import mx.collections.ArrayCollection;
import mx.controls.DataGrid;
private var firstPage:uint;
private var prePage:uint;
private var nextPage:uint;
private var lastPage:uint;
//是否已初始化
private var isInit:Boolean=true;
//分页条对应的Grid
public var dataGrid:DataGrid=null;
//默认起始页码,第1页
private var currentPageIndex:uint = 0;
//每页记录数
public var pageSize:uint = 10;
//总页数
private var totalPages:uint = 0;
//所有的数据
public var orgData:ArrayCollection=null;
//分页函数
public var pagingFunction:Function=null;
//是否重绘页码条,当使用服务端分页时使用
private var isCreateNavBar:Boolean = true;
//显示到Grid的数据
[Bindable]
public var viewData:ArrayCollection=null;
//记录总数,调用服务端发页时使用
public var totalRecord:int=0;
//页码条数据,绑定
[Bindable]
private var nav:ArrayCollection = new ArrayCollection();
// 页码条上显示页码的个数
public var navSize:uint = 3;
//每页记录数下拉框
public var pageSizeDropDownListData:ArrayCollection=null;
public function dataBind(isServerSide:Boolean=false):void
{
//是否初始化
if(isInit)
{
if(pageSizeDropDownListData==null)
{
pageSizeDropDownListData = new ArrayCollection();
pageSizeDropDownListData.addItem({label:5,data:5});
pageSizeDropDownListData.addItem({label:10,data:10});
pageSizeDropDownListData.addItem({label:20,data:20});
pageSizeDropDownListData.addItem({label:30,data:30});
}
pageSizeComobox.dataProvider=pageSizeDropDownListData;
pageSizeComobox.selectedIndex=1;
isInit=false;
}
refreshDataProvider(currentPageIndex,isCreateNavBar,pageSize,isServerSide);
}
/**
* 页码按钮按下,first,pre,next,last
*/
private function navigateButtonClick(pageString:String):void
{
var pageIndex:uint=0;
switch(pageString)
{
case "firstPage":
pageIndex=firstPage;
break;
case "prePage":
pageIndex=prePage;
break;
case "nextPage":
pageIndex=nextPage;
break;
default:
//lastPage
pageIndex=lastPage;
}
refreshDataProvider(pageIndex);
}
/**
* 更新数据源,更新表格显示数据
*/
private function refreshDataProvider(pageIndex:uint,isCreateNavBar:Boolean=true,pageSize:uint=0,resultReturn:Boolean=false):void
{
//分页函数
if(dataGrid==null)
{
return;
}
currentPageIndex=pageIndex;
if(pageSize==0)
{
pageSize=this.pageSize;
}
else
{
this.pageSize=pageSize;
if(!resultReturn) totalPages = Math.ceil(orgData.length/pageSize);
}
if(!resultReturn)
{
if(this.pagingFunction!=null)
{
pagingFunction(pageIndex,pageSize);
this.isCreateNavBar=isCreateNavBar;
}
else
{
viewData = new ArrayCollection( orgData.source.slice((pageIndex * pageSize),(pageIndex * pageSize) + pageSize) );
dataGrid.dataProvider=viewData;
pageNumber.text=(pageIndex+1).toString();
totalRecordLabel.text = '总记录数:' + orgData.length.toString();
}
}
else
{
dataGrid.dataProvider=orgData;
totalPages = Math.ceil(totalRecord/pageSize);
pageNumber.text=(pageIndex+1).toString();
totalRecordLabel.text = '总记录数:' + totalRecord.toString()
}
totalPagesLabel.text = '总页数:' + totalPages;
if(isCreateNavBar) createNavBar(pageIndex);
}
/**
* 构建页码条
* pages:总页数
* pageIndex:当前页(注意,从0开始)
*
*/
private function createNavBar(pageIndex:uint = 0):void
{
nav.removeAll();
//向前图标操作,first,Pre
if( pageIndex > 1 )
{
firstPage=0;
firstNavBtn.visible=true;
var intLFive:int = pageIndex-navSize; // calculate start of last 5;
prePage=intLFive;
preNavBtn.visible=true;
}
else
{
firstNavBtn.visible=false;
preNavBtn.visible=false;
}
//页码条
for( var x:uint = 0; x < navSize; x++)
{
var pg:uint = x + pageIndex;
nav.addItem({label: pg + 1,data: pg});
//
var pgg:uint = pg+1;
if(pgg>=totalPages){ //搜索到最后一个页码,停止添加到navbar
x=navSize;
}
}
//计算最后一组页码条中第一个页码的页码编号
var lastpage:Number = 0;
for( var y:uint = navSize; y <= totalPages-1;y = y + navSize )
{
//lets calculate the lastpage button
if(y+5 > navSize)
{
lastpage = y;
}
}
//向后图标
if( pg < totalPages - 1 )
{
nextPage=pg + 1;
nextNavBtn.visible=true;
lastPage=lastpage;
lastNavBtn.visible=true;
}
else
{
nextNavBtn.visible=false;
lastNavBtn.visible=false;
}
}
/**
* 页码按钮按下(页码条点击)
*/
private function navigatePage(event:ItemClickEvent):void
{
refreshDataProvider(event.item.data,false);
}
/**
* 每页记录数变更(下拉框选择)
*/
private function pageSizeSelectChange():void
{
refreshDataProvider(0,true,uint(pageSizeComobox.value));
}
/**
* 页码变更(直接输入)
*/
private function pageIndexInsertChange(event:Event):void
{
var keyboardEvent:KeyboardEvent=event as KeyboardEvent;
if(keyboardEvent!=null&&keyboardEvent.keyCode== Keyboard.ENTER)
{
var pageIndex:uint=uint(pageNumber.text)-1;
if(pageIndex>0&&pageIndex<totalPages&&pageIndex!=currentPageIndex)
{
refreshDataProvider(pageIndex);
}
else
{
pageNumber.text = (currentPageIndex+1).toString();
}
}
}
/**
* 查看所有
*/
private function viewAll():void{
var tempTotalRecord:uint=0;
if(pagingFunction!=null) tempTotalRecord=totalRecord;
else tempTotalRecord=orgData.length;
//
pageSizeComobox.text=tempTotalRecord.toString();
pageSizeComobox.selectedIndex=-1;
refreshDataProvider(0,true,tempTotalRecord);
}
]]>
</mx:Script>
<mx:Label paddingTop="3" id="totalPagesLabel" text="" color="#FA1F02"/>
<mx:Label paddingTop="3" id="totalRecordLabel" text="" color="#FA0213"/>
<mx:Button id="firstNavBtn" label="F" width="20" height="20" click="navigateButtonClick('firstPage');" />
<mx:Button id="preNavBtn" label="pre" width="20" height="20" click="navigateButtonClick('prePage');"/>
<mx:LinkBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{nav}" height="26"/>
<mx:Button id="nextNavBtn" label="next" width="20" height="20" click="navigateButtonClick('nextPage');"/>
<mx:Button id="lastNavBtn" label="last" width="20" height="20" click="navigateButtonClick('lastPage');"/>
<mx:Label paddingTop="3" text="每页记录:"/>
<mx:ComboBox id="pageSizeComobox" cornerRadius="0" paddingLeft="0" fontWeight="normal" width="50" arrowButtonWidth="10" change="pageSizeSelectChange()"/>
<mx:Label paddingTop="3" text="页码:"/>
<mx:TextInput id="pageNumber" width="40" keyDown="pageIndexInsertChange(event);"/>
<mx:LinkButton id="viewAllLinkBtn" label="查看所有" click="viewAll();"/>
</mx:HBox>