给DataGrid设置背景色(汇总)

DataGrid颜色专题

[img]http://img.blog.163.com/photo/QdJLZEC73S6WlAJK9Gk6mA==/853995079340496022.jpg[/img]

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

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



设置行(row)的背景色
主要是通过对DataGrid扩展，对protected函数drawRowBackground()进行重写，具体代码如下：

override protected function 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,rowIndex,y,height,0xC0C0C0,dataIndex);

} else {

super.drawRowBackground(s,rowIndex,y,height,color,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.

**/

public class CustomRowColorDataGrid extends DataGrid

{

private var _rowColorFunction:Function;



public function 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

**/

public function set rowColorFunction(f:Function):void

{

this._rowColorFunction = f;

}



public function get rowColorFunction():Function

{

return this._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.

*/

override protected function drawRowBackground(s:Sprite,rowIndex:int,y:Number, height: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, rowIndex, y, height, color, dataIndex);

}

}

}



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

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



private function setCustomColor(item:Object, color:uint):uint

{

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

{

return 0xFF0033;

}

return color;

}

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

设置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[

override public function set 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[

override public function set 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>

转至：http://wmcai.blog.163.com/blog/static/4802420080842548600/