apache-flex - 在 Flex Datagrid 中添加分页的插件？

Question

是否有可以添加到 Flex 项目以将分页添加到 Flex Datagrid 的库或插件？

Answer 1

this paginated datagrid的源代码可以找到 here .

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="InitApp()" xmlns:MyComp="*">
<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.events.ItemClickEvent; 
        import mx.controls.Button;
        import mx.controls.Alert;

        [Bindable]
        public var myData:ArrayCollection = new ArrayCollection();
        public var orgData:ArrayCollection = new ArrayCollection();
        [Bindable]
        public var nav:ArrayCollection = new ArrayCollection();
        public var pageSize:uint = 10;
        public var navSize:uint = 10;
        private var index:uint = 0;
        private var navPage:uint = 1;

        private function InitApp():void
        {
            for( var x:uint = 1; x <= 500; x++ )
            {
                var obj:Object = new Object();
                obj.Id = x.toString();
                obj.Name = "Column " + x.toString();
                obj.Street = "5555 Street";
                obj.Title = "CEO";
                obj.City = "El Paso";

                orgData.addItem(obj);
            }
            refreshDataProvider(index);
            createNavBar(Math.ceil(orgData.length/pageSize));
        }

        private function createNavBar(pages:uint = 1,set:uint = 0):void
        {
            nav.removeAll();
            if( pages > 1 )
            {
                if( set != 0 )
                {
                    nav.addItem({label:"<<",data:0});
                    if( (set - navSize ) >= 0 )
                    {
                        nav.addItem({label:"<",data:set - navSize});
                    }
                    else
                    {
                        nav.addItem({label:"<",data:0});
                    }
                }

                for( var x:uint = 0; x < navSize; x++)
                {
                    var pg:uint = x + set;
                    nav.addItem({label: pg + 1,data: pg});
                }
                if( pg < pages - 1 )
                {
                    nav.addItem({label:">",data:pg + 1});
                    nav.addItem({label:">>",data:pages - pageSize});
                }
            }
        }

        private function navigatePage(event:ItemClickEvent):void
        {
            refreshDataProvider(event.item.data);
            var lb:String = event.item.label.toString();
            if( lb.indexOf("<") > -1 || lb.indexOf(">") > -1 )
            {
                createNavBar(Math.ceil(orgData.length/pageSize),event.item.data);
                if( event.item.data == 0 )
                {
                    pageNav.selectedIndex = 0;
                }
                else
                {
                    pageNav.selectedIndex = 2;
                }
            }

        }

        private function refreshDataProvider(start:uint):void
        {
            myData = new ArrayCollection( orgData.source.slice((start * pageSize),(start * pageSize) + pageSize) );
        }
    ]]>
</mx:Script>
<mx:VBox verticalGap="0">
    <mx:DataGrid id="dg" dataProvider="{myData}"></mx:DataGrid>
    <mx:ToggleButtonBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{nav}" width="{dg.width}"></mx:ToggleButtonBar>
</mx:VBox>

</mx:Application>