给DataGrid设置背景色(汇总)

DataGrid颜色专题

在Flex运用中经常提到的有关DataGrid问题是如何改变DataGrid单元格(cell)，列(column)和行(row)的背景颜色(backgroundcolor)

很久之前就做过这样的总结，一直没有整理出来，现在在这里对这3种颜色做一个总结(后面有demo和源码下载)。

?

1. 设置行(row)的背景色

主要是通过对DataGrid扩展，对protected函数drawRowBackground()进行重写，具体代码如下：

overrideprotectedfunction drawRowBackground(s:Sprite,rowIndex:int,y:Number,height:Number,color:uint,dataIndex:int):void

{

???? if (dataIndex >= dataProvider.length) {

???????? super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);

???????? return;

???? }

???? if (dataProvider.getItemAt(dataIndex).col3 < 2000) {//set color accordint to datas

???????? super.drawRowBackground(s,0xC0C0C0,dataIndex);

???? } else {

???????? super.drawRowBackground(s,dataIndex);

???? }

}?

这段代码中根据DataGrid的数据源进行判断来设置背景色，但是它有个缺陷，就是这个具体的背景色我们无法自己灵活指定。因此派生出新的CustomRowColorDataGrid，具体代码如下：

package cwmlab.controls

{

????? import mx.controls.*;

????? import flash.display.Shape;

????? import mx.core.FlexShape;

????? import flash.display.Graphics;

????? import flash.display.Sprite;

????? import mx.rpc.events.AbstractEvent;

????? import mx.collections.ArrayCollection;

????? import flash.events.Event;

?

????? /**

????? ?* This is an extended version of the built-in Flex datagrid.

????? ?* This extended version has the correct override logic in it

????? ?* to draw the background color of the cells,based on the value of the

????? ?* data in the row.

????? ?**/

????? publicclass CustomRowColorDataGrid extends DataGrid

????? {

??????????? privatevar _rowColorFunction:Function;

???????????

??????????? publicfunction CustomRowColorDataGrid()

??????????? {

????????????????? super();

??????????? }

??????????? /**

??????????? ?* A user-defined function that will return the correct color of the

??????????? ?* row. Usually based on the row data.

??????????? ?*

??????????? ?* expected function signature:

??????????? ?* public function F(item:Object,defaultColor:uint):uint

??????????? ?**/

??????????? publicfunctionset rowColorFunction(f:Function):void

??????????? {

????????????????? this._rowColorFunction = f;

??????????? }

???????????

??????????? publicfunctionget rowColorFunction():Function

??????????? {

????????????????? returnthis._rowColorFunction;

??????????? }

???????????

????? ??? /**

??????????? ?*? Draws a row background

??????????? ?*? at the position and height specified using the

??????????? ?*? color specified.? This implementation creates a Shape as a

??????????? ?*? child of the input Sprite and fills it with the appropriate color.

??????????? ?*? This method also uses the <code>backgroundAlpha</code> style property

??????????? ?*? setting to determine the transparency of the background color.

??????????? ?*

??????????? ?*? @param s A Sprite that will contain a display object

??????????? ?*? that contains the graphics for that row.

??????????? ?*

??????????? ?*? @param rowIndex The row's index in the set of displayed rows.? The

??????????? ?*? header does not count,the top most visible row has a row index of 0.

??????????? ?*? This is used to keep track of the objects used for drawing

??????????? ?*? backgrounds so a particular row can re-use the same display object

??????????? ?*? even though the index of the item that row is rendering has changed.

??????????? ?*

??????????? ?*? @param y The suggested y position for the background

?????????????*? @param height The suggested height for the indicator

??????????? ?*? @param color The suggested color for the indicator

??????????? ?*

??????????? ?*? @param dataIndex The index of the item for that row in the

??????????? ?*? data provider.? This can be used to color the 10th item differently

??????????? ?*? for example.

????? ???? */

????? ??? overrideprotectedfunction drawRowBackground(s:Sprite,rowIndex:int,y:Number,color:uint,dataIndex:int):void

????? ??? {

????? ??? ? if( this.rowColorFunction != null ){

????? ??? ??????? if( dataIndex < this.dataProvider.length ){

??????????? ??? ??????? var item:Object = this.dataProvider.getItemAt(dataIndex);

??????????? ??? ??????? color = this.rowColorFunction.call(this,item,color);

????? ??? ??????? }

????? ??? ? }???????????

????? ??? ? super.drawRowBackground(s,dataIndex);

????? ??? }

????? }

}

?

在具体使用过程中可以这样调用：

<cwmlab:CustomRowColorDataGrid dataProvider="{dp}"?rowColorFunction="setCustomColor">

?

privatefunction setCustomColor(item:Object,color:uint):uint

{

????if( item['col3'] >= 2000 )

????{

??????? return 0xFF0033;

????}

????return color;

}

2. 设置DataGrid列的背景色

这个很简单，只要设置DataGridColumn的属性backgroundColor="0x0000CC"即可。

3. 设置DataGrid单元格(cell)的背景色

这个主要通过itemRenderer进行设置，itemRenderer可以是Label，也可以是其他如DataGridItemRenderer。

先看看用Label如何设置背景色

<mx:DataGridColumn headerText="Make" dataField="col1">

????? <mx:itemRenderer>

?????????????<mx:Component>

??????????????????<mx:Label>? <!--using label as itemRenderer-->

??????????????????????<mx:Script><![CDATA[

??????????????????????????overridepublicfunctionset data(value:Object):void

??????????????????????????{

??????????????????????????????super.data = value;

??????????????????????????????if(value.col1 == 'Toyota'){

?????????????????????????????????this.opaqueBackground =0xCC0000;

??????????????????????????????}

??????????????????????????}

??????????????????????]]></mx:Script>

??????????????????</mx:Label>

?????????????</mx:Component>

??????</mx:itemRenderer>

</mx:DataGridColumn>

用DataGridItemRenderer进行背景色设置如下：

<mx:DataGridColumn headerText="Year" dataField="col3">

?????<mx:itemRenderer>

??????????<mx:Component>

??????????????<mx:DataGridItemRenderer><!--using DataGridItemRenderer as itemRenderer-->

???????????????????<mx:Script><![CDATA[

???????????????????????overridepublicfunctionset data(value:Object):void

???????????????????????{

???????????????????????????super.data = value;

???????????????????????????if(value.col3 >= 2000){

????????????????????????????????this.background = true;

????????????????????????????????this.backgroundColor =0x00cc00;

???????????????????????????}

????????????????????????}

???????????????????]]></mx:Script>

??????????????</mx:DataGridItemRenderer>

??????????</mx:Component>

?????</mx:itemRenderer>

</mx:DataGridColumn>