可以动态添加行背景色的flex datagrid控件

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就可以解决该困扰了。