可以动态添加行背景色的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就可以解决该困扰了。