自定义组件
kelvin_DataGrid .mxml
<?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中的datagrid是一个重量级的组建,也是数据绑定中的主要组件之一。
这是我自己开发的一个dataGrid分页的控件,上传的资源是一个打成包的flex项目,这个控件在查询数据时是与后台进行实时交互的,表格的表头样式是重写皮肤类进行定义的,而隔行变色是通过css来实现的。其中最重要的...
flex datagrid pagination, flex分页组件
一个flex datagrid分页的例子
这是我自己开发的一个dataGrid分页的控件,上传的资源是一个打成包的flex项目,这个控件在查询数据时是与后台进行实时交互的,表格的表头样式是重写皮肤类进行定义的,而隔行变色是通过css来实现的。其中最重要的...
flex as3.0写的关于DataGrid的分页功能,拿出来分享一下!
flex 通过读取xml文件 实现动态DataGrid数据列表
WPF MVVM DataGrid分页案例 运用数据绑定 Command 可作为MVVM学习使用
flex中dataGrid导出数据到excel中,不存在乱码问题
重新封装DataGrid,用于分页。 根据Page改变事件重新读取数据(每次分页重新读取指定条数的数据显示)...... 适用于数据量多大时分页。
使用ssh2框架搭建的基于Maven的小程序,实现了使用jQuery的datagrid控件实现的基于Ajax的datagrid分页功能。
一个功能齐全的DataGrid分页例子一个功能齐全的DataGrid分页例子
Flex DataGrid从XML文件中加载数据
flex datagrid组件的分页技术,根据自己情况稍加修改就行了,这也是本人网上搜集,希望对大家有帮助吧
DataGrid绑定数据分页出错DataGrid绑定数据分页出错
一个功能齐全的DataGrid分页例子一个功能齐全的DataGrid分页例子一个功能齐全的DataGrid分页例子
WPF的DataGrid分页的功能,找了很久网上的资料,做了许久最后做出了一个公共的用户控件,让大家调用,分享一下。 供参考,希望有问题可以评论一下,告诉我互相学习
wpf、C#