在DataGrid中实现列中加入CheckBox这种用法很常见,项目中也经常会用到,在网上搜了下基本就是实现itemRender.但是 感觉网上提供的实现上好些地方都是多余的 经过自己的改造感觉还行 附上代码,同时希望大家举一反三 能实现添加其他组件到DataGrid列中
贴出自己改造过的:
CheckBoxHeaderRenderer.as
package
{
import flash.events.Event;
import flash.events.MouseEvent;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.controls.CheckBox;
import mx.controls.DataGrid;
import mx.events.DataGridEvent;
public class CheckBoxHeaderRenderer extends CheckBox
{
private var sele:String;
public function CheckBoxHeaderRenderer()
{
super();
this.addEventListener(Event.CHANGE, clickHandlers);
}
override public function set data(value:Object):void
{
DataGrid(listData.owner).addEventListener
(DataGridEvent.HEADER_RELEASE,sortEventHandler);
this.selected=this.sele=="true"?true:false;
}
private function sortEventHandler(event:DataGridEvent):void
{
if (event.itemRenderer == this)
event.preventDefault();
}
protected function clickHandlers(event:Event):void
{
sele=(event.currentTarget.selected).toString();
var a:ArrayCollection=DataGrid(listData.owner).dataProvider as ArrayCollection;
for(var i:int=0;i<a.length;i++){
(DataGrid(listData.owner).dataProvider as ArrayCollection)
.getItemAt(i).selected=(event.currentTarget.selected).toString();
}
(DataGrid(listData.owner).dataProvider as ArrayCollection).refresh();
}
}
}
CheckBoxItemDataRenderer.as
package
{
import flash.events.Event;
import mx.collections.ArrayCollection;
import mx.controls.CheckBox;
import mx.controls.DataGrid;
public class CheckBoxItemDataRenderer extends CheckBox
{
private var currentData:Object; //保存当前一行值的对象
public function CheckBoxItemDataRenderer()
{
super();
this.addEventListener(Event.CHANGE, changeHandler);
}
override public function set data(value:Object):void
{
this.currentData= value;
this.selected = value.selected == "true"?true:false;
}
protected function changeHandler(event : Event) : void
{
currentData.selected = this.selected.toString();
}
/*override public function get data():Object{
return currentData;
}*/
}
}
DataGrid_Checkbox.mxml
<?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"
xmlns:dataGrid="*"
minWidth="955" minHeight="600" creationComplete="getaa()">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
[Bindable]
private var data_myDataGrid:ArrayCollection=new ArrayCollection();
private function headerClickHandler(event : Event) : void
{
/*
for each(var obj: Object in data_myDataGrid)
{
obj.selected = String(event.currentTarget.selected);
}
data_myDataGrid.refresh(); */
}
private function getaa():void{
var obj:Object=new Object();
obj.labe="1";
obj.data="a";
obj.selected="false";
var obj2:Object=new Object();
obj2.labe="2";
obj2.data="b";
obj2.selected="false";
var obj3:Object=new Object();
obj3.labe="3";
obj3.data="c";
obj3.selected="false";
var obj4:Object=new Object();
obj4.labe="4";
obj4.data="a";
obj4.selected="false";
var obj5:Object=new Object();
obj5.labe="5";
obj5.data="b";
obj5.selected="false";
var obj6:Object=new Object();
obj6.labe="6";
obj6.data="c";
obj6.selected="false";
var obj7:Object=new Object();
obj7.labe="7";
obj7.data="a";
obj7.selected="false";
var obj8:Object=new Object();
obj8.labe="8";
obj8.data="b";
obj8.selected="false";
var obj9:Object=new Object();
obj9.labe="9";
obj9.data="c";
obj9.selected="false";
data_myDataGrid.addItem(obj);
data_myDataGrid.addItem(obj3);
data_myDataGrid.addItem(obj2);
data_myDataGrid.addItem(obj4);
data_myDataGrid.addItem(obj5);
data_myDataGrid.addItem(obj6);
data_myDataGrid.addItem(obj7);
data_myDataGrid.addItem(obj8);
data_myDataGrid.addItem(obj9);
}
protected function button1_clickHandler(event:MouseEvent):void
{
for(var i:int=0;i<data_myDataGrid.length;i++){
if(data_myDataGrid.getItemAt(i).selected=='true'){
Alert.show(data_myDataGrid.getItemAt(i).labe);
}
}
}
]]>
</fx:Script>
<mx:DataGrid dataProvider="{data_myDataGrid}" x="10" y="10">
<mx:columns>
<mx:DataGridColumn dataField="labe" headerText="Label" />
<mx:DataGridColumn dataField="data" headerText="Data" />
<mx:DataGridColumn
dataField="selected" headerText="Select"
itemRenderer="CheckBoxItemDataRenderer"
headerRenderer="CheckBoxHeaderRenderer" />
</mx:columns>
</mx:DataGrid>
<mx:Button click="button1_clickHandler(event)"/>
</s:Application>