flex datagrid checkbox选中项目

时间:2023-03-09 17:10:47
flex datagrid checkbox选中项目

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
   xmlns:s="library://ns.adobe.com/flex/spark"  
   xmlns:mx="library://ns.adobe.com/flex/mx"> 
 
 <fx:Script> 
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   
   //数据源
   [Bindable]
   private var dsObjects:ArrayCollection = new ArrayCollection([
    {flag:false,name:"Chen",job:"developer"},
    {flag:false,name:"men",job:"mentor"},
   ]);
   
   /*
   *实现所有项目的全选中过程 
   */
   public function all_click(event:Event):void{
    
    dsObjects = this.dgDistbRecordSearchList.dataProvider as ArrayCollection;
    this.unAll.selected = false;
    for(var i:int = 0 ;i<dsObjects.length;i++){
     dsObjects[i].flag = CheckBox(event.target).selected;
    }
    //重新绑定
    this.dgDistbRecordSearchList.dataProvider = dsObjects;
   }
   /*
   *实现项目反相选中
   */
   public function unAll_click(event:Event):void{
    
    if(CheckBox(event.target).selected){
     
     this.all.selected = false;
     
     dsObjects = this.dgDistbRecordSearchList.dataProvider as ArrayCollection;
     
     for(var i:int = 0 ;i<dsObjects.length;i++){
      dsObjects[i].flag = !dsObjects[i].flag;
     }
     //重新绑定
     this.dgDistbRecordSearchList.dataProvider = dsObjects;
    }
   }
   
   //显示被选中项目的名称
   private function showSelectedName():void{
    var ac:ArrayCollection = this.dgDistbRecordSearchList.dataProvider as ArrayCollection;
    var selectedNames:String = "选中项目名称为:"
    
    for(var i:int = 0;i<ac.length;i++){
     if(ac[i].flag == true){
      selectedNames += ac[i].name + " ";
     }
    }
    
    Alert.show(selectedNames);
   }
  ]]> 
 </fx:Script> 
 <mx:VBox> 
  <mx:DataGrid id="dgDistbRecordSearchList" width="100%" height="100%" allowMultipleSelection="true" dataProvider="{dsObjects}" >                
   <mx:columns> 
    <mx:DataGridColumn headerText="选择" width="42" > 
     <mx:itemRenderer > 
      <fx:Component > 
       <mx:HBox horizontalAlign="center"> 
        <mx:CheckBox selected="@{data.flag}"  change="checkbox1_changeHandler(event,data)" width="13"> 
         <fx:Script> 
          <![CDATA[
           import mx.events.ListEvent;
           protected function checkbox1_changeHandler(event:Event,obj:Object):void
           {
            //调整按钮选择性
            outerDocument.unAll.selected = false;
            outerDocument.all.selected = false;
            //在单向绑定时可采用此法将选中信息反应到数据源
            /*  obj.flag =  CheckBox(event.target).selected;  */
           }
          ]]> 
         </fx:Script> 
        </mx:CheckBox> 
       </mx:HBox> 
       
      </fx:Component> 
     </mx:itemRenderer> 
    </mx:DataGridColumn> 
    <mx:DataGridColumn id="nam" textAlign="left" headerText="姓名" dataField="name"/> 
    <mx:DataGridColumn id="job" textAlign="left" headerText="职位" width="80" dataField="job"/> 
   </mx:columns> 
  </mx:DataGrid> 
  <mx:HBox> 
   <s:CheckBox id="all" label="全选" width="45" height="30" click="all_click(event)"/> 
   <s:CheckBox id="unAll" label="反选" width="45" height="30" click="unAll_click(event)"/> 
  </mx:HBox> 
  <mx:Button label="选中项目的名称" click="showSelectedName()" /> 
  
 </mx:VBox> 
 
</mx:Application>