`

Flex分页

阅读更多
  之前做过jsp+js的分页组件, 现在开始使用flex了写了一个,附上了参考一个, 以备他日重用。
   一(参考版):
  属性:
RecordCount 总记录条数
PageSize 每页大小
PageCount 总页数
PageIndex 当前页码
StartIndex 开始记录数,用于分页查询
事件:
pageChanged 分页触发时的事件
需要自己写两个查询方法
1.GetRecordCount返回总条数
2.GetDataByPage(StartIndex,PageSize) 从开始记录取PageSize条记录,就可以完成分页功能

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="678"
initialize="init();"
height="20">
<mx:Metadata>
[Event(name="pageChanged",type="mx.rpc.events.ResultEvent")]
</mx:Metadata>
<mx:Script>
<![CDATA[
  import mx.controls.LinkButton;
  import mx.events.ItemClickEvent;
  import mx.controls.Alert;
  import mx.rpc.events.ResultEvent; 
  public var PageCount:int=0;
  public var RecordCount:int=0;
  public var PageSize:int=10;
  public var PageIndex:int=0;
  public var StartIndex:int=0;
  private function init():void{
   lb.dataProvider= [{label:"|<",text:"首页"},{label:"<<",text:"上一页"},{label:">>",text:"下一页"},{label:">|",text:"末页"}];   

  }
  public function setRecordCount(count:int):void{
   this.RecordCount=count;
   if(count%PageSize==0)
      PageCount=count/PageSize;
   else
      PageCount=count/PageSize+1;
      pg(PageIndex);
      refUI();
  }
  public function refUI():void{
   info.text="共"+RecordCount+"条记录每页"+PageSize+"条 共"+PageCount+"页第"+(PageIndex+1)+"页";
   (lb.getChildAt(0) as LinkButton).enabled=(lb.getChildAt(1) as LinkButton).enabled=PageIndex>0;
   (lb.getChildAt(2) as LinkButton).enabled=(lb.getChildAt(3) as LinkButton).enabled=PageIndex<PageCount-1;
  }
  private function click(e:ItemClickEvent):void{
   var n:int= e.index;
   var index:int=PageIndex;
   switch(n){
    case 0:
     index=0;  
     break; 
    case 1:
        index--;
        break;
     case 2:
       index++;
       break;
     default:
       index=PageCount-1;
       break;  
   }
   pg(index);
  }

  private function pg(index:int):void{
   if(index<0)    index=0;
   if(index>PageCount-1) index=PageCount-1;
   PageIndex=index;
   StartIndex=PageIndex*PageSize;
   var ev:ResultEvent=new ResultEvent("pageChanged",false,true,PageIndex);
   dispatchEvent(ev);
   setTimeout(refUI,200);
  }

  private function gopg():void{
   var n:int=new Number(txtpg.text);
   n--;
   pg(n);
  }
]]>
</mx:Script>
<mx:Box width="100%" direction="horizontal" paddingTop="2">
<mx:Label y="1" id="info" text="共100条记录每页20条 共90页第1页" height="18"/>
<mx:LinkBar id="lb" labelField="label" toolTipField="text" separatorWidth="0" fontSize="8" paddingLeft="0" paddingRight="0" itemClick="click(event)">    
</mx:LinkBar>
<mx:TextInput height="16" y="2" width="30" id="txtpg" paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" borderStyle="solid" fontSize="8"/>
<mx:LinkButton label="GO" height="18" width="24" click="gopg();" paddingRight="0" paddingLeft="0" fontSize="8"/>
</mx:Box>
</mx:Module>
效果图如下:




调用方法:
1.初始化中需要设置RecordCount
pager.PageSize=Config.popPageSize;//设置页大小
getRecordCount();    //设置总记录条数
    private function getRecordCount():void{
    ProductBLL.GetRecordCount(function(e:ResultEvent):void{ //调用业务方法,获取记录条数
     pager.setRecordCount(e.result as int); //设置记录条数
     refData();    //获取数据
    });
   }

   private function refData():void{   
    var start:int=pager.StartIndex;  //记录开始值
    ProductBLL.GetPageByName(start,pager.PageSize,function(e:ResultEvent):void{ //调用业务分页查询
     dg1.dataProvider=e.result;   //绑定数据        
    });
   }

2.编写pageChanged事件,调用refData方法即可,如可直接写在标记中,如下:
<ns2:Pager x="10" y="324" width="504" id="pager" pageChanged="refData();"/>

>

   ^_^ ^_^ 这个比我们正在使用的要简单, 现在附上我们使用的版本(其中每一页都是用数字标示,类似于QQ空间那种,实现起来复杂一点):
   属性:startPageIndex, totalPageCount, pageShowCount(默认为5),startPage,endPage

   我们默认的是页面上显示5个页面,也即像1 2 3 4 5或者2 3 4 5 6 这样取连续的5页记录。
   分析:如果查询出来的总页数小于5,那么则startPage=1,endPage=totalPage
        如果总页数大于5则关键是要求出起始页码与结束, 如总页数为7那么起始页码则为3,结束页码为7,以此类推。 那么如何求出startPage和endPage呢?
   
   又因为存在关系: endPage = startPage+pageShowCount-1;因此问题的关键在于求出startPage. 而startPage由startPageIndex决定, 因此思考如何求出startPageIndex?

   得出关系:
   如果 startPageIndex > (pageShowCount/2+1),则startPage=startPageIndex*()

  • 大小: 14.9 KB
分享到:
评论

相关推荐

    flex分页 很好很强大

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

    flex 分页

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

    flex分页代码

    "Flex分页代码"指的是使用Adobe Flex这一编程框架实现的分页功能。Flex是一款基于ActionScript 3.0的开源框架,它允许开发者构建富互联网应用(RIA)。在这里,我们主要探讨如何在Flex中实现分页功能。 Flex提供了...

    flex 分页控件

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

    Flex 分页组件,flex自定义组件

    Flex分页组件是一种在Flex应用程序中用于展示大量数据并分批加载的重要工具。它通过将大量数据分成小块,每次只加载一部分,提高了用户界面的响应速度和用户体验。本组件适用于那些需要显示大量数据,如表格、列表...

    Flex分页显示实例

    本实例将聚焦于“Flex分页显示”,这是一种使用Adobe Flex框架实现的数据分页方法。Flex是基于ActionScript 3.0的开源框架,用于构建富互联网应用程序(RIA)。它提供了丰富的组件库和强大的数据绑定机制,使得开发...

    Flex分页技术

    在Flex开发中,数据展示通常会涉及到大量的数据处理,如分页、排序、过滤和关键字搜索等。在Flex中,我们可以使用DataGrid组件来实现这些功能,提高用户体验并优化性能。 1. **Flex DataGrid 分页技术**: Flex ...

    Flex分页控件源码

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

    Flex 分页控件组件

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

    flex 分页学习例子

    通过深入研究这些文件,你可以了解Flex分页的具体实现,包括数据源的管理、分页组件的自定义、事件处理和数据绑定的细节。这对于提升Flex编程技能,尤其是处理大型数据集的场景,是非常有价值的实践。

    Flex分页代码by whaosoft

    Flex分页是Web开发中的一种常见技术,尤其在构建数据量较大的列表或表格时,用于提高用户体验和页面加载效率。本资源"Flex分页代码by whaosoft"提供了一个使用Flex实现分页功能的示例代码,适用于创建可扩展且响应式...

    flex分页控制

    ### Flex中的DataGrid分页控制实现 在Flex开发过程中,数据展示是非常常见且重要的功能之一。其中,`DataGrid`组件被广泛应用于显示表格形式的数据集合。为了优化用户体验及提高性能,分页处理成为了必不可少的功能...

    SimPager Flex分页组件

    重写的Flex分页组件,改进了一些BUG,原版的源码丢了,又重写了一个,所以没有版本之分 recordCount//记录总数,程序对该属性赋值生成分页 currentPageIndex//当前页 pageSize//每页记录数 buttonConut//显示的...

    flex分页工具条组件

    Flex分页工具条组件是一种在Flex应用程序中实现数据分页显示的重要组件。它允许用户在大量数据中分块浏览,提高用户体验,降低一次性加载过多数据对系统资源的需求。Flex是Adobe开发的一种基于ActionScript和MXML的...

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

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

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

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

    flex分页组建

    在这个主题中,我们将深入探讨“flex分页组建”,这是一种在Flex应用中实现数据分页显示的重要组件。 在Flex中,数据分页通常通过使用Flex提供的各种组件和类来实现,如DataGrid、List或Accordion等。这些组件可以...

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

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

    flex分页组件

    Flex分页组件是一种在Flex应用程序中用于展示大量数据并分段加载的重要工具。它允许用户在多个页面间导航,以查看或操作数据的不同部分,而不是一次性加载所有内容,从而提高应用性能和用户体验。本组件的核心功能是...

    flex分页控件的使用

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

Global site tag (gtag.js) - Google Analytics