Flex DataGrid中使用CheckBox[转]

本文使用DataGrid的headerRenderer 和itemRenderer ，设计一个的DataGrid+Checkbox 的组件，且包括了表头多选 支持。

 

[主程序源码(application.mxml source code)] ：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- http://www.myflexhero.com/share/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> 

 

[CheckBoxDataGrid.as源码] ：

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);
	}
 
}
 
} 

 

[CheckBoxRenderer.as源码] ：

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 keyDownHandler(event:KeyboardEvent):void
	{
	}
 
	/* 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:Number):void
	{
		super.updateDisplayList(w, 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;
				}
			}
		}
	}
 
}
 
} 

 

[CheckBoxHeaderRenderer.as源码] ：

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, false, 0, true);
                owner.addEventListener("change", owner_changeHandler, false, 0, 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();
    }
 
}
 
} 

 

 

本文转自：http://www.myflexhero.com/share/flex3-mx/flex-mx-core-components/flex-mx-ui-controls/flex-mx-tree-and-datagrid-controls/604