Flex使用Repeater创建checkbox组

原创于 2010-08-24 16:06:32 发布 · 102 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flex

Flex 专栏收录该内容

197 篇文章

订阅专栏

本文介绍了一种使用Flex中的Repeater组件来创建Checkbox组的方法，并实现默认选中某些项的功能。通过绑定数据源和监听事件，可以方便地管理用户的选择状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Repeater创建checkbox组并默认选中给出选中的结果

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white" creationComplete="init()">

<mx:Style>
Alert {
backgroundAlpha: 0.8;
backgroundColor: black;
borderAlpha: 0.8;
borderColor: black;
}
</mx:Style>

<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.controls.RadioButton;
import mx.collections.ArrayCollection;
//定义 Repeater要绑定的数据即用来添加checkbox 模拟所有的操作
private var roleFields:ArrayCollection = new ArrayCollection([{name:"编号",field:"id",link:"false"}
,{name:"角色名",field:"roleName",link:"true"}
,{name:"操作",field:"删除角色",link:"false"}]);
//默认选择的checkbox的集合模拟用户有的操作
private var role:ArrayCollection = new ArrayCollection([{name:"编号",field:"id",link:"false"}
,{name:"操作",field:"删除角色",link:"false"}]);
//全选操作
private function selectAll(event:Event):void {
var target:CheckBox = event.currentTarget as CheckBox;
var i:uint;
if(target.selected){

for(i=0;i<roleFields.length;i++) {
checkBox[i].selected=true;
}
}else {
for(i=0;i<roleFields.length;i++) {
checkBox[i].selected=false;
}
}
}
private function init():void {
if(role != null && roleFields != null) {
//当前角色所拥有的操作的循环
for(var i:uint=0;i<role.length;i++){
//所有的操作的循环
for(var j:uint=0;j<roleFields.length;j++){
//如果checkbox的data是当前角色拥有的操作的id则check选中
if(role[i].field == checkBox[j].data){
checkBox[j].selected=true;
}
}
}
}
}
//选择的内容
private function selectedContext():void {
var context:String = "";
if(roleFields != null ) {
for(var i:uint=0;i<roleFields.length;i++) {
//如果checkbox被选中把选中的内容记录下来
if(checkBox[i].selected) {
context = context+","+checkBox[i].data;
}
}
}
Alert.show(context);
}
]]>
</mx:Script>

<mx:Array id="arr">
<mx:Object label="Red" data="red" />
<mx:Object label="Orange" data="haloOrange" />
<mx:Object label="Yellow" data="yellow" />
<mx:Object label="Green" data="haloGreen" />
<mx:Object label="Blue" data="haloBlue" />
</mx:Array>

<mx:Panel id="panel" width="50%" paddingLeft="10" verticalGap="10">
<mx:Repeater id="checkBoxRepeater" dataProvider="{roleFields}">
<mx:CheckBox id="checkBox"
label="{checkBoxRepeater.currentItem.name}"
data="{checkBoxRepeater.currentItem.field}"
/>
</mx:Repeater>
<mx:ControlBar horizontalAlign="right">
<mx:CheckBox label="全选" click="selectAll(event)" selected="false"/>
<mx:Button id="button" label="Click me" click="selectedContext()"/>
</mx:ControlBar>
</mx:Panel>

</mx:Application>