`
www-hello
  • 浏览: 100453 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Flex翻页控件

    博客分类:
  • flex
阅读更多

页面代码(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);
		}
 

 

 

 

 

分享到:
评论
2 楼 www-hello 2010-09-13  
这个帖子写了由一段时间了,当时写的demo后来不小心删掉了。
1 楼 01jiangwei01 2010-08-16  
你好,能把demo发全一点吗?

相关推荐

    flex 分页控件

    在Flex中,分页控件是常见的用户界面元素,特别是在处理大量数据时,它可以帮助用户逐页浏览内容,提高用户体验。本篇文章将详细介绍如何在Flex中创建自定义的分页控件及其相关知识点。 首先,我们要理解Flex的组件...

    Flex分页控件源码

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

    Flex 分页控件组件

    在Flex应用中,分页控件是必不可少的一个部分,特别是在处理大量数据时,分页可以有效地提高用户体验,避免一次性加载过多数据导致的性能问题。 分页控件允许用户以可管理的块浏览大量数据,通常在表格或列表中展示...

    flex分页控件的使用

    在Flex开发中,分页控件是用于展示大量数据时必不可少的一个组件,它允许用户以较小的数据块(每页)浏览整个数据集,从而提高用户体验并减轻服务器负载。本篇文章将详细讲解如何在Flex中创建和使用分页控件。 首先...

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

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

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

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

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

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

    flex通用分页控件

    5. 动态加载:对于大数据集,分页控件可以采用懒加载策略,即只在用户翻页时加载对应页的数据,减少初始加载时间。 6. 性能优化:为了提高性能,分页控件可能包含缓存策略,比如保存最近查看过的页面数据,减少...

    FlexPagingBar Flex分页控件

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

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

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

    Flex 分页控件Pager

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

    flex分页控件

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

    flex分页 很好很强大

    2. 用户界面:前端展示分页控件,包括页码按钮、跳转输入框等,用户可以通过这些元素切换页面。 3. 事件处理:监听用户操作,如点击页码按钮,触发数据重新加载并更新页面内容。 4. 动态加载:使用JavaScript动态...

    flex datagrid 分页控件源码

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

    flex dataGrid 分页控件

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

    flex基于datagrid控件的增删改查及分页实现

    在本主题中,“基于datagrid控件的增删改查及分页实现”是一个常见的需求,特别是在开发数据密集型的Web应用时。下面将详细介绍这个主题中的相关知识点。 1. Flex DataGrid 控件: DataGrid是Flex中一个强大的组件...

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

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

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

    在Flex 3.2开发中,分页控件和Accordion组件是两个常用且重要的元素,它们可以帮助用户更有效地管理和展示大量的信息。让我们深入探讨这两个概念及其应用。 分页控件(Paging Control): 在Flex中,分页控件允许...

    flex基本控件总结

    在Flex中,控件是构建用户界面的基本元素,本篇文章将深入探讨Flex的基本控件,包括文本控件、数据源控件以及菜单控件等。 首先,我们来看文本控件,主要包括Label、Text、TextInput和TextArea。 1. Label(标签)...

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

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

Global site tag (gtag.js) - Google Analytics