FLEX 分頁控制項)

來源:互聯網
上載者:User

設計思想是參考ASP.NET中的 ASPNETPager分頁控制項的思想。
參數:
屬性:
RecordCount 總記錄條數
PageSize 每頁大小
PageCount 總頁數
PageIndex 當前頁碼
StartIndex 開始記錄數,用於分頁查詢
事件:
pageChanged 分頁觸發時的事件
需要自己寫兩個查詢方法
1.GetRecordCount返回總條數
2.GetDataByPage(StartIndex,PageSize) 從開始記錄取PageSize條記錄,就可以完成分頁功能(具體使用方法可以參考ASPNET Pager控制項)
源碼如下:
<?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();"/>

 

OK搞定!

轉自:http://student.csdn.net/space.php?uid=301568&do=blog&id=41991

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.