<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" xmlns:local="*">
<mx:Script>
<![CDATA[
/*
因为是一次取出全部数据,所以适合数据量不会太大的情况。
加了一个pageSize,用来控制每页显示的行数,可以在调用这个组件的时候为pageSize属性赋值,
默认为每页显示10行数据,不需要为DataGrid指定高度。
*/
import mx.collections.ArrayCollection;
[Bindable]public var pageSize:int=10;//每页显示行数
[Bindable]private var totalPage:int=0;//总页数
[Bindable]private var currentPage:int=0;//当前页
[Bindable]
public var acAllData:ArrayCollection;//所有数据
[Bindable]
private var acPageData:ArrayCollection=new ArrayCollection();//当前页数据
[Bindable]
public var arrColumns:Array;//DataGrid列,在调用时需要为这个数组设置数据
//初始化
public function init(value:ArrayCollection):void{
acAllData=value;
if(acAllData.length!=0 && acAllData!=null){
totalPage=Math.ceil(acAllData.length/pageSize);
loadData(0);
}else{
currentPage=0;
totalPage=0;
}
}
//加载数据
private function loadData(pageNum:int):void {
if(pageNum>=0 && pageNum<totalPage){
acPageData.removeAll();
currentPage=pageNum;//重新为当前页的变量赋值
var startIndex:int=pageNum*pageSize;//计算起始索引
for(var i:int=0;i<pageSize && startIndex<acAllData.length;i++){
acPageData.addItem(acAllData[startIndex]);
startIndex++;
}
}
}
]]>
</mx:Script>
<mx:VBox x="0" y="0" width="100%" height="100%" verticalGap="0" horizontalAlign="center" backgroundColor="white">
<mx:DataGrid id="customgrid" width="100%" dataProvider="{acPageData}" columns="{arrColumns}" rowCount="{pageSize}"/>
<mx:HBox cornerRadius="12" borderStyle="solid" horizontalAlign="center" verticalAlign="middle">
<mx:Text text="{' 第'+(totalPage>0?(currentPage+1):0)+'页/共'+totalPage+'页'+' 共'+(acAllData!=null?acAllData.length:0)+'条记录'}" fontSize="12"/>
<mx:LinkButton id="lbtnFirst" label="首页" click="loadData(0)" enabled="{lbtnPrevious.enabled}" fontSize="12"/>
<mx:LinkButton id="lbtnPrevious" label="上一页" click="loadData(currentPage-1)" enabled="{currentPage!=0?true:false}" fontSize="12"/>
<mx:LinkButton id="lbtnNext" label="下一页" click="loadData(currentPage+1)" enabled="{totalPage>(currentPage+1)?true:false}" fontSize="12"/>
<mx:LinkButton id="lbtnLast" label="尾页" click="loadData(totalPage-1)" enabled="{lbtnNext.enabled}" fontSize="12"/>
<mx:NumericStepper id="nsPageNum" stepSize="1" minimum="1" maximum="{totalPage}" enabled="{lbtnJump.enabled}"/>
<mx:LinkButton id="lbtnJump" label="跳转" click="loadData(nsPageNum.value-1)" enabled="{totalPage>1?true:false}" fontSize="12"/>
</mx:HBox>
</mx:VBox>
</mx:Canvas>
调用test.xml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*" creationComplete="creationComplete()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var ac:ArrayCollection;
private function creationComplete():void{
loadAcData();
}
//如果查询出来的数据为xml格式,调用这个方法
private function loadXmlData(xml:XML):void{
ac=new ArrayCollection();
for each(var item:Object in xml.Table){ //将Table换成XML中的根元素名称
ac.addItem(item);
}
dg.init(ac);
}
//查询出来的结果为数组,直接传递给init即可
private function loadAcData():void{
ac=new ArrayCollection();
//测试数据
for(var i:int=0;i<35;i++){
var obj:Object=new Object();
obj.photo_id=i.toString();
obj.photo_name="photo"+i;
ac.addItem(obj);
}
dg.init(ac);
}
]]>
</mx:Script>
<!--设置pageSize为8,表示每页显示8条记录,不设置默认显示10条记录-->
<local:kelvin_DataGrid id="dg" width="495" height="300" pageSize="8" x="124" y="24">
<local:arrColumns><!--为这个标签设置DataGridColumn,指示在DataGrid上显示的列-->
<mx:DataGridColumn headerText="id" dataField="photo_id"/>
<mx:DataGridColumn headerText="name" dataField="photo_name"/>
</local:arrColumns>
</local:kelvin_DataGrid>
</mx:Application>
分享到:
相关推荐
flex分页 很好很强大 简单引用 很方便
FLex 分页,flex编程,将datagrid 实现数据显示
Flex开发 Flex dataGrid分页技术
自己写的flex 分页控件,使用简单,有源码和使用实例。
这是我自己写的一个flex组件,使用简单,在使用的时候,只需要在页面载入里,新建组件对象就OK,另外还有一个方法监听控件返回的的页数,可以实现分面。flex会生成linkButton,并且可以按需要控件显示的数量。如有不...
很通用的Flex 分页组件,经过本人测试,可以应用到项目中,很方便
flex中的datagrid是一个重量级的组建,也是数据绑定中的主要组件之一。
Flex分页控件源码,实现最新最炫的web开发分页设计
NULL 博文链接:https://zjkilly.iteye.com/blog/868338
FLEX4 分页工程,抽取为工具类,分页显示记录,并可以从界面上设置每页显示多少条,默认每页显示5条,可以在每页/条的文本框中输入想要显示的条数,比如10条。然后翻页,每页即可显示10条进行翻页了。
FLEX 分页控件 可以跳转 上一页 下一页 首页 尾页
用于flex程序开发的控件,该控件适用于,少数据量的系统。
重写的Flex分页组件,改进了一些BUG,原版的源码丢了,又重写了一个,所以没有版本之分 recordCount//记录总数,程序对该属性赋值生成分页 currentPageIndex//当前页 pageSize//每页记录数 buttonConut//显示的...
flex 分页 whaosoft www.143zh.com
NULL 博文链接:https://kisscjy.iteye.com/blog/569602
FLEX DATA GRID 分页的代码,上传上来给大家参考参考
NULL 博文链接:https://jadeluo.iteye.com/blog/1129410
Paging 是Flex做的客户端分页控件 PagingService是Java做的WebService服务端,用来模拟服务端返回数据。 服务端需要部署到类似tomcat这样的服务器中运行 服务端返回XML格式的数据,主要用了XStream这个jar, 它...
资源是不错滴,可以认真的看看哦,大家互相学习一下,有更好的资源请上传……
这个分页只与后台交互一次,然后将获得的集合在前台进行分页显示。