Flex中datagrid的分页

最新推荐文章于 2021-02-16 00:18:31 发布

原创最新推荐文章于 2021-02-16 00:18:31 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flex #XML #Adobe #Flash

Flex 专栏收录该内容

1 篇文章

订阅专栏

PagingBar.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white">
<mx:Script>
  <![CDATA[
                  import mx.collections.ArrayCollection;
                  import mx.events.ItemClickEvent;
                  import flash.events.KeyboardEvent;
                  import mx.controls.DataGrid;
                  import mx.validators.NumberValidator;

           [Bindable]
      [Embed(source='assets/first.jpg')]
      private var firstIcon:Class;
      private var firstPage:uint;

           [Bindable]
      [Embed(source='assets/pre.jpg')]
      private var preIcon:Class;
      private var prePage:uint;

           [Bindable]
      [Embed(source='assets/next.jpg')]
      private var nextIcon:Class;
      private var nextPage:uint;

           [Bindable]
      [Embed(source='assets/last.jpg')]
      private var lastIcon:Class;
      private var lastPage:uint;

                  //页码条数据,绑定
                  [Bindable]
                  private var nav:ArrayCollection = new ArrayCollection();

                  //默认起始页码,第1页
                  private var currentPageIndex:uint = 0;

                  //是否已初始化
                  private var isInit:Boolean=true;

      //总页数
      private var totalPages:uint = 0;

      //是否重绘页码条，当使用服务端分页时使用
      private var isCreateNavBar:Boolean = true;

      /************************************************************/

                  //显示到Grid的数据
                  [Bindable]
                  public var viewData:ArrayCollection=null;

                  //所有的数据
                  public var orgData:ArrayCollection=null;

                  //每页记录数下拉框
                  public var pageSizeDropDownListData:ArrayCollection=null;

                  // 每页记录数
                  public var pageSize:uint = 5;

                  // 页码条上显示页码的个数
                  public var navSize:uint = 5;

                  //记录总数，调用服务端发页时使用
                  public var totalRecord:int=0;

                  //分页函数
                  public var pagingFunction:Function=null;

                  //分页条对应的Grid
                  public var dataGrid:DataGrid=null;

                  /***************************************************************/

                  public function dataBind(isServerSide:Boolean=false):void{
            //是否初始化
         if(isInit){
       if(pageSizeDropDownListData==null){
        pageSizeDropDownListData = new ArrayCollection();
        pageSizeDropDownListData.addItem({label:5,data:5});
        pageSizeDropDownListData.addItem({label:10,data:10});
        pageSizeDropDownListData.addItem({label:20,data:20});
        pageSizeDropDownListData.addItem({label:30,data:30});
       }
       pageSizeComobox.dataProvider=pageSizeDropDownListData;
       isInit=false;
         }
         //
         refreshDataProvider(currentPageIndex,isCreateNavBar,pageSize,isServerSide);
                  }



                  /**
     * 构建页码条
                  * pages:总页数
                  * pageIndex:当前页（注意，从0开始）
                  *
                   */
                  private function createNavBar(pageIndex:uint = 0):void{
                      nav.removeAll();
                      //向前图标操作,first,Pre
                      if( pageIndex > 1 ){
                            firstPage=0;
                            firstNavBtn.visible=true;
                            //
                            var intLFive:int = pageIndex-navSize; // calculate start of last 5;
                            //
                            prePage=intLFive;
                            preNavBtn.visible=true;
                      }
                      else{
                        firstNavBtn.visible=false;
                        preNavBtn.visible=false;
                      }
                      //页码条
                      for( var x:uint = 0; x < navSize; x++){
                            var pg:uint = x + pageIndex;
                            nav.addItem({label: pg + 1,data: pg});
       //
       var pgg:uint = pg+1;
       if(pgg>=totalPages){ //搜索到最后一个页码，停止添加到navbar
        x=navSize;
       }
                      }
       //计算最后一组页码条中第一个页码的页码编号
       var lastpage:Number = 0;
       for( var y:uint = navSize; y <= totalPages-1;y = y + navSize ){ //lets calculate the lastpage button
        if(y+5 > navSize){
          lastpage = y;
        }
       }
       //向后图标
                      if( pg < totalPages - 1 ){
                            nextPage=pg + 1;
                            nextNavBtn.visible=true;
                            lastPage=lastpage;
                        lastNavBtn.visible=true;
                      }
                      else{
                        nextNavBtn.visible=false;
                        lastNavBtn.visible=false;
                      }
                  }

                  /**
                  * 页码按钮按下(页码条点击)
                  */
                  private function navigatePage(event:ItemClickEvent):void
                  {
                        refreshDataProvider(event.item.data,false);
                  }

                  /**
                  * 页码按钮按下,first,pre,next,last
                  */
                  private function navigateButtonClick(pageString:String):void{
                    var pageIndex:uint=0;
                    switch(pageString){
                     case "firstPage":
                      pageIndex=firstPage;
                      break;
                     case "prePage":
                      pageIndex=prePage;
                      break;
                     case "nextPage":
                      pageIndex=nextPage;
                      break;
                     default: //lastPage
                      pageIndex=lastPage;
                    }
                    //
                    refreshDataProvider(pageIndex);
                  }

                  /**
                  * 更新数据源,更新表格显示数据
                  */
                  private function refreshDataProvider(pageIndex:uint,isCreateNavBar:Boolean=true,pageSize:uint=0,resultReturn:Boolean=false):void{
                   //分页函数
                   if(dataGrid==null) return;
                   currentPageIndex=pageIndex;
             if(pageSize==0){
               pageSize=this.pageSize;
             }else{
               this.pageSize=pageSize;
              if(!resultReturn) totalPages = Math.ceil(orgData.length/pageSize);
             }
                   if(!resultReturn){
                     if(this.pagingFunction!=null){
         pagingFunction(pageIndex,pageSize);
         this.isCreateNavBar=isCreateNavBar;
                     }
                     else{
                       viewData = new ArrayCollection( orgData.source.slice((pageIndex * pageSize),(pageIndex * pageSize) + pageSize) );
                       dataGrid.dataProvider=viewData;
                       pageNumber.text=(pageIndex+1).toString();

                      totalRecordLabel.text = '总记录数：' + orgData.length.toString();
                     }
                   }
                   else{
                     dataGrid.dataProvider=orgData;
                     totalPages = Math.ceil(totalRecord/pageSize);
                     pageNumber.text=(pageIndex+1).toString();
                     totalRecordLabel.text = '总记录数：' + totalRecord.toString()
                   }
                   totalPagesLabel.text = '总页数：' + totalPages;
                   if(isCreateNavBar) createNavBar(pageIndex);
                  }
                  //
                  /**
                  * 每页记录数变更（下拉框选择）
                  */
                  private function pageSizeSelectChange():void{
                    refreshDataProvider(0,true,uint(pageSizeComobox.value));
                  }
                  /**
                  * 页码变更（直接输入）
                  */
                  private function pageIndexInsertChange(event:Event):void{
                    var keyboardEvent:KeyboardEvent=event as KeyboardEvent;
                    if(keyboardEvent!=null&&keyboardEvent.keyCode== Keyboard.ENTER){
                     var pageIndex:uint=uint(pageNumber.text)-1;
                     if(pageIndex>0&&pageIndex<totalPages&&pageIndex!=currentPageIndex){
                       refreshDataProvider(pageIndex);
                      }
                      else{
                       pageNumber.text = (currentPageIndex+1).toString();
                      }
                    }
                  }
                  /**
                  * 查看所有
                  */
                  private function viewAll():void{
                    var tempTotalRecord:uint=0;
      if(pagingFunction!=null) tempTotalRecord=totalRecord;
      else tempTotalRecord=orgData.length;
      //
      pageSizeComobox.text=tempTotalRecord.toString();
      pageSizeComobox.selectedIndex=-1;
      refreshDataProvider(0,true,tempTotalRecord);
                  }
  ]]>
</mx:Script>
<mx:HBox paddingTop="8">
  <mx:Button id="firstNavBtn" icon="{firstIcon}" width="10" height="10" click="navigateButtonClick('firstPage');" />
     <mx:Button id="preNavBtn" icon="{preIcon}" width="7" height="10" click="navigateButtonClick('prePage');"/>
</mx:HBox>
<mx:LinkBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{nav}"/>
<mx:HBox paddingTop="8">
     <mx:Button id="nextNavBtn" icon="{nextIcon}" width="7" height="10" click="navigateButtonClick('nextPage');"/>
     <mx:Button id="lastNavBtn" icon="{lastIcon}" width="10" height="10" click="navigateButtonClick('lastPage');"/>
</mx:HBox>
<mx:VRule height="25"/>
<mx:Label paddingTop="3" id="totalPagesLabel" text=""/>
<mx:Label paddingTop="3" id="totalRecordLabel" text=""/>
<mx:Label paddingTop="3" text="每页记录:"/>
<mx:ComboBox id="pageSizeComobox" cornerRadius="0" paddingLeft="0" fontWeight="normal" width="50" arrowButtonWidth="10" change="pageSizeSelectChange()"/>
<mx:Label paddingTop="3" text="页码:"/>
<mx:TextInput id="pageNumber" width="40" keyDown="pageIndexInsertChange(event);"/>
<mx:LinkButton id="viewAllLinkBtn" label="查看所有" click="viewAll();"/>
</mx:HBox>

Test.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:control="com.control.*" creationComplete="creationCompleteHandle()">
<mx:Style>
Application{
  fontSize:12;
}
</mx:Style>
<mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import com.services.StorageFactory;
   import be.wellconsidered.services.events.OperationEvent;

   private var pageIndex:int=0;

   private var pageSize:int=5;

   private function creationCompleteHandle():void{
    var orgData:ArrayCollection = new ArrayCollection();
             for( var x:uint = 1; x <= 555; x++ )
             {
             var obj:Object = new Object();
             obj.ID = "id " + x.toString();
             obj.Code="order "+x;
             obj.Total=x*1000;
             obj.Customer= "customer "+x;
             obj.Register = "employee";
             obj.Memo="memo "+x;
             obj.State="auditing state";
             orgData.addItem(obj);
             }
             clientPagingBar1.dataGrid=DataGrid1;
             clientPagingBar1.orgData=orgData;
             clientPagingBar1.dataBind();
             //
             serverPagingBar1.dataGrid=DataGrid2;
             serverPagingBar1.pagingFunction=pagingFunction;
             new StorageFactory().getOrderPaged(onResult,pageIndex,pageSize);
   }

         private function pagingFunction(pageIndex:int,pageSize:int):void{
             new StorageFactory().getOrderPaged(onResult,pageIndex,pageSize);
         }

         public function onResult(e:OperationEvent):void
    {
     trace(e.data);
     var xmlObj:XML=new XML(e.data);
     var dataList:ArrayCollection = new ArrayCollection();
     var item:XML;
     for each(item in xmlObj.OrderList.Order){
      dataList.addItem(item);
     }
     serverPagingBar1.orgData=dataList;
     serverPagingBar1.totalRecord=int(xmlObj.TotalCount);
     serverPagingBar1.dataBind(true);
    }
  ]]>
</mx:Script>
<mx:VBox>
  <mx:Label text="客户端分页" />
  <mx:Canvas backgroundColor="white">
     <mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalScrollPolicy="off" horizontalScrollPolicy="off">
      <mx:DataGrid id="DataGrid1" verticalScrollPolicy="on" horizontalScrollPolicy="off">
     <mx:columns>
       <mx:DataGridColumn headerText="订单ID" dataField="ID" />
       <mx:DataGridColumn headerText="订单编码" dataField="Code" />
       <mx:DataGridColumn headerText="金额" dataField="Total" />
       <mx:DataGridColumn headerText="客户" dataField="Customer" />
       <mx:DataGridColumn headerText="销售员" dataField="Register" />
       <mx:DataGridColumn headerText="备注说明" dataField="Memo" />
       <mx:DataGridColumn headerText="状态" dataField="State" />
        </mx:columns>
      </mx:DataGrid>
    <control:PagingBar id="clientPagingBar1" />
        </mx:VBox>
  </mx:Canvas>
  <mx:Label text="服务端分页" />
  <mx:Canvas backgroundColor="white">
     <mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalScrollPolicy="off" horizontalScrollPolicy="off">
      <mx:DataGrid id="DataGrid2" verticalScrollPolicy="on" horizontalScrollPolicy="off">
     <mx:columns>
       <mx:DataGridColumn headerText="订单ID" dataField="ID" />
       <mx:DataGridColumn headerText="订单编码" dataField="Code" />
       <mx:DataGridColumn headerText="金额" dataField="Total" />
       <mx:DataGridColumn headerText="客户" dataField="Customer" />
       <mx:DataGridColumn headerText="销售员" dataField="Register" />
       <mx:DataGridColumn headerText="备注说明" dataField="Memo" />
       <mx:DataGridColumn headerText="状态" dataField="State" />
        </mx:columns>
      </mx:DataGrid>
    <control:PagingBar id="serverPagingBar1" />
        </mx:VBox>
  </mx:Canvas>
</mx:VBox>
</mx:Application>