该文中提供在datagrid中实现全部所有列的checkbox的问题.
两个DataGrid使用同一个数据源,左边提供选择等操作,右边会即时更新。我的实现原理很简单,我使用可派发事件的引用对象作为数据源数据类型。
所有源码:
DataGrid_Checkbox.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:dataGrid="sban.flexStudy.dataGrid.*">
<mx:Script>
<![CDATA[
[Bindable]
private var data_myDataGrid : XMLList = <></>;
private function headerClickHandler(event : Event) : void
{
for each(var xml : XML in data_myDataGrid)
{
xml.@selected = String(event.currentTarget.selected);
}
}
]]>
</mx:Script>
<mx:creationComplete>
<![CDATA[
for(var j : uint=0; j<10; j++)
{
data_myDataGrid += <item label={"Label"+j} data={"Data"+j} selected="false" />
}
]]>
</mx:creationComplete>
<mx:DataGrid dataProvider="{data_myDataGrid}" x="10" y="10">
<mx:columns>
<mx:DataGridColumn dataField="@label" headerText="Label" />
<mx:DataGridColumn dataField="@data" headerText="Data" />
<dataGrid:CheckBoxHeaderColumn headerClick="headerClickHandler(event)"
dataField="@selected" headerText="Select"
itemRenderer="sban.flexStudy.dataGrid.CheckBoxItemDataRenderer"
headerRenderer="sban.flexStudy.dataGrid.CheckBoxHeaderRenderer" />
</mx:columns>
</mx:DataGrid>
<mx:DataGrid dataProvider="{data_myDataGrid}" x="320" y="10">
<mx:columns>
<mx:DataGridColumn dataField="@label" headerText="Label" />
<mx:DataGridColumn dataField="@data" headerText="Data" />
<mx:DataGridColumn dataField="@selected" headerText="Selected" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
CheckBoxItemDataRenderer .as
package sban.flexStudy.dataGrid
{
import flash.events.Event;
import mx.controls.CheckBox;
public class CheckBoxItemDataRenderer extends CheckBox
{
public function CheckBoxItemDataRenderer()
{
super();
this.addEventListener(Event.CHANGE, changeHandler);
}
override public function set data(value:Object):void
{
super.data = value;
this.selected = listData.label == 'true';
}
protected function changeHandler(event : Event) : void
{
data.@selected = this.selected;
}
}
}
CheckBoxHeaderColumn.as
package sban.flexStudy.dataGrid
{
import mx.controls.dataGridClasses.DataGridColumn;
[Event(name="headerClick", type="flash.events.Event")]
public class CheckBoxHeaderColumn extends DataGridColumn
{
public function CheckBoxHeaderColumn(columnName:String=null)
{
super(columnName);
}
/**is the checkbox selected**/
public var selected:Boolean = false;
}
}
CheckBoxHeaderRenderer.as
package sban.flexStudy.dataGrid
{
import flash.events.Event;
import flash.events.MouseEvent;
import mx.controls.CheckBox;
import mx.controls.DataGrid;
import mx.events.DataGridEvent;
public class CheckBoxHeaderRenderer extends CheckBox
{
public function CheckBoxHeaderRenderer()
{
super();
//addEventListener("click", clickHandler);
}
private var _data:CheckBoxHeaderColumn;
override public function get data():Object
{
return _data;
}
override public function set data(value:Object):void
{
_data = value as CheckBoxHeaderColumn;
DataGrid(listData.owner).addEventListener(DataGridEvent.HEADER_RELEASE, sortEventHandler);
selected = _data.selected;
}
private function sortEventHandler(event:DataGridEvent):void
{
if (event.itemRenderer == this)
event.preventDefault();
}
override protected function clickHandler(event:MouseEvent):void
{
super.clickHandler(event);
data.selected = selected;
data.dispatchEvent( new Event("headerClick") );
}
}
}