以下是我开发的Flex列表,该列表的分页参照了Kelvin的教程。以下是该列表的样式:
从这个列表的开发过程中感觉到了 Flex Component 的强大与方便!比如在这个列表中,分页列表作成了 Flex Component 组件,并自定义了双击事件(也可以增加自定义属性),可以被应用到不同的列表中,达到了组件共用的目的。以下是该分页条的代码:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" xmlns:local="*">
<!-- 这里定义的是列表上的双击事件 -->
<mx:Metadata>
[Event(name="dataGridDoubleClick", type="flash.events.Event")]
</mx:Metadata>
<mx:Script>
<![CDATA[
/*<SPAN class=hilite2>分页</SPAN>DataGrid
by Kelvin 2008-02-24
MSN:xiaobolove@hotmail.com
Email:xiaobolove334421@163.com
因为是一次取出全部数据,所以适合数据量不会太大的情况。
加了一个pageSize,用来控制每页显示的行数,可以在调用这个组件的时候为pageSize属性赋值,
默认为每页显示10行数据,不需要为DataGrid指定高度。
参考 古刹飞鹰@E鹰创作室 的文章
*/
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++;
}
}
}
//双击事件
private function dbClickEvent():void{
dispatchEvent(new Event("dataGridDoubleClick"));
}
]]>
</mx:Script>
<mx:VBox x="0" y="0" width="100%" height="100%" verticalGap="0" horizontalAlign="center" backgroundColor="white">
<mx:DataGrid id="dataGrid" width="98%" doubleClick="dbClickEvent()" doubleClickEnabled="true" dataProvider="{acPageData}" columns="{arrColumns}" rowCount="{pageSize}"/>
<mx:HBox cornerRadius="0" borderStyle="solid" horizontalAlign="left" verticalAlign="middle" width="98%">
<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}" cornerRadius="0"/>
<mx:LinkButton id="lbtnJump" label="跳转" click="loadData(nsPageNum.value-1)" enabled="{totalPage>1?true:false}" fontSize="12"/>
</mx:HBox>
</mx:VBox>
</mx:Canvas>
分享到:
相关推荐
Flex开发学习笔记4主要关注的是如何在Flex应用中实现分页列表组件,这对于构建大型数据展示界面至关重要。Flex是一个开源的、基于ActionScript的框架,用于创建富互联网应用程序(RIA)。在这里,我们不仅会探讨Flex...
安装了 Flex Builder 插件的Eclipse项目工程 博文链接:https://lib.iteye.com/blog/203060
3. `flex-sdk`引用:确认库项目是如何链接到Flex SDK的,可能是通过环境变量或IDE的配置。 4. `build.xml`:Ant构建文件,用于手动编译项目,提供了编译、清理等任务。 通过研究这个实例,开发者可以更好地理解如何...
Flex开发学习笔记6.1主要聚焦于创建Flex Library Project,这是一种在Adobe Flex开发环境中构建可重用组件的方式。Flex Library Project允许开发者创建自定义组件,这些组件可以被多个应用程序共享,提高了代码复用...
非常好DEMO参考,这个项目已经转到Apache名下了,最新的版本1.2,308个例子,已经全站打包,搜索:flex-tour-de-flex-component-explorer-1.2-308demo。开源代码http://flex.apache.org/download-tourdeflex.html
非常好DEMO参考,这个项目已经转到Apache名下了,最新的版本1.2,308个例子,已经全站打包,搜索:flex-tour-de-flex-component-explorer-1.2-308demo。开源代码http://flex.apache.org/download-tourdeflex.html
Flex 3 是该框架的一个版本,提供了丰富的组件库、数据绑定以及ActionScript 3.0支持,使得开发人员可以构建具有高度用户体验的前端应用。 2. **BlazeDS**: BlazeDS 是 Adobe 提供的一个开源项目,它允许 Flex ...
在这个“flex------组件-----数据可视化”主题中,我们将探讨Flex如何帮助开发者创建交互式的数据图表和可视化效果。 Flex框架提供了一套强大的组件库,其中包括用于数据可视化的类和库。这些组件使得开发人员能够...
Flex分页组件是一种在Flex应用程序中用于展示大量数据并分批加载的重要工具。它通过将大量数据分成小块,每次只加载一部分,提高了用户界面的响应速度和用户体验。本组件适用于那些需要显示大量数据,如表格、列表...
博文《flex企业应用开发笔记-数据绑定》可能详细解释了以下几点: 1. **单向数据绑定**:这是最基本的绑定形式,从数据源到UI组件。例如,当数据模型的某个属性改变时,与之绑定的UI元素会自动更新。 2. **双向...
**标题解析:** "FLEX资源--------Pure...综上所述,"FLEX资源--------PureMVC开发包下载"提供的内容是一个用于Flex开发的开源MVC框架,其源码可以用于学习和定制,配合相关教程和工具,有助于提升开发效率和代码质量。
使用Flex开发Adobe AIR程序--桌面快捷方式管理器,适合新手进一步熟悉api,遇到典型的问题,1)调用外部exe文件,2)打包,3)读写文件,路径问题,...