Flex使用Repeater创建checkbox组

使用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>

本文以上转自：http://biancheng.dnbcw.info/flash/184624.html

====================================================================

//询grid显示列表权限list回调函数
private function getGridroleListHandler(result:Object):void {
 if (null == result) {
  this.checkBox.selected = true;
  return;
 }
 gridbean = result as DbGridrole;
 //得到当前登录人所拥有的权限
 var gridrole:String = gridbean.gridrole;
 if (!AdvancedStringUtil.isNull(gridrole)) {
  role = gridrole.split(',');
  gridinit(); //表格初始化
 }
}

/**
 *表格初始化
 **/
private function gridinit():void {
 var selectedstr:String = "";
 var unselectedstr:String = "";
 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] == checkBox[j].data) {
     checkBox[j].selected = true;
     selectedstr = selectedstr + "," + j;
     break;
    }
   }
  }
 }

 var rolearray:Array = selectedstr.substr(1, selectedstr.length).split(',');
 //循环选中的grid列
 for (var z:uint = 0; z < rolearray.length; z++) {
  grid.columns[rolearray[z]].visible = true;
 }

 var unselectedarray:Array = new Array(); //= unselectedstr.substr(1, unselectedstr.length).split(',');
 //循环选中的grid列得到未被选中的gird列数组
 for (var z:uint = 0; z < roleFields.length; z++) {
  unselectedarray.push(z);
 }
 var pos:int = 0;
 for (var t:uint = 0; t < rolearray.length; t++) {
  for (var j:uint = 0; j < roleFields.length; j++) {

   if (j == rolearray[t]) {
    pos = unselectedarray.indexOf(j); //得到以选中元素在数组中的位置
    unselectedarray.splice(pos, 1); //删除该元素
   }
  }
 }
 //把未被选中的grid列设为隐藏
 for (var k:uint = 0; k < unselectedarray.length; k++) {
  grid.columns[unselectedarray[k]].visible = false;
 }
}

//选择的内容
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;
   }
  }
 }
 selectedCheckbox = context.substr(1, context.length);
 gridbean.person = userid;
 gridbean.mgrPath = mgrPath;
 gridbean.gridrole = selectedCheckbox;
 //保存表格设置
 PaymentAction.saveGridroleInfo(gridbean);
}

/**
 * grid设置checkbox选中函数
 */
private function tileItemCheckBox(event:Event):void {
 if (event.target.selected) {
  event.currentTarget.getRepeaterItem().visible = true;
 } else {
  event.currentTarget.getRepeaterItem().visible = false;
 }
}

/**
 * 保存grid设置信息回调函数
 */
private function saveGridroleInfoHandler(result:Object):void {
 var returnCode:int = int(result);
 if (returnCode == 0) {
  Alert.show("保存设置成功！", "提示信息");
  this.queryAction();
 } else if (returnCode == -1) {
  Alert.show("保存设置失败！", "错误信息");
 }
}

===================================================================

 <mx:Tile width="98%"
     height="45"
     borderColor="#ffffff"
     paddingLeft="5"
     horizontalGap="1"
     verticalGap="1"
     borderStyle="solid"
     borderThickness="1"
     cornerRadius="5">
   <mx:Repeater id="rp"
       dataProvider="{grid.columns}"
       width="100%">
    <mx:CheckBox id="checkBox"
        label="{rp.currentItem.headerText}"
        data="{rp.currentItem.headerText}"
        change="tileItemCheckBox(event)">
    </mx:CheckBox>
   </mx:Repeater>
  </mx:Tile>