Flex动态显示列

发布时间：2020-12-15 04:23:41 所属栏目：百科来源：网络整理

导读：当DataGrid需要呈现N多列的时候，要么列显示不全都挤在一起，要么就出现横向的滚动条。这些感觉都不和谐。那么实现的方案有几种 1、给每列加个id，然后用别的控件（例如ComboBox）来控制每列显示，来开关列的显示和隐藏，类似js那样的做法，但那样代码量太

当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代码：

1 private?function?tileItemCheckBox(event:Event):void{

`2`	`????if(event.target.selected){`

`3`	`????????event.currentTarget.getRepeaterItem().visible=true;`

`4`	`????}else{`

`5`	`????????event.currentTarget.getRepeaterItem().visible=false;`

6 ????}

7 }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!