分页组件:Page.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" >
<mx:Script>
<![CDATA[
/**//*
自定义datagrid控件元素
总共的页数
当前页面的页码
所有的记录数
当前也的记录
没有翻页的记录
*/
import mx.collections.ArrayCollection;
import mx.controls.Alert;
[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 initdata(value:ArrayCollection):void
{
mydata = value;//将所有数据都赋值给mydata变量
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;//value不能大于等于totalpage
Alert.show(value+"页");
curpage = value;
var curNum:int = value*pagecount;//计算出要跳转到的页面种的第一条记录在所有的记录种是第几条记录
mypagedata.removeAll();//移出变量中的数据,以便插入新数据,页面中显示的是这个变量中的数据
for(var i:int=0;curNum<mydata.length&&i<pagecount;i++,curNum++)
//循环的次数既要小于所有的记录数,也要小于每个页面能显示的记录数;并且curNum变量中的值也要增加
{
mypagedata.addItem(mydata.getItemAt(curNum));//依次抽取记录
}
var temp:int = curpage+1;//页码中第一张页面是0,也就是说实际显示的页码是+1后的值
pagedetail.text = "第"+temp+"页/共"+totalpage+"页 共条"+totalcount+"记录";
}
]]>
</mx:Script>
<mx:DataGrid id="cudg" dataProvider="{mypagedata}"
columns="{mygridcolumns}" width="100%" height="100%">
</mx:DataGrid>
<mx:HBox width="100%" horizontalAlign="left" verticalAlign="middle">
<mx:Spacer width="100%" height="1"></mx:Spacer>
<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" cornerRadius="0" change="setPager(inputpage.value-1)" />
<mx:LinkButton label="跳转" click="setPager(inputpage.value-1)"/>
</mx:HBox>
</mx:VBox>
测试:TestPage.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:nsl="*" creationComplete="init()">//此处声明导入Page组件即Page.mxml文件
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
public var items:ArrayCollection;
private function init():void
{
items = new ArrayCollection();
for(var i:int =1;i<16;i++)
{
var obj:Object = new Object();
obj.loginaccount = "andy";
obj.name = "Andy";
obj.loginaccount += i;
obj.name += i;
items.addItem(obj);
}
mydg.initdata(items);
}
]]>
</mx:Script>
<mx:Panel id="panel1" title="MyDataGrid" x="255" y="52">
<nsl:Page width="100%" height="100%" id="mydg" pagecount="5">
<nsl:mygridcolumns>
<mx:DataGridColumn headerText="登录名" dataField="loginaccount" width="200"/>
<mx:DataGridColumn headerText="姓名" dataField="name" width="200"/>
</nsl:mygridcolumns>
</nsl:Page>
</mx:Panel>
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" >
<mx:Script>
<![CDATA[
/**//*
自定义datagrid控件元素
总共的页数
当前页面的页码
所有的记录数
当前也的记录
没有翻页的记录
*/
import mx.collections.ArrayCollection;
import mx.controls.Alert;
[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 initdata(value:ArrayCollection):void
{
mydata = value;//将所有数据都赋值给mydata变量
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;//value不能大于等于totalpage
Alert.show(value+"页");
curpage = value;
var curNum:int = value*pagecount;//计算出要跳转到的页面种的第一条记录在所有的记录种是第几条记录
mypagedata.removeAll();//移出变量中的数据,以便插入新数据,页面中显示的是这个变量中的数据
for(var i:int=0;curNum<mydata.length&&i<pagecount;i++,curNum++)
//循环的次数既要小于所有的记录数,也要小于每个页面能显示的记录数;并且curNum变量中的值也要增加
{
mypagedata.addItem(mydata.getItemAt(curNum));//依次抽取记录
}
var temp:int = curpage+1;//页码中第一张页面是0,也就是说实际显示的页码是+1后的值
pagedetail.text = "第"+temp+"页/共"+totalpage+"页 共条"+totalcount+"记录";
}
]]>
</mx:Script>
<mx:DataGrid id="cudg" dataProvider="{mypagedata}"
columns="{mygridcolumns}" width="100%" height="100%">
</mx:DataGrid>
<mx:HBox width="100%" horizontalAlign="left" verticalAlign="middle">
<mx:Spacer width="100%" height="1"></mx:Spacer>
<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" cornerRadius="0" change="setPager(inputpage.value-1)" />
<mx:LinkButton label="跳转" click="setPager(inputpage.value-1)"/>
</mx:HBox>
</mx:VBox>
测试:TestPage.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:nsl="*" creationComplete="init()">//此处声明导入Page组件即Page.mxml文件
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
public var items:ArrayCollection;
private function init():void
{
items = new ArrayCollection();
for(var i:int =1;i<16;i++)
{
var obj:Object = new Object();
obj.loginaccount = "andy";
obj.name = "Andy";
obj.loginaccount += i;
obj.name += i;
items.addItem(obj);
}
mydg.initdata(items);
}
]]>
</mx:Script>
<mx:Panel id="panel1" title="MyDataGrid" x="255" y="52">
<nsl:Page width="100%" height="100%" id="mydg" pagecount="5">
<nsl:mygridcolumns>
<mx:DataGridColumn headerText="登录名" dataField="loginaccount" width="200"/>
<mx:DataGridColumn headerText="姓名" dataField="name" width="200"/>
</nsl:mygridcolumns>
</nsl:Page>
</mx:Panel>
</mx:Application>