分页代码

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()" xmlns:local="*">
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    <fx:Declarations>
        
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            private function initData():void
            {
                this.pbar.dataGroup=dg1;
                this.pbar.orgData=arr;
                this.pbar.dataBind();
            }

            private var arr:ArrayCollection = new ArrayCollection([
                {A:1, B:20, selected:false, label:"one"},
                {A:2, B:20, selected:false, label:"two"},
                {A:3, B:20, selected:true, label:"three"},
                {A:4, B:20, selected:true, label:"four"},
                {A:5, B:20, selected:true, label:"five"},
                {A:6, B:20, selected:true, label:"six"},
                {A:7, B:20, selected:true, label:"seven"},
                {A:8, B:20, selected:true, label:"eight"},
                {A:9, B:20, selected:true, label:"nine"},
                {A:10, B:20, selected:true, label:"ten"},
                {A:11, B:20, selected:true, label:"Hello"},
                {A:12, B:20, selected:true, label:"Hello"},
                {A:13, B:20, selected:true, label:"Hello"},
                {A:14, B:20, selected:true, label:"Hello"},
                {A:15, B:20, selected:true, label:"Hello"},
                {A:16, B:20, selected:false, label:"Hello"},
                {A:17, B:20, selected:false, label:"Hello"},
                {A:18, B:20, selected:true, label:"seven"},
                {A:19, B:20, selected:true, label:"eight"},
                {A:20, B:20, selected:true, label:"nine"},
                {A:21, B:20, selected:true, label:"ten"},
                {A:22, B:20, selected:true, label:"Hello"},
                {A:23, B:20, selected:true, label:"Hello"},
                {A:24, B:20, selected:true, label:"Hello"},
                {A:25, B:20, selected:true, label:"Hello"},
                {A:26, B:20, selected:true, label:"Hello"},
                {A:27, B:20, selected:false, label:"Hello"},
                {A:28, B:20, selected:false, label:"Hello"}
            ]);
        ]]>
    </fx:Script>

    <s:Panel>
        <s:DataGroup id="dg1" x="57" y="19" creationComplete="initData()" itemRenderer="userRenderer">
            <s:layout>
                <s:VerticalLayout />
            </s:layout>
        </s:DataGroup>

        <local:PagingBar id="pbar" x="10" y="218" width="674">
        </local:PagingBar>
    </s:Panel>
</s:Application>

PagingBar.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:HGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx" fontSize="12" paddingTop="2">
    <fx:Declarations>
        
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.controls.DataGrid;
            import mx.events.ItemClickEvent;

            import spark.components.DataGroup;

            private var firstPage:uint;
            private var prePage:uint;
            private var nextPage:uint;
            private var lastPage:uint;

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

            //分页条对应的Grid
            public var dataGroup:DataGroup=null;
            //默认起始页码,第1页
            private var currentPageIndex:uint = 0;
            //每页记录数
            public var pageSize:uint = 10;
            //总页数
            private var totalPages:uint = 0;
            //所有的数据
            public var orgData:ArrayCollection=null;
            //分页函数
            public var pagingFunction:Function=null;
            //是否重绘页码条，当使用服务端分页时使用
            private var isCreateNavBar:Boolean = true;
            //显示到Grid的数据
            [Bindable]
            public var viewData:ArrayCollection=null;
            //记录总数，调用服务端发页时使用
            public var totalRecord:int=0;
            //页码条数据,绑定
            [Bindable]
            private var nav:ArrayCollection = new ArrayCollection();
            // 页码条上显示页码的个数
            public var navSize:uint = 3;
            //每页记录数下拉框
            public var pageSizeDropDownListData:ArrayCollection=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;
                    pageSizeComobox.selectedIndex=1;
                    isInit=false;
                }
                refreshDataProvider(currentPageIndex,isCreateNavBar,pageSize,isServerSide);
            }

            /**
             * 页码按钮按下,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(dataGroup==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) );
                        dataGroup.dataProvider=viewData;
                        pageNumber.text=(pageIndex+1).toString();
                        totalRecordLabel.text = '总记录数：' + orgData.length.toString();
                    }
                }
                else
                {
                    dataGroup.dataProvider=orgData;
                    totalPages = Math.ceil(totalRecord/pageSize);
                    pageNumber.text=(pageIndex+1).toString();
                    totalRecordLabel.text = '总记录数：' + totalRecord.toString()
                }
                totalPagesLabel.text = '总页数：' + totalPages;
                if(isCreateNavBar) createNavBar(pageIndex);
            }

            /**
             * 构建页码条
             * 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);
            }

            /**
             * 每页记录数变更（下拉框选择）
             */
            private function pageSizeSelectChange():void
            {
                refreshDataProvider(0,true,uint(pageSizeComobox.selectedItem.data));
            }

            /**
             * 页码变更（直接输入）
             */
            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);
            }
        ]]>
    </fx:Script>
    <s:Label paddingTop="3" id="totalPagesLabel" color="#FA1F02" />
    <s:Label paddingTop="3" id="totalRecordLabel" color="#FA0213" />
    <s:Button id="firstNavBtn" label="首页" width="70" height="20" click="navigateButtonClick('firstPage');" />
    <s:Button id="preNavBtn" label="上一页" width="70" height="20" click="navigateButtonClick('prePage');"/>
    <mx:LinkBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{nav}" height="26"/>
    <s:Button id="nextNavBtn" label="下一页" width="70" height="20" click="navigateButtonClick('nextPage');"/>
    <s:Button id="lastNavBtn" label="尾页" width="70" height="20" click="navigateButtonClick('lastPage');"/>
    <s:Label paddingTop="3" text="每页记录:"/>
    <s:ComboBox id="pageSizeComobox" cornerRadius="0" paddingLeft="0" fontWeight="normal" width="50" change="pageSizeSelectChange()" />
    <s:Label paddingTop="3" text="页码:"/>
    <s:TextInput id="pageNumber" width="40" keyDown="pageIndexInsertChange(event);" />
    <mx:LinkButton id="viewAllLinkBtn" label="查看所有" click="viewAll();"/>

</s:HGroup>

userRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                autoDrawBackground="true">

    <s:Label text="{data.A}"/>

</s:ItemRenderer>

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:file="file.*" xmlns:local="*">

<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable]
        private var arr:ArrayCollection = new ArrayCollection([
          {A:1, B:20, selected:false, label:"one"},
          {A:2, B:20, selected:false, label:"two"},
          {A:3, B:20, selected:true, label:"three"},
          {A:4, B:20, selected:true, label:"four"},
          {A:5, B:20, selected:true, label:"five"},
          {A:6, B:20, selected:true, label:"six"},
          {A:7, B:20, selected:true, label:"seven"},
          {A:8, B:20, selected:true, label:"eight"},
          {A:9, B:20, selected:true, label:"nine"},
          {A:10, B:20, selected:true, label:"ten"},
          {A:11, B:20, selected:true, label:"Hello"},
          {A:12, B:20, selected:true, label:"Hello"},
          {A:13, B:20, selected:true, label:"Hello"},
          {A:14, B:20, selected:true, label:"Hello"},
          {A:15, B:20, selected:true, label:"Hello"},
          {A:16, B:20, selected:false, label:"Hello"},
          {A:17, B:20, selected:false, label:"Hello"},
          {A:18, B:20, selected:true, label:"seven"},
          {A:19, B:20, selected:true, label:"eight"},
          {A:20, B:20, selected:true, label:"nine"},
          {A:21, B:20, selected:true, label:"ten"},
          {A:22, B:20, selected:true, label:"Hello"},
          {A:23, B:20, selected:true, label:"Hello"},
          {A:24, B:20, selected:true, label:"Hello"},
          {A:25, B:20, selected:true, label:"Hello"},
          {A:26, B:20, selected:true, label:"Hello"},
          {A:27, B:20, selected:false, label:"Hello"},
          {A:28, B:20, selected:false, label:"Hello"}
        ]);


        private function initData():void
        {
            this.pbar.dataGrid=dg2;
            this.pbar.orgData=arr;
            this.pbar.dataBind();
        }
    ]]>
</mx:Script>

<mx:Panel width="704" height="296" layout="absolute">
  <mx:DataGrid id="dg2" x="10" y="10" width="432" height="200" creationComplete="initData()">
   <mx:columns>
    <mx:DataGridColumn headerText="Column 1" dataField="A"/>
    <mx:DataGridColumn headerText="Column 2" dataField="B"/>
    <mx:DataGridColumn headerText="Column 3" dataField="label"/>
   </mx:columns>
  </mx:DataGrid>

  <local:PagingBar id="pbar" x="10" y="218" width="674">
  </local:PagingBar>
</mx:Panel>
</mx:Application>

PagingBar.mxml

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

        private var firstPage:uint;
        private var prePage:uint;
        private var nextPage:uint;
        private var lastPage:uint;

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

        //分页条对应的Grid
        public var dataGrid:DataGrid=null;
        //默认起始页码,第1页
        private var currentPageIndex:uint = 0;
        //每页记录数
        public var pageSize:uint = 10;
        //总页数
        private var totalPages:uint = 0;
        //所有的数据
        public var orgData:ArrayCollection=null;
        //分页函数
        public var pagingFunction:Function=null;
        //是否重绘页码条，当使用服务端分页时使用
        private var isCreateNavBar:Boolean = true;
        //显示到Grid的数据
        [Bindable]
        public var viewData:ArrayCollection=null;
        //记录总数，调用服务端发页时使用
        public var totalRecord:int=0;
        //页码条数据,绑定
        [Bindable]
        private var nav:ArrayCollection = new ArrayCollection();
        // 页码条上显示页码的个数
        public var navSize:uint = 3;
        //每页记录数下拉框
        public var pageSizeDropDownListData:ArrayCollection=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;
                pageSizeComobox.selectedIndex=1;
                isInit=false;
            }
            refreshDataProvider(currentPageIndex,isCreateNavBar,pageSize,isServerSide);
        }

        /**
        * 页码按钮按下,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);
        }

        /**
        * 构建页码条
        * 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);
        }

        /**
        * 每页记录数变更（下拉框选择）
        */
        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:Label paddingTop="3" id="totalPagesLabel" text="" color="#FA1F02"/>
    <mx:Label paddingTop="3" id="totalRecordLabel" text="" color="#FA0213"/>
    <mx:Button id="firstNavBtn" label="F" width="20" height="20" click="navigateButtonClick('firstPage');" />
    <mx:Button id="preNavBtn" label="pre" width="20" height="20" click="navigateButtonClick('prePage');"/>
    <mx:LinkBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{nav}" height="26"/>
    <mx:Button id="nextNavBtn" label="next" width="20" height="20" click="navigateButtonClick('nextPage');"/>
    <mx:Button id="lastNavBtn" label="last" width="20" height="20" click="navigateButtonClick('lastPage');"/>
    <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>

CoderWayne

公告