FLEX

最新推荐文章于 2023-06-16 14:25:52 发布

Foodiegirl_Hui

最新推荐文章于 2023-06-16 14:25:52 发布

阅读量634

点赞数

分类专栏： FLEX 文章标签：分页弹出框显示 flex datagrid

本文链接：https://blog.csdn.net/EatgirlHui_Unique/article/details/45310881

版权

FLEX 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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数据集合数据
}

执行结果图如下：

这里写图片描述

Foodiegirl_Hui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
FLEX

FLEX代码实现弹出框，对数据进行分页显示实现思想flex实现数据分页显示的思想：将所有数据都查询出来存储在一个数据集合propertiesAry中，然后对数据进行分批次显示在datagrid中（通过for循环进行筛选显示）具体代码实现部分（1）生成弹出框，并进行初始化首先定义生成弹出框，selected_arr控制生成的NavigatorContent数量，假设查询到的数据集合为value；代码如
复制链接

扫一扫