Flex中DataGrid中添加一列复选框(CheckBox)

想要达到的效果就是在DataGrid里面添加一列，用于标识是否选择的复选框，效果如图：


<?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"
   creationComplete="init()"
   >

<fx:Script>
<![CDATA[

import mx.managers.PopUpManager;
import mx.controls.Alert;

[Bindable] 
private var carArray:ArrayCollection = new ArrayCollection(); 

private function doClose():void{
PopUpManager.removePopUp(this);
}

private function init():void{

var car : Object = new Object(); 
car.name = "Ford"; 
car.available = false; 
carArray.addItem(car); 

car = new Object(); 
car.name = "Benz"; 
car.available = false; 
carArray.addItem(car); 

car = new Object(); 
car.name = "BMW"; 
car.available = false; 
carArray.addItem(car);

car = new Object(); 
car.name = "BUCIK"; 
car.available = false; 
carArray.addItem(car);

car = new Object(); 
car.name = "TOYOTO"; 
car.available = false; 
carArray.addItem(car);

car = new Object(); 
car.name = "CEHO"; 
car.available = false; 
carArray.addItem(car);

car = new Object(); 
car.name = "KAKA"; 
car.available = false; 
carArray.addItem(car);

car = new Object(); 
car.name = "MESSI"; 
car.available = false; 
carArray.addItem(car);
}

//移动到区块
protected function moveToHandler(event:MouseEvent):void
{
// 判断选择数量是否大于0
var issel:Boolean = isSelected(carArray);
if(issel){
var moveToPlanRegion:MoveToPlanRegion = new MoveToPlanRegion()
moveToPlanRegion.height = 210;
moveToPlanRegion.width = 356;

var point1:Point = new Point();
point1.x=0;
point1.y=0;               
point1=moveToPlanRegion.localToGlobal(point1);
moveToPlanRegion.x=(this.width - moveToPlanRegion.width)/2;
moveToPlanRegion.y=(this.height - moveToPlanRegion.height)/2;

moveToPlanRegion.title = "选择同级区块";

PopUpManager.addPopUp(moveToPlanRegion,this,true);
}else{
Alert.show("至少选择一条记录","提示");
}
}

// 判断选择数量是否大于0
private function isSelected(carArray:ArrayCollection):Boolean{
for each(var ob:Object in carArray){
if(ob.available == true){
return true;
}
}
return false;
}

//划分给区块
protected function divideHandler(event:MouseEvent):void
{
// 判断选择数量是否大于0

var drvideToPlanRegion:DrvideToPlanRegion = new DrvideToPlanRegion();
drvideToPlanRegion.height = 210;
drvideToPlanRegion.width = 356;

var point1:Point = new Point();
point1.x=0;
point1.y=0;               
point1=drvideToPlanRegion.localToGlobal(point1);
drvideToPlanRegion.x=(this.width - drvideToPlanRegion.width)/2;
drvideToPlanRegion.y=(this.height - drvideToPlanRegion.height)/2;

drvideToPlanRegion.title = "选择下属区块";

PopUpManager.addPopUp(drvideToPlanRegion,this,true);

}

private function LabFunc(item:Object, column:DataGridColumn):String
{
return ((carArray.getItemIndex(item)+1).toString());
}

]]>
</fx:Script>

<fx:Declarations>
<s:ArrayCollection id="contacts"/>
</fx:Declarations>

<s:Group width="100%" height="100%" x="4" y="4">
<mx:TabNavigator id="tn"  width="415" height="274" color="0x323232" >
<!-- Define each panel using a VBox container. -->

<s:NavigatorContent label="未归属资源">
<s:Label text="资源名称" fontSize="14" x="9" y="14"/>
<s:TextInput x="79" y="10" id="textInput"/>
<s:Button x="304" y="10" label="移动到区块" click="moveToHandler(event)"/>
<mx:DataGrid x="10" y="40" width="394" height="190" dataProvider="{carArray}" editable="true">
<mx:columns>
<fx:Array>
<mx:DataGridColumn headerText="选择" editable="false"  textAlign="center" width="40">
<mx:itemRenderer>
<fx:Component>
<mx:CheckBox label="" selected="{data.available}" click="data.available = !data.available" textAlign="center"/>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="序号" labelFunction="LabFunc" sortable="false" resizable="false" textAlign="center" editable="false" width="40"/>
<mx:DataGridColumn headerText="标识" dataField="name" textAlign="center" editable="false"/>
<mx:DataGridColumn headerText="资源名称" dataField="available" editable="true" textAlign="center"/>
<mx:DataGridColumn headerText="资源类型" dataField="name" editable="true" textAlign="center"/>
<mx:DataGridColumn headerText="资源级别" dataField="available" editable="true" textAlign="center"/>
<mx:DataGridColumn headerText="归属时间" dataField="name" editable="true" textAlign="center"/>
</fx:Array>
</mx:columns>
</mx:DataGrid>
</s:NavigatorContent>

<s:NavigatorContent label="已归属资源">
<s:Label text="资源名称" fontSize="14" x="9" y="14"/>
<s:TextInput x="79" y="10"/>
<s:Button x="304" y="10" label="划分给区块" click="divideHandler(event)"/>
<mx:DataGrid x="10" y="40" width="394" height="190">
<mx:columns>
<fx:Array>
<mx:DataGridColumn headerText="选择" editable="false"  textAlign="center" width="40">
<mx:itemRenderer>
<fx:Component>
<mx:CheckBox label="" selected="{data.available}" click="data.available = !data.available" textAlign="center"/>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="序号" labelFunction="LabFunc" sortable="false" resizable="false" textAlign="center" editable="false" width="40"/>
<mx:DataGridColumn headerText="标识" dataField="name" textAlign="center" editable="false"/>
<mx:DataGridColumn headerText="资源名称" dataField="available" editable="true" textAlign="center"/>
<mx:DataGridColumn headerText="资源类型" dataField="name" editable="true" textAlign="center"/>
<mx:DataGridColumn headerText="资源级别" dataField="available" editable="true" textAlign="center"/>
<mx:DataGridColumn headerText="归属时间" dataField="name" editable="true" textAlign="center"/>
</fx:Array>
</mx:columns>
</mx:DataGrid>
</s:NavigatorContent>
</mx:TabNavigator>
</s:Group>
</s:Application>

字段available 是用来标识这条记录是否被选中，如果没有这个字段，
<mx:CheckBox label=""  textAlign="center"/>这样标识的话，点击表头进行排序是会发生混乱，这个字段就是用来解决这个问题。肯定还有其它解决方法的，不过我是用这种 。

评论

1 楼 mufanglin0828 2012-04-26  

需要解决这个问题