flex DataGrid与CheckBox的使用，表头也加上CheckBox

如图所示，下列代码中就将完成图上功能。注意：代码中是重构了DataGrid这个类！

1、MXML文件

??

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- http://www.myflexhero.com/share/2010/12/11/flex3-mx/flex-mx-core-components/flex-mx-ui-controls/flex-mx-tree-and-datagrid-controls/604 -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" height="500" verticalGap="0" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[ private var arr:Array = [ { firstName: "Alex",lastName: "Harui",age: 48 },{ firstName: "Gordon",lastName: "Smith",age: 54 },{ firstName: "Deepa",lastName: "Subramanian",age: 22 },{ firstName: "Matt",lastName: "Chotin",age: 28 },{ firstName: "Ely",lastName: "Greenfield",age: 32 },{ firstName: "Kevin",lastName: "Lynch",age: 15},{ firstName: "Shantanu",lastName: "Narayan",age: 50 },{ firstName: "Joan",lastName: "Lafferty",age: 23 },{ firstName: "Ryan",lastName: "Frishberg",age: 19 },{ firstName: "Jason",lastName: "Szeto",age: 30 },{ firstName: "Mark",lastName: "Anders",age: 40 },{ firstName: "Peter",lastName: "Flynn",age: 24 },{ firstName: "Heidi",lastName: "Williams",age: 18 } ]; ]]>
    </mx:Script>
    <local:CheckBoxDataGrid id="dg" initialize="dg.dataProvider=arr" horizontalScrollPolicy="on" allowMultipleSelection="true" change="foo.text = dg.selectedIndices.toString()" >
        <local:columns>
            <mx:DataGridColumn dataField="firstName" headerText=" " width="20" sortable="false" itemRenderer="CheckBoxRenderer" headerRenderer="CheckBoxHeaderRenderer" > 
            </mx:DataGridColumn>
            <mx:DataGridColumn dataField="firstName" headerText="First Name" />
            <mx:DataGridColumn dataField="lastName" headerText="Last Name" />
        </local:columns>
    </local:CheckBoxDataGrid>
    <mx:Label id="foo" />

</mx:Application>

2、CheckBoxDataGrid.as2、

package 
{
import flash.display.Sprite;
import flash.events.KeyboardEvent;
import mx.controls.CheckBox;
import mx.controls.DataGrid;
import mx.controls.listClasses.IListItemRenderer;

/** * DataGrid that uses checkboxes for multiple selection */
public class CheckBoxDataGrid extends DataGrid
{

    override protected function selectItem(item:IListItemRenderer,
                                  shiftKey:Boolean, ctrlKey:Boolean,
                                  transition:Boolean = true):Boolean
    {
        // only run selection code if a checkbox was hit and always         // pretend we're using ctrl selection         if (item is CheckBox)
            return super.selectItem(item, false, true, transition);
        return false;
    }

    // turn off selection indicator     override protected function drawSelectionIndicator(
                                indicator:Sprite, x:Number, y:Number,
                                width:Number, height:Number, color:uint,
                                itemRenderer:IListItemRenderer):void
    {
    }

    // whenever we draw the renderer,make sure we re-eval the checked state     override protected function drawItem(item:IListItemRenderer,
                                selected:Boolean = false,
                                highlighted:Boolean = false,
                                caret:Boolean = false,
                                transition:Boolean = false):void
    {
        if (item is CheckBox)
            CheckBox(item).invalidateProperties();
        super.drawItem(item, selected, highlighted, caret, transition);
    }

    // fake all keyboard interaction as if it had the ctrl key down     override protected function keyDownHandler(event:KeyboardEvent):void
    {
        // this is technically illegal,but works         event.ctrlKey = true;
        event.shiftKey = false;
        super.keyDownHandler(event);
    }

}

}

?

package 
{
import flash.display.DisplayObject;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.text.TextField;
import mx.controls.CheckBox;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.ListBase;

/** * The Renderer. */
public class CheckBoxHeaderRenderer extends CheckBox
{

    public function CheckBoxHeaderRenderer()
    {
        focusEnabled = false;
    }

    override public function set data(value:Object):void
    {
        invalidateProperties();
    }
    
    private var addedListener:Boolean = false;
    private var partiallySelected:Boolean = false;

    override protected function commitProperties():void
    {
        super.commitProperties();
        if (owner is ListBase)
        {
            if (!addedListener)
            {
                addedListener = true;
                owner.addEventListener("valueCommit", owner_changeHandler, 0, true);
                owner.addEventListener("change", true);
            }

            if (ListBase(owner).dataProvider.length == 
                ListBase(owner).selectedItems.length)
            {
                selected = true;
                partiallySelected = false;
            }
            else if (ListBase(owner).selectedItems.length == 0)
            {
                selected = false;
                partiallySelected = false;
            }
            else
            {
                selected = false;
                partiallySelected = true;
            }
            invalidateDisplayList();
        }
    }

    /* eat keyboard events,the underlying list will handle them */
    override protected function keyDownHandler(event:KeyboardEvent):void
    {
    }

    /* eat keyboard events,the underlying list will handle them */
    override protected function keyUpHandler(event:KeyboardEvent):void
    {
    }

    override protected function clickHandler(event:MouseEvent):void
    {
        if (selected)
        {
            // uncheck everything             ListBase(owner).selectedIndex = -1;
        }
        else
        {
            var n:int = ListBase(owner).dataProvider.length;
            var arr:Array = [];
            for (var i:int = i; i < n; i++)
                arr.push(i);
            ListBase(owner).selectedIndices = arr;
        }
    }

    /* center the checkbox if we're in a datagrid */
    override protected function updateDisplayList(w:Number, h:Number):void
    {
        super.updateDisplayList(w, h);

        graphics.clear();

        if (listData is DataGridListData)
        {
            var n:int = numChildren;
            for (var i:int = 0; i < n; i++)
            {
                var c:DisplayObject = getChildAt(i);
                if (!(c is TextField))
                {
                    c.x = (w - c.width) / 2;
                    c.y = 0;
                    c.alpha = 1;
                    if (partiallySelected)
                    {
                        graphics.beginFill(0x000000);
                        graphics.drawRect(c.x, c.y, c.width, c.height);
                        graphics.endFill();
                        c.alpha = 0.7;
                    }
                }
            }
        }
    }

    private function owner_changeHandler(event:Event):void
    {
        invalidateProperties();
    }

}

}

package 
{
import flash.display.DisplayObject;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.text.TextField;
import mx.controls.CheckBox;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.ListBase;

/** * The Renderer. */
public class CheckBoxRenderer extends CheckBox
{

    public function CheckBoxRenderer()
    {
        focusEnabled = false;
    }

    override public function set data(value:Object):void
    {
        super.data = value;
        invalidateProperties();
    }
    
    override protected function commitProperties():void
    {
        super.commitProperties();
        if (owner is ListBase)
            selected = ListBase(owner).isItemSelected(data);
    }

    /* eat keyboard events,the underlying list will handle them */
    override protected function keyUpHandler(event:KeyboardEvent):void
    {
    }

    /* eat mouse events,the underlying list will handle them */
    override protected function clickHandler(event:MouseEvent):void
    {
    }

    /* center the checkbox if we're in a datagrid */
    override protected function updateDisplayList(w:Number, h);

        if (listData is DataGridListData)
        {
            var n:int = numChildren;
            for (var i:int = 0; i < n; i++)
            {
                var c:DisplayObject = getChildAt(i);
                if (!(c is TextField))
                {
                    c.x = (w - c.width) / 2;
                    c.y = 0;
                }
            }
        }
    }

}

}