flex 4 datagrid 带有翻页功能的

ControlDataGrid.as

package component
{
    import flash.events.FocusEvent;
    import flash.events.MouseEvent;

    import mx.collections.ArrayCollection;
    import mx.controls.Alert;
    import mx.controls.DataGrid;
    import mx.controls.dataGridClasses.DataGridColumn;
    import mx.core.ScrollPolicy;
    import mx.core.UIComponent;

    import spark.components.Button;
    import spark.components.HGroup;
    import spark.components.Label;
    import spark.components.TextInput;
    import spark.components.VGroup;

    public class ControlDataGrid extends UIComponent
    {
        public function ControlDataGrid()
        {
            super();
        }

        //*********************************************************************************//
        //***************************** 　　　定数の定義　　　 ****************************//
        //*********************************************************************************//

        //*********************************************************************************//
        //***************************** 　　　変数の定義　　　 ****************************//
        //*********************************************************************************//
        private var pageArr:Array = new Array();
        private var maxPageNum:Number = 0;
        //*********************************************************************************//
        //***************************** 　　　component 　　　 ****************************//
        //*********************************************************************************//
        private var datagrid:DataGrid = new DataGrid();
        private var prePageButton:Button = new  Button();
        private var nextPageButton:Button = new Button();
        private var firstPageButton:Button = new Button();
        private var lastPageButton:Button = new Button();
        private var currentPageText:TextInput = new TextInput();
        private var currentPageLabel1:Label = new Label();
        private var currentPageLabel2:Label = new Label();
        private var currentPageHgroup:HGroup = new HGroup();
        private var mainVgroup:VGroup = new VGroup();

        //*********************************************************************************//
        //***************************** 　　　flgの定義　　　 ****************************//
        //*********************************************************************************//
        private var isInitComponent:Boolean = true;
        private var initComponentDraw:Boolean;
        private var arrcDataProviderChanged:Boolean;
        private var arrcDataProviderHeadTextChanged:Boolean;
        private var pageCountChanged:Boolean;
        private var dispByPageChanged:Boolean;
        private var dispCurrentPageChanged:Boolean;
        private var dispCurrentPageRedraw:Boolean;
        //*********************************************************************************//
        //*************************** 　propertyの定義　　　 ****************************//
        //*********************************************************************************//

        //datagrid dataprovider
        private var _arrcDataProvider:ArrayCollection = new ArrayCollection([
            {Name:"Tom", Phone:23579086, QQ:77788899, Software:"Flash"},
            {Name:"Kelly", Phone:33579080, QQ:56788823, Software:"Flex"},
            {Name:"Jim", Phone:83579085, QQ:56788882, Software:"Java"},
            {Name:"Sam", Phone:73579084, QQ:78988811, Software:"Dreamweaver"},
            {Name:"Kaiven", Phone:33576681, QQ:32188897, Software:"Photoshop"},

            {Name:"Gray", Phone:23229086, QQ:12388900, Software:"Fireworks"},
            {Name:"Luar",Phone:23579087,QQ:24681899, Software:"DAEMON Tools"},
            {Name:"Kite", Phone:85579082, QQ:68080894, Software:"FlashDevelop"},
            {Name:"Polar",Phone:32579086,QQ:21586899,Software:"BeyondCompare"},
            {Name:"Polar1",Phone:32579086,QQ:21586899,Software:"BeyondCompare1"},

            {Name:"Gray2", Phone:23229086, QQ:12388900, Software:"Fireworks"},
            {Name:"Luar2",Phone:23579087,QQ:24681899, Software:"DAEMON Tools"},
            {Name:"Kite2", Phone:85579082, QQ:68080894, Software:"FlashDevelop"},
            {Name:"Polar2",Phone:32579086,QQ:21586899,Software:"BeyondCompare"},
            {Name:"Polar2",Phone:32579086,QQ:21586899,Software:"BeyondCompare1"},

            {Name:"Polar3",Phone:32579086,QQ:21586899,Software:"BeyondCompare"},
            {Name:"Polar3",Phone:32579086,QQ:21586899,Software:"BeyondCompare1"}

        ]);
        public function set arrcDataProvider(value:ArrayCollection):void {
            if(value != _arrcDataProvider){
                _arrcDataProvider = value;
                arrcDataProviderChanged = true;
                this.invalidateProperties();
            }
        }
        public function get arrcDataProvider():ArrayCollection {
            return _arrcDataProvider;
        }

        //datagrid's headtext array
        private var _arrcDataProviderHeadText:Array = [new DataGridColumn("Name"), new DataGridColumn("Phone"), new DataGridColumn("QQ"), new DataGridColumn("Software")];
        public function set arrcDataProviderHeadText(value:Array):void {
            if(value != _arrcDataProviderHeadText){
                _arrcDataProviderHeadText = value;
                arrcDataProviderHeadTextChanged = true;
                this.invalidateProperties();
            }
        }
        public function get arrcDataProviderHeadText():Array {
            return _arrcDataProviderHeadText;
        }

        //datagrid's page count
        private var _pageCount:Number = 5;
        public function set pageCount(value:Number):void {
            if(value != _pageCount){
                _pageCount = value;
                pageCountChanged = true;
                this.invalidateProperties();
            }
        }
        public function get pageCount():Number {
            return _pageCount;
        }

        //display data by pages
        private var _dispByPage:Boolean = true;
        public function set dispByPage(value:Boolean):void {
            if(value != _dispByPage){
                _dispByPage = value;
                dispByPageChanged = true;
                this.invalidateProperties();
            }
        }
        public function get dispByPage():Boolean {
            return _dispByPage;
        }

        //display current page

        private var _dispCurrentPage:Number;

        [Bindable]
        public function set dispCurrentPage(value:Number):void {
            if(value != _dispCurrentPage){
               _dispCurrentPage = value;
                dispCurrentPageChanged = true;
                this.invalidateProperties();
            }
        }
        public function get dispCurrentPage():Number {
            return _dispCurrentPage;
        }

        //*********************************************************************************//
        //************************ 　　　override実現の方法　　　　 ***********************//
        //*********************************************************************************//

        /**
         * レーベルの高さ、幅をセットする。（必須）
         *
         */
        override protected function measure():void{
            super.measure();
//            measuredHeight = 40;
//            measuredWidth = 40;
        }

        /**
         * それぞれコンポーネントを増加する（必須）
         *
         */
        override protected function createChildren():void{
            super.createChildren();
//            addChild(icon);
        }

        /**
         * フラグでそれぞれ事件を実行する（必須）
         *
         */
        override protected function commitProperties():void{
            super.commitProperties();
            if(isInitComponent){
                isInitComponent = false;
                initComponentDraw = true;
                arrcDataProviderChanged = false;
                arrcDataProviderHeadTextChanged = false;
                pageCountChanged = false;
                dispByPageChanged = false;
                dispCurrentPageChanged = false;
                dispCurrentPageRedraw = false;
                invalidateDisplayList();
            }

            if(dispCurrentPageChanged){
                dispCurrentPageChanged = false;
                dispCurrentPageRedraw = true;
                invalidateDisplayList();
            }

        }

        /**
         * フラグでそれぞれレイアウトが描画する（必須）
         *
         */
        override protected function updateDisplayList(w:Number,h:Number):void{
            super.updateDisplayList(w,h);
            if(initComponentDraw){
                initComponentDraw = false;
                initComponet(w,h);
            }

            if(dispCurrentPageRedraw){
                dispCurrentPageRedraw = false;
                chansferToPage();
            }
        }

        //*********************************************************************************//
        //*************************** 　　　業務実現の方法　　　 **************************//
        //*********************************************************************************//
        private function initComponet(w:Number,h:Number):void{
            if( (_arrcDataProvider.length % _pageCount) == 0){
                maxPageNum = _arrcDataProvider.length / _pageCount;
            }else{
                maxPageNum = int(_arrcDataProvider.length / _pageCount) + 1;
            }
            //
            datagrid = new DataGrid();

            //
            datagrid.move(20,20);
            //
            datagrid.setActualSize(350, 125);
            datagrid.verticalScrollPolicy = ScrollPolicy.AUTO;
            //
            datagrid.columns = _arrcDataProviderHeadText;

            //display data by page
            if(_dispByPage){
                drawDataGridWithPage();
            }else{
                drawDataGridAll();
            }
            mainVgroup.setActualSize(380,150);
            addChild(mainVgroup);
        }

        /**
         * draw datagrid by pagecount with page button
         *
         */
        private function drawDataGridWithPage():void{
            pageArr = _arrcDataProvider.toArray().slice(0,_pageCount);
            _dispCurrentPage = 1;
            //bing the data per page
            bindDataGrid(pageArr);

            mainVgroup.addElement(datagrid);
//            addChild(datagrid);

            prePageButton.label = "PrePage";
            prePageButton.addEventListener(MouseEvent.CLICK,onPrePageButtonClickHandle);
//            addChild(prePageButton);

            nextPageButton.label = "nextPage";
            nextPageButton.addEventListener(MouseEvent.CLICK,onNextPageButtonClickHandle);
//            addChild(nextPageButton);

            firstPageButton.label = "firstPage";
            firstPageButton.addEventListener(MouseEvent.CLICK,onFirstPageButtonClickHandle);
//            addChild(firstPageButton);

            lastPageButton.label = "lastPage";
            lastPageButton.addEventListener(MouseEvent.CLICK,onLastPageButtonClickHandle);
//            addChild(lastPageButton);

            setPageButtonEnable();

            currentPageHgroup.addElement(firstPageButton);
            currentPageHgroup.addElement(prePageButton);

            currentPageLabel1.text = "第";
            currentPageHgroup.addElement(currentPageLabel1);

            currentPageText.text = dispCurrentPage.toString();
            currentPageText.addEventListener(FocusEvent.FOCUS_OUT,onCurrentPageTextFocusOutEventHandle);
            currentPageText.maxChars = 3;
            currentPageText.restrict = "0-9"
            currentPageText.width = 30;

            currentPageHgroup.addElement(currentPageText);

            currentPageLabel2.text = "ページ";
            currentPageHgroup.addElement(currentPageLabel2);

            currentPageHgroup.addElement(nextPageButton);
            currentPageHgroup.addElement(lastPageButton);

            mainVgroup.addElement(currentPageHgroup);

        }

 

        /**
         * draw datagrid all without page
         *
         */
        private function drawDataGridAll():void{
            pageArr = _arrcDataProvider.toArray();
            //bing the data all
            bindDataGrid(pageArr);
            mainVgroup.addElement(datagrid);
        }

        /**
         * bind the data to datagrid
         * @param pageArr
         *
         */
        private function bindDataGrid(pagearr:Array):void{
            // bind the data per page
            var dataprovider:ArrayCollection = new ArrayCollection();
            datagrid.dataProvider = dataprovider;
            var i:int = 0;
            for(i=0; i<pagearr.length; i++)
            {
                dataprovider.addItem(pagearr[i]);
            }
        }

        private function setPageButtonEnable():void{
            if(_dispCurrentPage == 1){
                prePageButton.enabled = false;
                firstPageButton.enabled = false;
                nextPageButton.enabled = true;
                lastPageButton.enabled = true;
            }

            if(_dispCurrentPage == maxPageNum){
                nextPageButton.enabled = false;
                lastPageButton.enabled = false;
                prePageButton.enabled = true;
                firstPageButton.enabled = true;
            }

        }

        private function chansferToPage():void{

            if(_dispCurrentPage == 0){
                Alert.show("please input valid pageNo 0 is invalid");
            }else if(_dispCurrentPage == 1){
                onFirstPageButtonClickHandle(null);
            }else if(_dispCurrentPage  == (maxPageNum)){
                onLastPageButtonClickHandle(null);
            }else if(_dispCurrentPage  > (maxPageNum)){
                Alert.show("please input valid pageNo, max page no is " +  maxPageNum +"" );
            }else{
                pageArr = _arrcDataProvider.toArray().slice((dispCurrentPage -1) * _pageCount,dispCurrentPage * _pageCount);
                bindDataGrid(pageArr);
                setPageButtonEnable();
            }
        }

        //*********************************************************************************//
        //*************************** 　　　event実現の方法　　　 *************************//
        //*********************************************************************************//
        private function onPrePageButtonClickHandle(event:MouseEvent):void{
            pageArr = _arrcDataProvider.toArray().slice((_dispCurrentPage-2) * _pageCount, (_dispCurrentPage - 1)  * _pageCount);
            bindDataGrid(pageArr);
            _dispCurrentPage --;
            setPageButtonEnable();
            currentPageText.text = _dispCurrentPage.toString();
        }

        private function onNextPageButtonClickHandle(event:MouseEvent):void{
            pageArr = _arrcDataProvider.toArray().slice( _dispCurrentPage * _pageCount,(_dispCurrentPage + 1) * _pageCount);
            bindDataGrid(pageArr);
            _dispCurrentPage ++;
            setPageButtonEnable();
            currentPageText.text = _dispCurrentPage.toString();
        }

        private function onFirstPageButtonClickHandle(event:MouseEvent):void{
            pageArr = _arrcDataProvider.toArray().slice(0,_pageCount);
            bindDataGrid(pageArr);
            _dispCurrentPage = 1;
            setPageButtonEnable();
            currentPageText.text = _dispCurrentPage.toString();
        }

        private function onLastPageButtonClickHandle(event:MouseEvent):void{
            _dispCurrentPage = maxPageNum;
            pageArr = _arrcDataProvider.toArray().slice((_dispCurrentPage -1) * _pageCount,_arrcDataProvider.toArray().length);
            bindDataGrid(pageArr);
            setPageButtonEnable();
            currentPageText.text = _dispCurrentPage.toString();
        }

        private function onCurrentPageTextFocusOutEventHandle(event:FocusEvent):void{
            dispCurrentPage =Number( ( event.currentTarget as TextInput ).text);
        }

    }
}