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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章