Flex表格分页封装例子

网上找了篇Flex分页封装的例子，可以参考使用，并可参照实现其他自己需要的封装

 

控件代码：

 

<?xml version="1.0"  encoding= "utf-8" ?>  
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"  width= "400"  height= "300"  xmlns:local= "*" >  
    <mx:Script>  
       <![CDATA[  
           import  mx.collections.ArrayCollection;  

           [Bindable]public  	var pageSize: int = 10 ; //每页显示行数    
           [Bindable]private  	var totalPage: int = 0 ; //总页数     
           [Bindable]private  	var currentPage: int = 0 ; //当前页                    
           [Bindable]public  	var acAllData:ArrayCollection; //所有数据     
           [Bindable]private  	var acPageData:ArrayCollection= new  ArrayCollection(); //当前页数据     
           [Bindable]public  	var arrColumns:Array; //DataGrid列,在调用时需要为这个数组设置数据   
  
           //初始化    
           public  function init(value:ArrayCollection): void{    
              acAllData=value;    
              if (acAllData.length!= 0  && acAllData!= null ){    
                  totalPage=Math.ceil(acAllData.length/pageSize);  
                  loadData(0 );  
              }else {  
                  currentPage=0 ;  
                  totalPage=0 ;  
              }  
           }  
  
           //加载数据   
           private  function loadData(pageNum: int ): void{    
              if (pageNum>= 0  && pageNum<totalPage){    
                  acPageData.removeAll();   
                  currentPage=pageNum;//重新为当前页的变量赋值    
                  var startIndex:int =pageNum*pageSize; //计算起始索引    
                  for (var i: int = 0 ;i<pageSize && startIndex<acAllData.length;i++){
                     acPageData.addItem(acAllData[startIndex]);                     
                     startIndex++;   
                  }    
              }    
           }  
       ]]>  
    </mx:Script>  
    <mx:VBox x="0"  y= "0"  width= "100%"  height= "100%"  verticalGap= "0"  horizontalAlign= "center"  backgroundColor= "white" >    
       <mx:DataGrid id="customgrid"  width= "100%"  dataProvider= "{acPageData}"  columns= "{arrColumns}"  rowCount= "{pageSize}" />  
       <mx:HBox cornerRadius="3"  borderStyle= "solid"  horizontalAlign= "center"  verticalAlign= "middle" >   
           <mx:Text text="{'  第'+(totalPage>0?(currentPage+1):0)+'页/共'+totalPage+'页'+'  共'+(acAllData!=null?acAllData.length:0)+'条记录'}"  fontSize= "12" />   
           <mx:LinkButton id="lbtnFirst"  label= "首页"  click= "loadData(0)"  enabled= "{lbtnPrevious.enabled}"  fontSize= "12" />  
           <mx:LinkButton id="lbtnPrevious"  label= "上一页"  click= "loadData(currentPage-1)"  enabled= "{currentPage!=0?true:false}"  fontSize= "12" />  
           <mx:LinkButton id="lbtnNext"  label= "下一页"  click= "loadData(currentPage+1)"  enabled= "{totalPage>(currentPage+1)?true:false}"  fontSize= "12" />  
           <mx:LinkButton id="lbtnLast"  label= "尾页"  click= "loadData(totalPage-1)"  enabled= "{lbtnNext.enabled}"  fontSize= "12" />  
           <mx:NumericStepper id="nsPageNum"  stepSize= "1"  minimum= "1"  maximum= "{totalPage}"  enabled= "{lbtnJump.enabled}" />  
           <mx:LinkButton id="lbtnJump"  label= "跳转"  click= "loadData(nsPageNum.value-1)"  enabled= "{totalPage>1?true:false}"  fontSize= "12" />  
       </mx:HBox>  
   </mx:VBox>  
  
</mx:Canvas>  
  

 

测试代码：

 

<?xml version="1.0"  encoding= "utf-8" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  layout= "absolute"  xmlns:local= "*"   
   creationComplete="creationComplete()" >  
     <mx:Script>  
        <![CDATA[    
           import  mx.collections.ArrayCollection; 
           import mx.controls.Alert;             
           [Bindable]  
           private  var ac:ArrayCollection;  
 
           private  function creationComplete(): void {  
               	loadAcData();
           }              

           private  function loadAcData(): void {    
               ac=new  ArrayCollection();   
               //测试数据     
               for (var i: int = 0 ;i< 35 ;i++){  
                  var obj:Object=new  Object();  
                  obj.photo_id=i.toString();  
                  obj.photo_name="photo" +i;  
                  ac.addItem(obj);    
               }  
               dg.init(ac);   
           }  
        ]]>  
     </mx:Script>  
  
     <!--设置pageSize为8 ,表示每页显示 8 条记录，不设置默认显示 10 条记录-->  
    <local:mygrid id="dg"  width= "100%"  height= "100%"  pageSize= "5" >  
       <local:arrColumns><!--为这个标签设置DataGridColumn，指示在DataGrid上显示的列-->  
           <mx:DataGridColumn headerText="id"  dataField= "photo_id" />   
           <mx:DataGridColumn headerText="name"  dataField= "photo_name" />  
       </local:arrColumns>
    </local:mygrid> 
    
</mx:Application>  

 

评论

1 楼 qiyangyang2020 2011-10-13  

很好很不错。原来还可以这样封装啊。呵呵。