Flex 分页DataGrid

Local:Kelvin_LinkButton是我重写的一个LinkButton，换成mx: LinkButton即可.

 

kelvin_DataGrid.mxml代码：

<?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[

           /*分页DataGrid

            by Kelvin 2008-02-24

            MSN:xiaobolove@hotmail.com

            Email:xiaobolove334421@163.com

            

            因为是一次取出全部数据，所以适合数据量不会太大的情况。

            加了一个pageSize,用来控制每页显示的行数，可以在调用这个组件的时候为pageSize属性赋值，

            默认为每页显示10行数据,不需要为DataGrid指定高度。

            参考 古刹飞鹰@E鹰创作室 的文章

            */

           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"/>

           <local:Kelvin_LinkButton id="lbtnFirst" label="首页" click="loadData(0)" enabled="{lbtnPrevious.enabled}" fontSize="12"/>

           <local:Kelvin_LinkButton id="lbtnPrevious" label="上一页" click="loadData(currentPage-1)" enabled="{currentPage!=0?true:false}" fontSize="12"/>

           <local:Kelvin_LinkButton id="lbtnNext" label="下一页" click="loadData(currentPage+1)" enabled="{totalPage>(currentPage+1)?true:false}" fontSize="12"/>

           <local:Kelvin_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}"/>

            <local:Kelvin_LinkButton id="lbtnJump" label="跳转" click="loadData(nsPageNum.value-1)" enabled="{totalPage>1?true:false}" fontSize="12"/>

       </mx:HBox>

    </mx:VBox>

</mx:Canvas>

 

调用Test.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(item 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:kelvin_DataGrid id="dg" width="100%" height="100%" pageSize="8">

       <local:arrColumns><!--为这个标签设置DataGridColumn，指示在DataGrid上显示的列-->

           <mx:DataGridColumn headerText="id" dataField="photo_id"/>

           <mx:DataGridColumn headerText="name" dataField="photo_name"/>

       </local:arrColumns>

    </local:kelvin_DataGrid>

</mx:Application>