flex 动态隐藏列

最新推荐文章于 2023-01-10 20:56:57 发布

yqlx521

最新推荐文章于 2023-01-10 20:56:57 发布

阅读量3.9k

点赞数 1

分类专栏： flex 文章标签： flex datagrid function

本文链接：https://blog.csdn.net/yqlx521/article/details/7974700

版权

flex 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这个是有权限控制的时候控制那一列不再显示

var column : DataGridColumn = dataGrid.columns[dataGrid.columnCount-1];

column.visible = true;

下面这个是转载别人的需求不一，做法不一

原文地址：http://www.cnblogs.com/ping58/articles/1745579.html

当DataGrid需要呈现N多列的时候，要么列显示不全都挤在一起，要么就出现横向的滚动条。这些感觉都不和谐。

那么实现的方案有几种

1、给每列加个id，然后用别的控件（例如ComboBox）来控制每列显示，来开关列的显示和隐藏，类似js那样的做法，但那样代码量太大，写通用的方法也太麻烦了。

2、基于上面的方法考虑，可以灵活运用flex中数据绑定功能来自动实现上述的效果。

首先选择下需要实现效果的控件：DataGrid/Tile/Repeater/CheckBox

DataGrid:不讲了谁都知道干嘛的。

Tile：布局容器，容器内默认先横向布局，当宽度不够时自动换行。

Repeater：主要的玩意，官方解释根据其 dataProvider 创建其子组件的多个实例。

CheckBox：不知道的回家种地吧。

实现思路：

1、Tile中的Repeater绑定DataGrid中的columns。

　　a.了解到DataGrid中的columns是什么？没错是Array。

　　b.那也就是DataGrid中的columns可以直接给dataProvider提供数据绑定。也就是说Repeater.dataProvider和DataGrid.columns都是指向同一个Array，我喜欢叫共同使用同一数据源。哈哈

　　c.绑定后可以直接生成DataGrid列数的CheckBox控件了。

　　d.CheckBox中的可以通过Repeater的currentItem，来取到DataGrid的columns当前列的对象。

mxml代码：

 
        <mx:Tile width= 
        "98%" 
        borderColor= 
        "#ffffff" 
        paddingLeft= 
        "5" 
         horizontalGap= 
        "2" 
         verticalGap= 
        "2" 
        borderStyle= 
        "solid" 
        borderThickness= 
        "1" 
        cornerRadius= 
        "5" 
        >  
       
 
             
        <mx:Repeater id= 
        "rp" 
        dataProvider= 
        "{servir_config_DataGrid.columns}" 
        width= 
        "100%" 
        >  
       
 
                 
        <mx:CheckBox  
        label 
        = 
        "{rp.currentItem.headerText}" 
        selected= 
        "{rp.currentItem.visible}" 
        change= 
        "tileItemCheckBox(event)" 
        >                  
       
 
                 
        </mx:CheckBox>  
       
 
             
        </mx:Repeater>  
       
 
        </mx:Tile>  
       
 
        <mx:DataGrid id= 
        "servir_config_DataGrid" 
        alpha= 
        "0.3" 
         height= 
        "100%" 
        width= 
        "98%" 
        >  
       
 
             
        <mx:columns>  
       
 
                 
        <mx:DataGridColumn headerText= 
        "ID"  
        visible= 
        "false" 
         dataField= 
        "id" 
        />  
       
 
                 
        <mx:DataGridColumn headerText= 
        "姓名" 
        dataField= 
        "name" 
        />  
       
 
                 
        <mx:DataGridColumn headerText= 
        "性别" 
        dataField= 
        "sex" 
         />  
       
 
                 
        <mx:DataGridColumn headerText= 
        "年龄" 
        dataField= 
        "age" 
         />  
       
 
                 
        <mx:DataGridColumn headerText= 
        "收入" 
        dataField= 
        "income" 
        />  
       
 
             
        </mx:columns>           
       
 
        </mx:DataGrid> 
       

2、对CheckBox的change事件处理。

　　a.判断是否选中。

　　b.从事件中取到数据源中所需要操作的对象。event.currentTarget.getRepeaterItem()

　　c.改变显示。

as代码：

 
        private 
         function 
        tileItemCheckBox(event:Event): 
        void 
        {  
       
        if 
        (event.target.selected){  
       
        event.currentTarget.getRepeaterItem().visible= 
        true 
        ;  
       
        } 
        else 
        {  
       
        event.currentTarget.getRepeaterItem().visible= 
        false 
        ;  
       
        }  
       
        }