自定义DataGrid的行背景颜色

最新推荐文章于 2024-01-04 18:01:51 发布

iteye_15147

最新推荐文章于 2024-01-04 18:01:51 发布

阅读量543

点赞数

CC 4.0 BY-SA版权

分类专栏： Flex/BlazeDS 文章标签： DataGrid 自定义 row 行背景颜色

本文链接：https://blog.youkuaiyun.com/iteye_15147/article/details/82410758

Flex/BlazeDS 专栏收录该内容

37 篇文章

订阅专栏

本文介绍了一种自定义Flex DataGrid中行背景颜色的方法，通过创建RowColorDataGrid组件并实现calcRowColor函数，根据不同状态改变行的颜色，增强数据展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1)继承AdvancedDataGrid/DataGrid

package component
{

  import flash.display.Sprite;

  import mx.collections.ArrayCollection;
  import mx.controls.DataGrid;

  public class RowColorDataGrid extends AdvancedDatagrid
  {
    public var rowColorFunction:Function;

    override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void
    {
      if(rowColorFunction != null) 
      {
        var item:Object;
        if(dataIndex < dataProvider.length)
        {
          item = dataProvider[dataIndex];
        }

        if(item)
        {
          color = rowColorFunction(item, rowIndex, dataIndex, color);
        }
      }
      super.drawRowBackground(s, rowIndex, y, height, color, dataIndex);
    }
  }
}

2)使用RowColorDataGrid

<component:RowColorDataGrid rowColorFunction="calcRowColor"/>

3)自定义calRowColor方法

private function calcRowColor(item:Object, rowIndex:int, 
								  dataIndex:int, color:uint):uint
{
	var operationStatus:String=item.operationStatus;
	var backgroundColor:uint=0xFFFFFF;
	if(operationStatus ==OperationStatus.Added){
		backgroundColor=0xa9dc84;
	}else if(operationStatus == OperationStatus.Modified){
		backgroundColor=0xa28cd4;
	}else if(operationStatus==OperationStatus.Deleted){
		backgroundColor=0xd49251;
	}else if(operationStatus ==OperationStatus.Historical){
		if(rowIndex%2==0){
			backgroundColor=0xFFFFFF;
		}else{
			backgroundColor=0xE2E2E2;
		}
	}else{
		Alert.show("operation status is not supported","Message");
	}
	return backgroundColor;
}