Flex实现分页显示功能(mx:DataGrid)

静态效果：

<a href="http://blog.51cto.com/attachment/201110/193532367.jpg" target="_blank"></a>

通过提供的“首页”、“上一页”、“下一页”、“末页”和“跳转”等按钮，能够随意显示相关页面的数据。

相关源码如下：

分页组件代码

&lt;?xml version="1.0" encoding="utf-8"?&gt;  

&lt;mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initData(dataProvider);"&gt;  

    &lt;mx:Script&gt;  

        &lt;![CDATA[  

            import mx.collections.ArrayCollection;  

            // 当前需要显示的记录  

            [Bindable]  

            private var mypagedata:ArrayCollection = new ArrayCollection();  

            public var columns:Array; // 数据集合  

            public var dataProvider:ArrayCollection; // 所有数据  

            public var pageCount:int = 6;// 每页包含的记录数，默认6条  

            public var curPage:int; // 当前页码  

            public var totalPage:int; // 总页数  

            public var totalCount:int; // 总记录条数  

            public function initData(value:ArrayCollection):void  

            {  

                // 将所有的数据都赋值给 dataProvider 变量  

                dataProvider = value;  

                // 移除当前页面中所有数据记录  

                mypagedata.removeAll();  

                if(null != dataProvider &amp;&amp; dataProvider.length &gt; 0)  

                {  

                    totalCount = dataProvider.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 &lt;0 || (value+1)&gt;totalPage){  

                    return;  

                curPage = value;  

                // 计算跳转到页面中的第一条记录所在记录中是第几条记录  

                var curNum : int = value*pageCount;  

                // 清空当前显示的数据记录  

                for(var i:int = 0; curNum&lt;dataProvider.length&amp;&amp;i&lt;pageCount; i++,curNum++){  

                    mypagedata.addItem(dataProvider.getItemAt(curNum));  

                var temp:int=curPage+1;  

                pagedetail.text = "第 "+temp+" 页/共 "+totalPage+" 页 共 "+totalCount+" 条记录";  

                cudg.dataProvider = mypagedata;  

        ]]&gt;  

    &lt;/mx:Script&gt;  

    &lt;mx:DataGrid id="cudg" columns="{columns}" width="100%" height="100%" /&gt;  

    &lt;mx:HBox verticalAlign="middle" horizontalAlign="center"&gt;  

        &lt;mx:Label text="第 0 页/共 0 页" id="pagedetail" /&gt;  

        &lt;mx:LinkButton label="首页" click="setPager(0);" /&gt;  

        &lt;mx:LinkButton label="上一页" click="setPager(curPage - 1);" /&gt;  

        &lt;mx:LinkButton label="下一页" click="setPager(curPage + 1);" /&gt;  

        &lt;mx:LinkButton label="末页" click="setPager(totalPage - 1);" /&gt;  

        &lt;mx:NumericStepper id="inputpage" stepSize="1" minimum="0" maximum="0" /&gt;  

        &lt;mx:LinkButton label="跳转" click="setPager(inputpage.value - 1);" /&gt;  

    &lt;/mx:HBox&gt;  

&lt;/mx:VBox&gt; 

涉及控件包括：&lt;mx:DataGrid&gt;、&lt;mx:HBox&gt;、&lt;mx:LinkButton&gt;、&lt;mx:NumericStepper&gt;等。

<a href="http://down.51cto.com/data/2359152" target="_blank">附件：http://down.51cto.com/data/2359152</a>

本文转自 tongqiuyan  51CTO博客，原文链接:http://blog.51cto.com/tongqiuyan/698465