`

flex分页控件的使用

    博客分类:
  • Flex
阅读更多
分页显示数据是网站浏览中必备的元素之一,在FLEX中通过数据分页的方法来获取当前显示数据,即能降低网络传的负担同时也能减少Flex的处理工作。
分页控件需要的功能有:首页,上一页,下一页,未页和页数跳转等。
http://sz.photo.store.qq.com/rurl2=88917bc76e79eaf6b597d644e7c11011d117522125322699e7b4dd2f7622c712f6c075fa047a7ba3b9ee99935355b4ef4d749c40f4f2dccc5d84a42be87b0f0439d4791703bd22af5ed2e2693b2a9c8bf6ba76b3
[img]
http://sz.photo.store.qq.com/rurl2=c1d51b934ca020f6f1dbf92c8e78f93d7c38e56269390beeb982b1d7cc654912d9493e152f74922b4c009c3eace05432a6404f866d78bfd828a6ad53f60ce03f106f22896a02c9afbfc4d4746e2b23828f8650bf
[/img]
定义分页控件的事件:PageChange

相关事件参数对象:
package 
{ 
import flash.events.Event; 
import mx.events.IndexChangedEvent; 
public class PageChangeEvent extends flash.events.Event 
{ 
public function PageChangeEvent(pageindex:int,pagesize:int) 
{ 
super("PageChange"); 
PageIndex= pageindex; 
PageSize =pagesize; 
} 
public var PageIndex:int=0; 
public var PageSize:int=0; 
public function Filter(list:Array):Array 
{ 
var newlist:Array = new Array(); 
var start:int = PageSize*PageIndex; 
var end:int = start+PageSize; 
for(var i:int = start;i<end;i++) 
{ 
if(i< list.length) 
{ 
newlist.push(list[i]); 
} 
else 
break; 
} 
return newlist; 
} 
} 
} 

分页控件的代码:
<?xml version="1.0" encoding="utf-8"?> 
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="466" height="40"> 
<mx:Metadata> 
[Event(name="PageChange", type="PageChangeEvent",bubbles="true",cancelable="true")] 
</mx:Metadata> 
<mx:Button click="method_le()" id="c_le" enabled="false" x="10" y="10" fontFamily="" width="24" height="24" minWidth="24" minHeight="24"> 
<mx:icon>@Embed('LE.gif')</mx:icon> 
</mx:Button> 
<mx:Button click="method_l()" id="c_l" enabled="false" x="42" y="10" fontFamily="" width="24" height="24" minWidth="24" minHeight="24"> 
<mx:icon>@Embed('L.gif')</mx:icon> 
</mx:Button> 
<mx:ComboBox 
rowCount="10" change="method_select()" id="c_select" enabled="false" 
x="74" y="10" width="54"></mx:ComboBox> 
<mx:Button click="method_r()" id="c_r" enabled="false" x="136" y="10" fontFamily="" width="24" height="24" minWidth="24" minHeight="24"> 
<mx:icon>@Embed('R.gif')</mx:icon> 
</mx:Button> 
<mx:Button click="method_re()" id="c_re" enabled="false" x="168" y="10" fontFamily="" width="24" height="24" minWidth="24" minHeight="24"> 
<mx:icon>@Embed('RE.gif')</mx:icon> 
</mx:Button> 
<mx:Script> 
<![CDATA[ 
import mx.controls.Alert; 
private var mRecordCount:int=0; 
private var mPageSize:int =20; 
private var mPageIndex:int =0; 
private var mPageCount:int = 0; 
public function method_l():void 
{ 
mPageIndex=mPageIndex-1; 
SetState(); 
OnPageChange(); 
} 
public function method_le():void 
{ 
mPageIndex =0; 
SetState(); 
OnPageChange(); 
} 
public function method_r():void 
{ 
mPageIndex=mPageIndex+1; 
SetState(); 
OnPageChange(); 
} 
public function method_re():void 
{ 
mPageIndex=mPageCount-1; 
SetState(); 
OnPageChange(); 
} 
public function method_select():void 
{ 
mPageIndex = c_select.selectedItem.data; 
SetState(); 
OnPageChange(); 
} 
public function get PageIndex():int 
{ 
return mPageIndex; 
} 
//设置记录总数 
public function set RecordCount(count:int):void 
{ 
mRecordCount= count; 
if(count >0) 
{ 
SetState(); 
} 
} 
private function SetState():void 
{ 
if(mRecordCount%mPageSize > 0) 
{ 
mPageCount = mRecordCount/mPageSize+1; 
} 
else 
{ 
mPageCount = mRecordCount/mPageSize; 
} 
var pages:Array = new Array(); 
for(var i:int =1;i<=mPageCount;i++) 
{ 
pages.push( {label:i.toString(), data:i-1}); 
} 
c_select.dataProvider= pages; 
c_select.selectedIndex= mPageIndex; 
if(mPageCount>1) 
{ 
c_select.enabled=true; 
c_l.enabled=true; 
c_le.enabled=true; 
c_r.enabled=true; 
c_re.enabled=true; 
if(mPageIndex==0) 
{ 
c_l.enabled=false; 
c_le.enabled=false; 
} 
if(mPageIndex == mPageCount-1) 
{ 
c_r.enabled=false; 
c_re.enabled=false; 
} 
} 
else 
{ 
c_select.enabled=false; 
c_l.enabled=false; 
c_le.enabled=false; 
c_r.enabled=false; 
c_re.enabled=false; 
} 
pageinfo.text="Records:" + mRecordCount+"/" + mPageCount+"pages"; 
} 
//获取记录总数 
public function get RecordCount():int 
{ 
return mRecordCount; 
} 
//打开分页控件 
public function Open():void{ 
mPageIndex =0; 
OnPageChange(); 
} 
//刷新当前页面 
public function Refresh():void 
{ 
OnPageChange(); 
} 
private function OnPageChange():void 
{ 
var e:PageChangeEvent = new PageChangeEvent(mPageIndex, 
mPageSize); 
dispatchEvent(e); 
} 
]]> 
</mx:Script> 
<mx:Label x="200" y="10" width="175" fontSize="12" id="pageinfo"/> 
</mx:Canvas> 
用例页面代码: 


<?xml version="1.0" encoding="utf-8"?> 
<mx:Application initialize="oninit()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:ns1="Units.*" xmlns:ns2="*"> 
<mx:Script> 
<![CDATA[ 
import mx.controls.Alert; 
import flash.events.Event; 
import Units.*; 
private var datas:Array = new Array(); 
function oninit():void 
{ 
for(var i:int=0;i<1110;i++) 
{ 
datas.push({UserName:"Henry"+i,Notes:" GuangZhou " +i}) 
} 
pagebar1.RecordCount =datas.length; 
pagebar1.Open(); 
} 
function pagechange(e:PageChangeEvent):void 
{ 
datalist.dataProvider = e.Filter(datas) 
} 
]]> 
</mx:Script> 
<mx:DataGrid width="100%" id="datalist"> 
<mx:columns> 
<mx:DataGridColumn headerText="UserName" dataField="UserName"/> 
<mx:DataGridColumn headerText="Notes" dataField="Notes"/> 
</mx:columns> 
</mx:DataGrid> 
<ns2:PageBar id="pagebar1" PageChange="pagechange(event)"> 
</ns2:PageBar> 
</mx:Application> 

分享到:
评论
1 楼 nature1 2009-05-20  
很实用啊,谢谢

相关推荐

    flex 分页控件

    综上所述,创建一个自定义的Flex分页控件涉及到组件设计、事件处理、数据绑定、皮肤化等多个方面。通过深入理解和实践这些知识点,开发者可以构建出功能强大、易于使用的分页工具,提升应用的用户体验。提供的文件...

    Flex分页控件源码

    Flex分页控件是基于Adobe Flex技术开发的一种用户界面组件,用于在大量数据展示时提供高效、便捷的浏览体验。Flex是一种开源的富互联网应用程序(RIA)框架,它使用ActionScript编程语言和MXML标记语言,允许开发者...

    flex 分页控件,我自己写的flex分页控件

    这是我自己写的一个flex组件,使用简单,在使用的时候,只需要在页面载入里,新建组件对象就OK,另外还有一个方法监听控件返回的的页数,可以实现分面。flex会生成linkButton,并且可以按需要控件显示的数量。如有不...

    Flex 分页控件组件

    标题"Flex分页控件组件"暗示了这个压缩包可能包含一个预封装好的分页组件,可能是一个自定义的Flex组件或者一个第三方库,比如mx.controls.Paginator类。这个组件通常会提供基本的分页功能,如页码显示、跳转至指定...

    FLEX 分页控件 可以跳转 上一页 下一页

    FLEX 分页控件 可以跳转 上一页 下一页 首页 尾页

    flex通用分页控件

    开发者可以下载这个项目,研究其源码,了解如何实现一个通用的Flex分页控件,或者直接将其集成到自己的项目中使用。 总结起来,Flex通用分页控件是Flex应用中必不可少的一部分,它提供了高效的数据浏览方式,同时...

    FlexPagingBar Flex分页控件

    Paging 是Flex做的客户端分页控件 PagingService是Java做的WebService服务端,用来模拟服务端返回数据。 服务端需要部署到类似tomcat这样的服务器中运行 服务端返回XML格式的数据,主要用了XStream这个jar, 它...

    Flex 分页控件一次加载数据类型

    在给定的标题“Flex分页控件一次加载数据类型”中,我们关注的是一个特定的Flex控件,即用于分页显示数据的组件。 分页控件在处理大量数据时尤为重要,因为它允许用户逐步浏览内容,而不是一次性加载所有数据,从而...

    flex分页 很好很强大

    Flex分页是一种在Web开发中实现页面数据分块显示的技术,尤其在大数据量展示时,它能有效地提高用户体验,减少页面加载时间,并提供流畅的滚动交互。标题“flex分页 很好很强大”和描述“简单引用 很方便”暗示了...

    flex 分页控件,通过事件处理

    在Flex中,分页控件是一种常见的组件,它允许用户在大量数据中进行导航,一次显示一部分内容,提高用户体验。本篇将详细介绍如何在Flex中创建和管理分页控件,并通过事件处理来实现其功能。 首先,我们要了解Flex中...

    Flex 分页控件Pager

    用法类似.net下的AspNetPager 指定recordCount:int 刚学flex的时候写的,凑合着能用了。电脑挂过一次,源代码搞丢了,新手可以拿去用用,老鸟们半小时自己就可以搞定一个了

    使用Flex开发DataGrid分页控件应用支持客户端及服务端

    总之,使用Flex开发DataGrid分页控件,无论是客户端还是服务端,都需要理解数据加载、分页逻辑和用户交互的基本原理。通过合理的组件布局、事件处理和数据绑定,可以实现高效、易用的分页功能。无论使用哪种编程语言...

    flex datagrid 分页控件源码

    下面将详细讲解Flex DataGrid的分页控件源码及其实现原理。 1. **Flex DataGrid基础** Flex DataGrid是Flex SDK中的一个组件,用于显示表格形式的数据。它可以处理各种数据源,如ArrayCollection、...

    flex 分页

    "Flex分页"指的是使用Adobe Flex框架实现数据的分页显示。Flex是一个开源的、基于ActionScript的开发框架,用于构建富互联网应用(RIA)。在这个场景下,我们将深入探讨Flex中的分页实现以及相关知识点。 首先,...

    flex3.2分页控件以及通过flexlib自定义Accordion

    Flex本身并不直接提供内置的分页控件,但可以通过自定义组件或者使用第三方库来实现。例如,我们可以利用Spark或MX组件集中的Button、NumericStepper等基础组件,结合ActionScript编程来创建一个自定义的分页系统。 ...

    flex客户端和服务端分页控件,后台java

    flex客户端和服务端分页控件,后台使用java实现数据的传送,flex客户端调用服务端的webservices服务进行数据的展现~~ 内附myeclipse项目和flex项目·~ 分别导入可运行,注意端口的修改~

    flex dataGrid 分页控件

    这是我自己开发的一个dataGrid分页的控件,上传的资源是一个打成包的flex项目,这个控件在查询数据时是与后台进行实时交互的,表格的表头样式是重写皮肤类进行定义的,而隔行变色是通过css来实现的。其中最重要的...

    flex分页控件

    flex4下使用的分页控件,含有上一页,下一页和页码,可以通过滑动选择每页记录数

    Flex分页显示实例

    使用Flex的布局管理器,我们可以确保分页控件在不同分辨率和屏幕方向下都能正常工作。 8. **测试与调试**:最后,对分页功能进行充分的测试,确保在各种情况下都能正确显示数据并进行翻页操作。使用Flex的内置调试...

Global site tag (gtag.js) - Google Analytics