flex 动态隐藏列

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

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代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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代码:

?
1
2
3
4
5
6
7
private function tileItemCheckBox(event:Event): void {
     if (event.target.selected){
         event.currentTarget.getRepeaterItem().visible= true ;
     } else {
         event.currentTarget.getRepeaterItem().visible= false ;
     }
}

其实实现起来挺简单的,就是理解思路上有点绕,主要是共同使用同一数据源的概念,flex中这样能很方便的实现在一个控件中操作另一控件。

 

效果如下:



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值