FLEX

FLEX代码实现弹出框，对数据进行分页显示

实现思想

flex实现数据分页显示的思想：将所有数据都查询出来存储在一个数据集合propertiesAry中，然后对数据进行分批次显示在datagrid中（通过for循环进行筛选显示）
引用包不用再添加，按住alt+/健进行自动生成

具体代码实现部分

（1）生成弹出框，并进行初始化

首先定义生成弹出框，selected_arr控制生成的NavigatorContent数量，假设查询到的数据集合为value；代码如下：

定义的变量如下

private var COL_datagrid:DataGrid=null;// 当前需要显示的记录[Bindable]private var mypagedata:ArrayCollection = new ArrayCollection();private var selected_arr:ArrayCollection=new ArrayCollection();private  var title_Win:TitleWindow=new TitleWindow();private var Tab_Content_view_col:ArrayCollection=new ArrayCollection();[Bindable]public var columns:Array; // 数据集合public var dataProvider:ArrayCollection; // 所有数据public var pageCount:int =10;// 每页包含的记录数，默认10条public var curPage:int; // 当前页码public var totalPage1:int; // 总页数public var totalCount:int; // 总记录条数

     //存储所有数据     private var propertiesAry:ArrayCollection=value;     //生成弹出框结果titleWindow     var title_Win:TitleWindow=new TitleWindow();     title_Win.width=620;     title_Win.height=286;     title_Win.title="数据显示";     title_Win.x=(this.parentApplication.width-title_Win.width)/2;     title_Win.y=(this.parentApplication.height-title_Win.height)/2;     title_Win.setStyle("borderColor","#CCCCCC");    //为弹出框添加TabNavigator控件      var Tab_Container:TabNavigator=new TabNavigator();      title_Win.addElement(Tab_Container);        Tab_Container.width=598;     Tab_Container.height=200;       Tab_Container.left=10;     Tab_Container.setStyle("borderVisible",true);     var my_coll:ArrayCollection=new ArrayCollection();     var Tab_Content_view:NavigatorContent=null;         //tab选择产生变化时的触发事件       Tab_Container.addEventListener(IndexChangedEvent.CHANGE,show_content);     Tab_Content_view_col=new ArrayCollection();     try{         for(var q:int=0;q<selected_arr.length;q++)         {                if(selected_arr[q].hasOwnProperty('layerName')){                 Tab_Content_view=new NavigatorContent();                    Tab_Container.addElement(Tab_Content_view);                 Tab_Content_view.label=selected_arr[q].layerName;                 Tab_Content_view.id=selected_arr[q].layerName;                 Tab_Content_view.percentHeight=80;                 Tab_Content_view.percentWidth=100;              }             else if(selected_arr[q].hasOwnProperty('name')){                 Tab_Content_view=new NavigatorContent();                    Tab_Container.addElement(Tab_Content_view);                 Tab_Content_view.label=selected_arr[q]['name'];                 Tab_Content_view.id=selected_arr[q]['name'];                 Tab_Content_view.percentHeight=80;                 Tab_Content_view.percentWidth=100;                  }                                     Tab_Content_view_col.addItem(Tab_Content_view);         }      }     catch(e:ErrorEvent){     }    //添加分页功能组件     var Tab_HBox:HBox=new HBox();       title_Win.addElement(Tab_HBox);         Tab_HBox.top=210;     Tab_HBox.left=30;     var Tab_label:mx.controls.Label=new mx.controls.Label();             Tab_label.text="第 0 页/共 0 页";     Tab_label.id="pagedetail";     Tab_label.name="pagedetail";     var Tab_LinkButton0:LinkButton=new LinkButton();     Tab_LinkButton0.label="首页";     Tab_LinkButton0.addEventListener(MouseEvent.CLICK,page_click0);     var Tab_LinkButton1:LinkButton=new LinkButton();     Tab_LinkButton1.label="上一页";     Tab_LinkButton1.addEventListener(MouseEvent.CLICK,page_click1);     var Tab_LinkButton2:LinkButton=new LinkButton();      Tab_LinkButton2.label="下一页";     Tab_LinkButton2.addEventListener(MouseEvent.CLICK,page_click2);     var Tab_LinkButton3:LinkButton=new LinkButton();     Tab_LinkButton3.label="末页";     Tab_LinkButton3.addEventListener(MouseEvent.CLICK,page_click3);     var Tab_NumericStepper:NumericStepper=new NumericStepper();     Tab_NumericStepper.id="inputpage";     Tab_NumericStepper.name="inputpage";     Tab_NumericStepper.stepSize=1;     Tab_NumericStepper.minimum=0;     Tab_NumericStepper.maximum=0;     var Tab_LinkButton4:LinkButton=new LinkButton();     Tab_LinkButton4.label="跳转";     Tab_LinkButton4.addEventListener(MouseEvent.CLICK,page_click4);     Tab_HBox.addElement(Tab_label);     Tab_HBox.addElement(Tab_LinkButton0);     Tab_HBox.addElement(Tab_LinkButton1);     Tab_HBox.addElement(Tab_LinkButton2);     Tab_HBox.addElement(Tab_LinkButton3);     Tab_HBox.addElement(Tab_NumericStepper);     Tab_HBox.addElement(Tab_LinkButton4);     //生成首页窗     PopUpManager.addPopUp(title_Win,this);     //添加关闭窗口功能     title_Win.addEventListener(CloseEvent.CLOSE,removeWin);       //分页初始化值     totalCount = propertiesAry.length;    totalPage1 = (totalCount + pageCount -1)/pageCount;    setPager(0);        var inputpage:NumericStepper=(title_Win.getElementAt(1) as HBox).getElementAt(5) as NumericStepper;    inputpage.minimum=1;    inputpage.maximum= totalPage1;  

（2）实现分页的组件的click事件功能，代码如下：

public function setPager(value:int):void{    if(value <0 || (value+1)>totalPage1){        return;    }    curPage = value;    //获取弹出框中的的组件    var pagedetail:mx.controls.Label=(title_Win.getElementAt(1) as HBox).getElementAt(0) as mx.controls.Label;    var temp:int=curPage+1;    pagedetail.text = "第 "+temp+" 页/共 "+totalPage1+" 页 共 "+totalCount+" 条记录";    dataGrid_BIND(curPage);}

（3）生成dataGrid表格，并填充数据，代码如下：

//生成dataGrid表格，并填充数据private function dataGrid_BIND(temp:int):void{     if(null != propertiesAry && propertiesAry.length > 0) {     COL_datagrid=new DataGrid();     var columns_:Array=new Array();     var col_list:ArrayCollection=new ArrayCollection();         COL_datagrid.alpha=0.72;     COL_datagrid.percentHeight=100;     COL_datagrid.percentWidth=100;     COL_datagrid.addEventListener(ListEvent.ITEM_CLICK,bufclickHandler);        //数据填充     var q_count:int=(((temp+1)*10)>propertiesAry.length)?propertiesAry.length:(temp+1)*10;     for(var j:int=temp*10;j<q_count;j++){          var tempAttr:Object=propertiesAry[j].properties;         tempAttr["datagrid_Id"]=j;           col_list.addItem(tempAttr);     }      COL_datagrid.dataProvider=col_list;     for(var i:* in col_list[0]){         var col_umns:DataGridColumn=new DataGridColumn(i);            columns_.push(col_umns);     }     COL_datagrid.columns=columns_;       navigator.addElement(COL_datagrid);     }     else{         ling_export();//数据集为空执行     }     if(propertiesAry.length==0){         var datagrid_label:mx.controls.Label=new mx.controls.Label();         datagrid_label.text="查询结果为空！";         navigator.addElement(datagrid_label);     }}

（4）对应按钮功能的实现

public function page_click0(event:MouseEvent):void{    if(propertiesAry==null){    return;    }    else{        setPager(0);    }}public function page_click1(event:MouseEvent):void{    if(propertiesAry==null){        return;    }    else{    setPager(curPage - 1);    }}public function page_click2(event:MouseEvent):void{    if(propertiesAry==null){        return;    }    else{    setPager(curPage + 1);    }}public function page_click3(event:MouseEvent):void{    if(propertiesAry==null){        return;    }    else{    setPager(totalPage1 - 1);    }}public function page_click4(event:MouseEvent):void{    if(propertiesAry==null){        return;    }    else{    var inputpage1:NumericStepper=(title_Win.getElementAt(1) as HBox).getElementAt(5) as NumericStepper;    setPager(inputpage1.value - 1);    }}

（5）数据集合为空时，显示的按钮值和功能的填充：

private function ling_export():void{    totalCount = 0;    totalPage = 0;    curPage = 0;    var inputpage1:NumericStepper=(title_Win.getElementAt(1) as HBox).getElementAt(5) as NumericStepper;    inputpage1.minimum=0;    inputpage1.maximum= 0;    var pagedetail:mx.controls.Label=(title_Win.getElementAt(1) as HBox).getElementAt(0) as mx.controls.Label;    pagedetail.text = "第 0 页/共 0 页 共 0 条记录";         }

（6）弹出框关闭窗口的功能实现，代码如下：

//关闭窗口private function removeWin(e:Event):void{    PopUpManager.removePopUp(title_Win);}

（7）其他tab标签的触发事件

//其他标签的触发事件private function show_content(event:IndexChangedEvent):void{  //获取新的propertiesAry数据集合数据}

执行结果图如下：