页面代码(FlexPager.mxml):
<?xml version="1.0" encoding="utf-8"?>
<mx:ControlBar xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%"
height="40"
horizontalAlign="right"
paddingRight="20"
initialize="setState(false)"
verticalAlign="middle">
<mx:Script source="FlexPager_script.as"/>
<mx:Metadata>
[Event(name="pageChange")]
</mx:Metadata>
<mx:StringValidator id="jumpPage_validator"
source="{jumpPage_input}"
required="true"
requiredFieldError="请输入跳转页码"
property="text"
enabled="false"/>
<mx:Button click="firstPage()"
id="firstBtn"
label="首页"/>
<mx:Button click="prevPage()"
id="prevBtn"
label="上一页"/>
<mx:Button click="nextPage()"
id="nextBtn"
label="下一页"/>
<mx:Button click="lastPage()"
id="lastBtn"
label="末页"/>
<mx:Label text="跳至:"/>
<mx:TextInput id="jumpPage_input"
width="60"
maxChars="8"
restrict="[0-9]"/>
<mx:Label text="页"/>
<mx:Button click="jumpPage();"
id="jumpBtn"
label="GO"/>
<mx:Label id="pageInfo"/>
</mx:ControlBar>
AS代码(FlexPager_script.as):
import mx.events.IndexChangedEvent;
import mx.validators.Validator;
import cn.zlj.event.MyEvent;
//总页数
private var _pageCount:int=0;
//总记录数
private var _recordCount:int=0;
//每页记录数
private var _pageSize:int=10;
//起始页的索引
private var _pageIndex:int=0;
//起始记录的索引
public function get startIndex():int
{
return ((_pageIndex < 1 ? 1 : _pageIndex) - 1) * this.pageSize;
}
//设置记录总数
public function set recordCount(value:int):void
{
//设置记录的总数
if (value <= 0)
{
_recordCount=0;
_pageIndex=0;
_pageCount=0;
}
else
{
_recordCount=value;
_pageIndex=1;
_pageCount=Math.ceil(_recordCount / _pageSize) <= 0 ? 1 : Math.ceil(_recordCount / _pageSize);
}
setState(false);
}
//每页记录数:最少5条
public function set pageSize(value:int):void
{
if (value < 5)
{
value=5;
}
_pageSize=value;
}
public function get pageSize():int
{
return _pageSize;
}
//上一页
public function prevPage():void
{
_pageIndex-=1;
setState();
}
//第一页
public function firstPage():void
{
_pageIndex=1;
setState();
}
//下一页
public function nextPage():void
{
_pageIndex+=1;
setState();
}
//最终页
public function lastPage():void
{
_pageIndex=_pageCount;
setState();
}
//跳转
public function jumpPage():void
{
jumpPage_validator.enabled=true;
var validators:Array=new Array();
validators.push(jumpPage_validator);
if (Validator.validateAll(validators).length > 0)
{
return;
}
//获取输入跳转页的值
var __pageIndex:Number=Number(jumpPage_input.text);
if (__pageIndex < 1)
{
__pageIndex=1;
}
else if (__pageIndex > _pageCount)
{
__pageIndex=_pageCount;
}
_pageIndex=__pageIndex;
jumpPage_validator.enabled=false;
jumpPage_input.text="";
setState();
}
//各个按钮的状态
private function setState(dispatchEvent:Boolean=true):void
{
if (_pageCount > 1)
{
firstBtn.enabled=true;
nextBtn.enabled=true;
prevBtn.enabled=true;
lastBtn.enabled=true;
jumpBtn.enabled=true;
if (_pageIndex <= 1)
{
prevBtn.enabled=false;
firstBtn.enabled=false;
}
if (_pageIndex == _pageCount)
{
nextBtn.enabled=false;
lastBtn.enabled=false;
}
}
else
{
firstBtn.enabled=false;
nextBtn.enabled=false;
prevBtn.enabled=false;
lastBtn.enabled=false;
jumpBtn.enabled=false;
}
//页码,总启示录数显示 形式:共 53977 条 第 1/2999 页
pageInfo.text="共" + _recordCount.toString() + "条 第" + _pageIndex.toString() + "/" + _pageCount.toString() + "页";
if (dispatchEvent)
{
onPageChange();
}
}
//翻页
private function onPageChange():void
{
//依据当前页面索引和每页记录数来构造一个“页面改变事件”
var eventData:Object=new Object();
eventData.rowFrom=startIndex;
eventData.pageSize=_pageSize;
var e:ExpotiaEvent=new MyEvent(MyEvent.PAGE_CHANGED, eventData);
dispatchEvent(e);
}
//刷新当前页
public function refresh():void
{
onPageChange();
}
上边用到的自定义事件MyEvent.as文件
package cn.zlj.event
{
import flash.events.Event;
public class MyEventextends Event
{
//通过事件发送的数据
public var eventData:Object;
public function MyEvent(type:String, eventData:Object=null, bubbles:Boolean=false, cancelable:Boolean=false)
{
this.eventData=eventData;
super(type, bubbles, cancelable);
}
//翻页事件
public static const PAGE_CHANGED:String="pageChange";
}
}
使用方法页面代码:
<mx:DataGrid id="dg1">
<mx:columns>
<mx:DataGridColumn headerText="ID"
dataField="id"/>
<mx:DataGridColumn headerText="名字"
dataField="name"/>
</mx:columns>
</mx:DataGrid>
<component:FlexPager width="100%"
id="pager"
pageSize="15"/>
页面逻辑代码:
//查询
public function query():void
{
if (_queryCondition == null)
{
return;
}
_pager.enabled=false;
queryCountMethod.queryCount(_queryCondition);
}
//处理查询记录数返回的结果
private function countResultHandler(event:ResultEvent):void
{
var count:int=int(event.result);
pager.recordCount=count;
if (count > 0)
{
//查询member数据
queryList(_pager.pageSize, 0);
}
else
{
var dgProvider:ArrayCollection=ArrayCollection(_dg.dataProvider);
//清空数据
if (dgProvider != null)
{
(dg1.dataProvider as ArrayCollection).removeAll();
}
}
}
//查询列表
public function queryList(pageSize:int, rowFrom:int):void
{
//翻页skipRows
_queryCondition.skipRows=rowFrom;
//一页最大记录数
_queryCondition.rowRecords=pageSize;
pager.enabled=false;
//调用后台查询
queryListMethod.queryList(_queryCondition);
}
//翻页处理
private function pageChangedHandler(event:MyEvent):void
{
if(_queryCondition == null) {
return;
}
var rowFrom:int=event.eventData.rowFrom
var pageSize:int=event.eventData.pageSize
queryList(pageSize, rowFrom);
}
分享到:
相关推荐
在Flex中,分页控件是常见的用户界面元素,特别是在处理大量数据时,它可以帮助用户逐页浏览内容,提高用户体验。本篇文章将详细介绍如何在Flex中创建自定义的分页控件及其相关知识点。 首先,我们要理解Flex的组件...
Flex分页控件是基于Adobe Flex技术开发的一种用户界面组件,用于在大量数据展示时提供高效、便捷的浏览体验。Flex是一种开源的富互联网应用程序(RIA)框架,它使用ActionScript编程语言和MXML标记语言,允许开发者...
在Flex应用中,分页控件是必不可少的一个部分,特别是在处理大量数据时,分页可以有效地提高用户体验,避免一次性加载过多数据导致的性能问题。 分页控件允许用户以可管理的块浏览大量数据,通常在表格或列表中展示...
在Flex开发中,分页控件是用于展示大量数据时必不可少的一个组件,它允许用户以较小的数据块(每页)浏览整个数据集,从而提高用户体验并减轻服务器负载。本篇文章将详细讲解如何在Flex中创建和使用分页控件。 首先...
FLEX 分页控件 可以跳转 上一页 下一页 首页 尾页
这是我自己写的一个flex组件,使用简单,在使用的时候,只需要在页面载入里,新建组件对象就OK,另外还有一个方法监听控件返回的的页数,可以实现分面。flex会生成linkButton,并且可以按需要控件显示的数量。如有不...
在给定的标题“Flex分页控件一次加载数据类型”中,我们关注的是一个特定的Flex控件,即用于分页显示数据的组件。 分页控件在处理大量数据时尤为重要,因为它允许用户逐步浏览内容,而不是一次性加载所有数据,从而...
5. 动态加载:对于大数据集,分页控件可以采用懒加载策略,即只在用户翻页时加载对应页的数据,减少初始加载时间。 6. 性能优化:为了提高性能,分页控件可能包含缓存策略,比如保存最近查看过的页面数据,减少...
Paging 是Flex做的客户端分页控件 PagingService是Java做的WebService服务端,用来模拟服务端返回数据。 服务端需要部署到类似tomcat这样的服务器中运行 服务端返回XML格式的数据,主要用了XStream这个jar, 它...
在Flex中,分页控件是一种常见的组件,它允许用户在大量数据中进行导航,一次显示一部分内容,提高用户体验。本篇将详细介绍如何在Flex中创建和管理分页控件,并通过事件处理来实现其功能。 首先,我们要了解Flex中...
用法类似.net下的AspNetPager 指定recordCount:int 刚学flex的时候写的,凑合着能用了。电脑挂过一次,源代码搞丢了,新手可以拿去用用,老鸟们半小时自己就可以搞定一个了
flex4下使用的分页控件,含有上一页,下一页和页码,可以通过滑动选择每页记录数
2. 用户界面:前端展示分页控件,包括页码按钮、跳转输入框等,用户可以通过这些元素切换页面。 3. 事件处理:监听用户操作,如点击页码按钮,触发数据重新加载并更新页面内容。 4. 动态加载:使用JavaScript动态...
下面将详细讲解Flex DataGrid的分页控件源码及其实现原理。 1. **Flex DataGrid基础** Flex DataGrid是Flex SDK中的一个组件,用于显示表格形式的数据。它可以处理各种数据源,如ArrayCollection、...
这是我自己开发的一个dataGrid分页的控件,上传的资源是一个打成包的flex项目,这个控件在查询数据时是与后台进行实时交互的,表格的表头样式是重写皮肤类进行定义的,而隔行变色是通过css来实现的。其中最重要的...
在本主题中,“基于datagrid控件的增删改查及分页实现”是一个常见的需求,特别是在开发数据密集型的Web应用时。下面将详细介绍这个主题中的相关知识点。 1. Flex DataGrid 控件: DataGrid是Flex中一个强大的组件...
总之,使用Flex开发DataGrid分页控件,无论是客户端还是服务端,都需要理解数据加载、分页逻辑和用户交互的基本原理。通过合理的组件布局、事件处理和数据绑定,可以实现高效、易用的分页功能。无论使用哪种编程语言...
在Flex 3.2开发中,分页控件和Accordion组件是两个常用且重要的元素,它们可以帮助用户更有效地管理和展示大量的信息。让我们深入探讨这两个概念及其应用。 分页控件(Paging Control): 在Flex中,分页控件允许...
在Flex中,控件是构建用户界面的基本元素,本篇文章将深入探讨Flex的基本控件,包括文本控件、数据源控件以及菜单控件等。 首先,我们来看文本控件,主要包括Label、Text、TextInput和TextArea。 1. Label(标签)...
flex客户端和服务端分页控件,后台使用java实现数据的传送,flex客户端调用服务端的webservices服务进行数据的展现~~ 内附myeclipse项目和flex项目·~ 分别导入可运行,注意端口的修改~