<?xml version="1.0" encoding="utf-8"?>
<s: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">
    
    <s:layout>
        <s:VerticalLayout paddingTop="5" paddingBottom="5" paddingLeft="5" paddingRight="5" gap="5" 
                          horizontalAlign="center" verticalAlign="middle"/>
    </s:layout>
    
    
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            
            import vos.TestVO;
            [Bindable]
            private var dp:ArrayCollection;
            
            
            private function createData():void
            {
                dp = new ArrayCollection();
                for (var i:int = 0; i < 10; i++) 
                {
                    var t:TestVO = new TestVO();
                    t.id = String(i);
                    t.label = "label" + i;
                    t.icon = "assets/icons/" + i + ".png";
                    t.selected = (Math.random() > .5) ? true : false;
                    
                    dp.addItem(t);
                }
                
            }
            
            private function deleteData():void
            {
                for (var i:int = dp.length - 1; i >= 0; i--) 
                {
                    var t:TestVO = dp.getItemAt(i) as TestVO;
                    if(t.selected)
                        dp.removeItemAt(i);
                }
                
            }
            
            public function selectAll(event:MouseEvent):void
            {
                var cb:mx.controls.CheckBox = event.currentTarget as mx.controls.CheckBox;
                
                if(!dp)
                {
                    //还没数据的时候，你就别选中了，没用
                    cb.selected = false;
                    return;
                }
                
                for each (var t:TestVO in dp) 
                {
                    t.selected = cb.selected;
                }
            }
        >>
    </fx:Script>
    
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    
    <mx:DataGrid id="dg" width="400" height="300" dataProvider="{dp}">
        <mx:columns>
            <mx:DataGridColumn width="20" sortable="false">
                <mx:headerRenderer>
                    <fx:Component>
                        <mx:CheckBox click="outerDocument.selectAll(event)"/>
                    </fx:Component>
                </mx:headerRenderer>
                <mx:itemRenderer>
                    <fx:Component>
                        <mx:CheckBox selected="@{data.selected}"/>
                    </fx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn dataField="label"/>
            <mx:DataGridColumn dataField="icon"/>a
        </mx:columns>
    </mx:DataGrid>
    <s:HGroup>
        <s:Button label="create data" click="createData()"/>
        <s:Button label="delete selected data" click="deleteData()"/>
    </s:HGroup>
</s:Application>

package vos
{
    [Bindable]
    public class TestVO
    {
        public function TestVO()
        {
        }
        
        public var id:String;
        public var label:String;
        public var icon:String;
        
        [Transient]
        public var selected:Boolean = false;
    }
}