这个页面的最终效果如果所示:
当CheckBox没有被选中时第二列不能被编辑,第三列可以被编辑。
当CheckBox被选中时,第二列可以被编辑,第三列不能被编辑。
今天做了个在Flex中使用DataGrid,并且DataGrid里面嵌套CheckBox。最终实现全选,也可以实现都选择了那几个记录。先把概况和代码分享下。
概况1:建立提供数据的ArrayCollection,可以直接在MXML里面创建,也可以引入XML文件,我用的后者。HttpService里面的URL是该文件所在的路径。
概况2:在数据源里面加入一个额外的列,比如:selected,里面的值为布尔型,跟CheckBox绑定,可以循环遍历以确定都有哪一记录被选中。
下面直接上代码:
<?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="showDataGrid.send()"
minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.controls.CheckBox;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
[Bindable]
private var employeeList:ArrayCollection = new ArrayCollection();
private var checkbox:CheckBox;
protected function showDataGrid_resultHandler(event:ResultEvent):void
{
employeeList = showDataGrid.lastResult.employees.employee;
}
protected function showDataGrid_faultHandler(event:FaultEvent):void
{
Alert.show(event.fault.toString());
}
public function checkbox_clickHandler(event:Event):void
{
dataGrid.dataProvider = employeeList;
}
public function selectedAllorNot(event:MouseEvent):void{
checkbox = event.currentTarget as CheckBox;
for each(var item:Object in employeeList){
item.selected = checkbox.selected;
}
dataGrid.dataProvider = employeeList;
}
]]>
</fx:Script>
<fx:Declarations>
<s:HTTPService id="showDataGrid" url="employeeList/employees.xml" result="showDataGrid_resultHandler(event)"
fault="showDataGrid_faultHandler(event)"/>
<mx:DateFormatter id="dateFormatter" formatString="DD-MM-YY"/>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Panel id="showData" horizontalCenter="0" verticalCenter="0" title="Show The DataGrid">
<mx:DataGrid id="dataGrid" dataProvider="{employeeList}">
<mx:columns>
<mx:DataGridColumn width="200" editable="false">
<mx:headerRenderer>
<fx:Component>
<mx:CheckBox label="Selected/Unselected All" textAlign="center" click="outerDocument.selectedAllorNot(event)"/>
</fx:Component>
</mx:headerRenderer>
<mx:itemRenderer>
<fx:Component>
<mx:CheckBox textAlign="center" selected="@{data.selected}" click="outerDocument.checkbox_clickHandler(event)">
</mx:CheckBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Employee Name" width="105">
<mx:itemRenderer>
<fx:Component>
<mx:TextInput text="{data.firstName} {data.lastName}" editable="{data.selected}" borderVisible="false" visible="false" />
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Hire Date">
<mx:itemRenderer>
<fx:Component>
<mx:TextInput text="{data.hireDate}" editable="{!data.selected}" borderVisible="false" visible="false"/>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</s:Panel>
</s:Application>
实现CheckBox居中的代码:
package utils
{
import flash.display.DisplayObject;
import mx.controls.CheckBox;
import flash.text.TextField;
public class CenterCheckBox extends CheckBox
{
// 居中展现
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
var n:int = numChildren;
for(var i:int = 0; i < n; i++)
{
var c:DisplayObject = getChildAt(i);
if( !(c is TextField))
{
c.x = Math.round((unscaledWidth - c.width) / 2);
c.y = Math.round((unscaledHeight - c.height) /2 );
}
}
}
}
}
实现圆形布局的代码:
package customLayout
{
import mx.core.ILayoutElement;
import spark.layouts.supportClasses.LayoutBase;
public class CircleLayout extends LayoutBase
{
public function CircleLayout()
{
super();
}
override public function updateDisplayList(width:Number, height:Number):void{
super.updateDisplayList(width, height);
if (!target)
return;
var layoutElement:ILayoutElement;
var count:uint = target.numElements;
var angle : Number = 360/count;
var radius : Number = Math.min( target.width/2, target.height/2 ) - 25;
var width2 : Number = target.width/2;
var height2 : Number = target.height/2;
for (var i:int = 0; i < count; i++)
{
layoutElement = target.getElementAt(i);
if (!layoutElement || !layoutElement.includeInLayout)
continue;
var radAngle : Number = (angle * i) * (Math.PI / 180) ;
var _x : Number = Math.sin( radAngle );
var _y : Number = - Math.cos( radAngle );
layoutElement.setLayoutBoundsPosition( width2 + (_x * radius) - 25, height2 + (_y * radius) - 10 );
}
}
}
}