`

flex 分页

    博客分类:
  • FLEX
阅读更多

<?xml version="1.0" encoding="utf-8"?>
<mx:ControlBar xmlns:mx="http://www.adobe.com/2006/mxml" width="100%"
  paddingTop="0" height="24">
   <mx:Script>
   <![CDATA[
    import mx.events.ValidationResultEvent;
    import mx.events.ItemClickEvent;
    import mx.rpc.AsyncToken;
    import mx.collections.ArrayCollection;
    import mx.rpc.events.ResultEvent;
    import mx.controls.Alert;
    import flash.events.Event;
    import flash.events.KeyboardEvent;
    import mx.rpc.http.mxml.HTTPService;
    import mx.validators.NumberValidator;
   
    [Bindable]   
    private var _pageSize: Number =  20;
       
    // 当前页
    [Bindable]
    private var _curPage: Number = 1;  

    //总记录数
    [Bindable]   
    private var _recordCount: String;
           
    // 页面总数
    private var pageCount: Number = -1;
   
    private var numValid:NumberValidator = new NumberValidator();   
    // 请求数据的服务,由调用程序设置
    private var _service: HTTPService;
    private var _params: URLVariables;
    public var resultData: Object;
     
    public function set service(service: HTTPService): void
    {
     this._service = service;
     this._service.addEventListener(ResultEvent.RESULT, onServiceResult);
     init();
    }
    
    public function get service(): HTTPService
    {
     return this._service;
    }
     
    public function set params(params: URLVariables): void
    {
     this._params = params;
     this._params.pageSize = _pageSize;
     init();
    }
    
    public function get params(): URLVariables
    {
     return this._params;
    }
     
    private function init(): void
    {
     _curPage = 1;
     pageCount = -1;
     pageNavigator.enabled = false;
    }
     
    public function set pageSize(pageSize: Number): void
    {
     this._pageSize = pageSize;
     if (params != null)
     {
      this._params.pageSize = _pageSize;
     }
    }
    
    public function get pageSize(): Number
    {
     return _pageSize;
    }
     
    private function onServiceResult(e: ResultEvent): void
    {
         recordCount.text = "共"+(e.result.nodes.recordNum)+"条";
         pageCount = Math.ceil( e.result.nodes.recordNum / _pageSize);
         totalLabel.text = "页" +"/共" + pageCount + "页";
         pageNavigator.enabled = true;
         
      var event: NavigateResultEvent = new NavigateResultEvent(NavigateResultEvent.RESULT);
         event.resultData =  XML(e.message.body).children();;
         this.dispatchEvent(event);   
    }
    
       
    private function gotoBtnClick(event:Event): void
    {
        _curPage = new Number(curPageText.text);
        if (_curPage > pageCount)
         _curPage = pageCount;
        doQuery(_curPage);
    }
       
    public function doQuery(pageNo: Number = 1): void
    {
     params.curPage = pageNo;
        service.send(params); 
        pageNavigator.enabled   = false;    
     }
       
    private function turnPage(e: ItemClickEvent): void
    {
     
       switch (e.index)
       {
         case 0:
         _curPage = 1;
         doQuery(_curPage);
         break;
         case 1:
         if (_curPage > 1)
          _curPage--;
         doQuery(_curPage);
         break;
         case 2:
         if (_curPage < pageCount)
          _curPage++;
         doQuery(_curPage);
         break;
         case 3:
         doQuery(pageCount);
         _curPage = pageCount;
         break;
         default:
         break;
       }
   }
  
   private function createValid():void
   {
       numValid.source = curPageText;
       numValid.property = "text";
       numValid.addEventListener(ValidationResultEvent.INVALID,handValid);
       numValid.addEventListener(ValidationResultEvent.VALID,handValid);
   }
  
   private function handValid(event:ValidationResultEvent):void
   {
       if(event.type == ValidationResultEvent.VALID)
       {
           turnBn.enabled = true;
       }
       if(event.type == ValidationResultEvent.INVALID)
       {
           turnBn.enabled = false;
           curPageText.errorString = "请输入数字";
       }
   }
  
   ]]>
   </mx:Script>
   <mx:HBox  width="60%" cornerRadius="12" borderStyle="solid" horizontalAlign="center" verticalAlign="middle"> 
    <mx:Label text="第"/>
    <mx:TextInput width="32" height="20" text="{_curPage}" id="curPageText" creationComplete="createValid()"/>
 <mx:Label id="totalLabel" text="/0页"/>
 <mx:Label id="recordCount" text="{_recordCount}"/>
 <mx:Button label="跳转" click="gotoBtnClick(event);" id="turnBn"/>
 <mx:Label id="pageSizeText" text="每页{_pageSize}条"/>
 <mx:LinkBar id="pageNavigator" enabled="false" width="100%" horizontalAlign="center" itemClick="turnPage(event);">
     <mx:dataProvider>
         <mx:Object id="firstPage" Tooltip="首页" label="第一页" enabled="false" icon="@Embed(source='page-first.gif')"/>
         <mx:Object id="prePage" Tooltip="上一页" label="上一页" icon="@Embed(source='page-prev.gif')"/>
         <mx:Object id="nextPage" Tooltip="下一页" label="下一页" icon="@Embed(source='page-next.gif')"/>                  
         <mx:Object id="lastPage" Tooltip="末页" label="最后一页" icon="@Embed(source='page-last.gif')"/>
     </mx:dataProvider>
 </mx:LinkBar>
   </mx:HBox> 
   
</mx:ControlBar>

分享到:
评论

相关推荐

    flex分页 很好很强大

    Flex分页是一种在Web开发中实现页面数据分块显示的技术,尤其在大数据量展示时,它能有效地提高用户体验,减少页面加载时间,并提供流畅的滚动交互。标题“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