flex自带的datagrid控件是不能改变行的背景色的,项目中间遇到这种需求了,要根据数据某个属性来让每行显示不同的背景色,我们可以重写datagrid控件来实现该功能。
package com.iman.nrms.nrmcs.ascript
{
import flash.display.Sprite;
import mx.controls.DataGrid;
import mx.controls.listClasses.IListItemRenderer;
/*
添加根据条件改变该行颜色功能
*/
public class ImanZynDataGrid extends DataGrid
{
public var rowColorFunction:Function;//若需要默认颜色,则该函数返回0即可,否则返回需要的颜色
public function ImanZynDataGrid()
{
super();
}
override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void{
var oldColor:uint = color;//存贮默认颜色,若没有返回值,则显示皮肤定义的控件默认颜色
if(rowColorFunction != null){
var item:Object;
if(dataIndex < dataProvider.length){
item = dataProvider[dataIndex];
}
if(item){
// color = rowColorFunction(item,rowIndex,dataIndex,color);
color = rowColorFunction(item);
if(color == 0){
color = oldColor;
}
// this.setStyle("rollOverColor",""+ rowColorFunction(item)+"");
// this.setStyle("selectionColor",""+ rowColorFunction(item)+"");
}
}
super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
}
}
}
mxml代码
//更改背景色颜色
protected function changeRowColor(o:Object):uint
{
//是否可分配 1 为可分配(默认颜色) 0 为不可分配(红色) 2不可操作(黄色)
var color:uint;
if(o.isDistribution=="0"){
color = 0xff9900;
}else if(o.isDistribution=="1" || o.isDistribution=="" || o.isDistribution==null){
color = 0xd4e1f2;
}else if(o.isDistribution=="2"){
color = 0xFFF68F;
}
return color;
}
<ascript1:ImanZynDataGrid rowCount="8" rowColorFunction="changeRowColor" selectable="false" dataProvider="{new ArrayCollection()}" id="curcuit" width="100%">
<ascript1:columns>
<mx:DataGridColumn dataField="" headerText="不可分配">
<mx:itemRenderer>
<fx:Component>
<mx:CheckBox enabled="{data.isDistribution=='2'?false:true}" textAlign="center" selected="{data.isDistribution=='1'||data.isDistribution=='' || data.isDistribution==null?false:true}" click="outerDocument.checkBox_clickHandler(event,data);data.selected=!data.selected;data.isDistribution=='0'?data.isDistribution='1':data.isDistribution='0'" />
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="name" headerText="电路编号"/>
<!-- <mx:DataGridColumn dataField="asiteName" headerText="A端站点"/>-->
<mx:DataGridColumn dataField="aneName" headerText="A端设备"/>
<mx:DataGridColumn dataField="aportName" headerText="A端端口"/>
<mx:DataGridColumn dataField="aodfPortName" headerText="A端DDF"/>
<!-- <mx:DataGridColumn dataField="zsiteName" headerText="Z段站点"/>-->
<mx:DataGridColumn dataField="zneName" headerText="Z端设备"/>
<mx:DataGridColumn dataField="zportName" headerText="Z端端口"/>
<mx:DataGridColumn dataField="zddfPort" headerText="Z端DDF"/>
</ascript1:columns>
</ascript1:ImanZynDataGrid>
此处有一个问题,当鼠标放到行数据上的时候,该行会变色,会影响自定义的背景色,将datagrid的selected设置为false就可以解决该困扰了。