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:[e-mail]

            Email:[e-mail]



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

            加了一个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>