Flex中的DataGrid分页和数据处理

1.方法一:小数据分页

(1)GD_Component.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="516" 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="12" 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>

 

(2)DataGridTest.mxml

<?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;
           [Bindable]
           private var ac:ArrayCollection;
           private function creationComplete():void{
               loadAcData();
           }
       
           //如果查询出来的数据为xml格式，调用这个方法

           private function loadXmlData(xml:XML):void{
              ac=new ArrayCollection();
              for each(var item:Object in xml.Table){ //将Table换成XML中的根元素名称
                  ac.addItem(item);
              }
              dg.init(ac);
           }
    

           //查询出来的结果为数组，直接传递给init即可
           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:GD_Component id="dg" width="495" height="300" pageSize="8" x="124" y="24">
       <local:arrColumns><!--为这个标签设置DataGridColumn，指示在DataGrid上显示的列-->
           <mx:DataGridColumn headerText="id" dataField="photo_id"/>
           <mx:DataGridColumn headerText="name" dataField="photo_name"/>
       </local:arrColumns>
    </local:GD_Component>

</mx:Application>

 

2.方法二(有跳转功能)

(1)DG_componentHBox.mxml

<?xml version="1.0" encoding="utf-8"?>
 <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" xmlns:mydg="*">
     <mx:Script>
         <![CDATA[
        
            import mx.collections.ArrayCollection;
            [Bindable]
            private var mypagedata:ArrayCollection = new ArrayCollection();//当前也没种该显示的记录
            [Bindable]
            public var mygridcolumns:Array;
            public var mydata:ArrayCollection;//所有的数据
            public var pagecount:int=10;//表示每页记录的条数,默认10条,可以由用户自行定义
            public var curpage:int;//当前的页码
            public var totalpage:int;//一共的页数
            public var totalcount:int;//一共的记录条数
           
            public function initdata(value:ArrayCollection):void
            {
                mydata = value;//将所有数据都赋值给mydata变量
                mypagedata.removeAll();//移出当前页面中所有数据记录
               
                if(mydata.length>0 && null!=mydata)
                {
                    totalcount = mydata.length;
                    totalpage = (totalcount + pagecount - 1) / pagecount;
                    setPager(0);
                    inputpage.minimum=1;
                    inputpage.maximum=totalpage;
                }else{
                    totalcount = 0;
                    totalpage = 0;
                    curpage = 0;
                     inputpage.minimum = 0;
                     inputpage.maximum = 0;
                    pagedetail.text = "第0页/共0页   共0条纪录";
                }
            }
            public function setPager(value:int):void
            {
                if(value<0 || value>totalpage) return;
                curpage = value;
                var curNum:int = value*pagecount;//计算出要跳转到的页面种的第一条记录在所有的记录种是第几条记录
                mypagedata.removeAll();//移出变量中的数据,以便插入新数据,页面中显示的是这个变量中的数据
                for(var i:int=0;curNum<mydata.length&&i<pagecount;i++,curNum++)
                //循环的次数既要小于所有的记录数,也要小于每个页面能显示的记录数;并且curNum变量中的值也要增加
                {
                    mypagedata.addItem(mydata.getItemAt(curNum));//依次抽取记录
                }
                var temp:int = curpage+1;//页码中第一张页面是0,也就是说实际显示的页码是+1后的值
                pagedetail.text = "第"+temp+"页/共"+totalpage+"页   共条"+totalcount+"记录";
            }
        ]]>
    </mx:Script>
   
    <mx:DataGrid id="cudg" dataProvider="{mypagedata}" 
        columns="{mygridcolumns}" width="100%" height="100%">
    </mx:DataGrid>
    <mx:HBox width="100%" horizontalAlign="left" verticalAlign="middle">
        <!--<mx:LinkButton label="全选"/>
        <mx:LinkButton label="全不选"/>-->
        <mx:Spacer width="100%" height="1"></mx:Spacer>
        <mx:Label text="第0页/共0页" id="pagedetail"/>
        <mx:LinkButton label="首页" click="setPager(0)"/>
        <mx:LinkButton label="上一页" click="setPager(curpage-1)"/>
        <mx:LinkButton label="下一页" click="setPager(curpage+1)"/>
        <mx:LinkButton label="末页" click="setPager(totalpage-1)"/>
        <mx:NumericStepper id="inputpage" stepSize="1" minimum="0" maximum="0" cornerRadius="0"/>
        <mx:LinkButton label="跳转" click="setPager(inputpage.value-1)"/>
    </mx:HBox>
</mx:VBox>

 

(2)DG_componentHBoxTest.mxml

<?xml version="1.0" encoding="utf-8"?>
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:nsl="*"  creationComplete="init()">
     <mx:Script>
         <![CDATA[
             import mx.collections.ArrayCollection;
             public var items:ArrayCollection;
             private function init():void
             {
                items = new  ArrayCollection();
                for(var i:int =1;i<35;i++)
                {
                    var obj:Object = new Object();
                    obj.loginaccount = "andy";
                    obj.name = "Andy";
                    obj.loginaccount += i;
                    obj.name += i;
                    items.addItem(obj);
                }
               
                mydg.initdata(items);
            }
           
        ]]>
    </mx:Script>
        <mx:Panel id="panel1" title="MyDataGrid">
        <nsl:DG_componentHBox width="100%" height="100%" id="mydg">
            <nsl:mygridcolumns>
                <mx:DataGridColumn headerText="登录名" dataField="loginaccount" width="200"/>
                <mx:DataGridColumn headerText="姓名" dataField="name" width="200"/>
            </nsl:mygridcolumns>
        </nsl:DG_componentHBox>
    </mx:Panel>
   
</mx:Application>