flex3 datagrid里面checkbox实现全选功能

（ps：代码存在一点小bug，但不影响使用，性能可能考虑的也不是很周全，欢迎交流）

主应用程序

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
     backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" creationComplete="initApp()">
    <mx:Script>
     <![CDATA[
      import mx.controls.CheckBox;
      import mx.controls.Alert;
     ]]>
    </mx:Script>
    <mx:Script>
     <![CDATA[
      import mx.collections.XMLListCollection;
      import mx.collections.ArrayCollection;
      
      [Bindable]     
      private var employees:XML=<employees>
             <employee>
                    <name>Christina Coenraets</name>
                    <phone>555-219-2270</phone>
                    <email>[e-mail]</email>
                    <selected>yes</selected>
                </employee>
                <employee>
                    <name>Joanne Wall</name>
                    <phone>555-219-2012</phone>
                    <email>[e-mail]</email>
                    <selected>no</selected>
                </employee>
                <employee>
                    <name>Maurice Smith</name>
                    <phone>555-219-2012</phone>
                    <email>[e-mail]</email>
                    <selected>no</selected>
                </employee>
                <employee>
                    <name>Mary Jones</name>
                    <phone>555-219-2000</phone>
                    <email>[e-mail]</email>
                    <selected>yes</selected>
                </employee>
                </employees>;
         
         
         //[Bindable]      
         //private var empsource:ArrayCollection;
   private function  initApp():void{
    dg.addEventListener("cbitemclick",headerclickHandler);
    /*empsource=new ArrayCollection();
    for each(var o:Object in employees.employee){
     var acitem:Object=new Object();
     acitem.name=o.name;
     acitem.phone=o.phone;
     acitem.email=o.email;
     acitem.selected=o.selected;
     empsource.addItem(acitem);
    }*/
   }        
         
         
         public function clickHandler(event:MouseEvent):void{
          var selectedstate:String=event.target.data.selected;
          trace("原来数据"+selectedstate);
          trace("xianzai:"+event.target.selected);
          if(event.target.selected==true){
           event.target.data.selected="yes";
           trace("gaibianhoude:"+event.target.data.selected);
          }else if(event.target.selected==false){
           event.target.data.selected="no";
           trace("gaibianhoude:"+event.target.data.selected);
          }
         }
         
         private var flag:String="0";
         
         private function headerclickHandler(event:Event):void{
         if(flag=="0"){
           for each(var o:Object in employees.employee){
            o.selected="yes";
           }
           flag="1";
          }else if(flag=="1"){
           for each(var oo:Object in employees.employee){
            oo.selected="no";
           }
           flag="0";
          }
         }
         
         private function lookItemBtnHandler(event:MouseEvent):void{
          trace(dg.dataProvider);
          var tempXml:XMLListCollection=dg.dataProvider as XMLListCollection;
          var selectedStr:String="";
    for each(var oo:XML in tempXml){
     if(oo.selected=="yes"){
      trace(oo.name);
      selectedStr+=oo.name+",";
     }
    }
    if(selectedStr!=""){
     Alert.show(selectedStr);
    }else{
     Alert.show("未选中任何项目");
    }
         }
         
     ]]>
    </mx:Script>
   
    <mx:Panel title="DataGrid Control" color="0xffffff" borderAlpha="0.15" width="500"
         paddingTop="5" paddingRight="10" paddingBottom="10" paddingLeft="10" height="432">
        <mx:DataGrid id="dg" color="0x323232" width="100%" dataProvider="{employees.employee}" height="90%">
            <mx:columns>
             <mx:DataGridColumn headerRenderer="headerCheckBox" sortable="false">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:CheckBox click="outerDocument.clickHandler(event)" selected="{data.selected=='yes'?true:false}"/>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
                <mx:DataGridColumn dataField="name" headerText="Name"/>
                <mx:DataGridColumn dataField="phone" headerText="Phone"/>
                <mx:DataGridColumn dataField="email" headerText="Email"/>
                <mx:DataGridColumn dataField="selected" headerText="selected"/>
            </mx:columns>
        </mx:DataGrid>       
        <mx:Button id="lookItemBtn" label="查看选中项目" color="#000000" click="lookItemBtnHandler(event)"/>
    </mx:Panel>
</mx:Application>

 

 

渲染器

headerCheckBox.mxml

 

<?xml version="1.0" encoding="utf-8"?>
<mx:CheckBox xmlns:mx="http://www.adobe.com/2006/mxml" label="全选" click="this.dispatchEvent(new Event('cbitemclick',true))">
</mx:CheckBox>