flex DataGrid根据数据动态显示行颜色（重写DataGrid组件）

最新推荐文章于 2019-02-15 23:08:21 发布

原创最新推荐文章于 2019-02-15 23:08:21 发布 · 4.8k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#flex #Flex #FLEX

Flex 专栏收录该内容

5 篇文章

订阅专栏

根据数据紧急程度，使用Flex自定义DataGrid组件，通过重写代码实现不同紧急级别行显示不同颜色，例如紧急记录以红色高亮显示。

需求：能根据记录的紧急程度显示不同的颜色，如紧急，该行要用红色表示。


MyDataGrid组件代码：
package common.flash.datagrid
{   
	import flash.display.Sprite;
	import mx.collections.ArrayCollection;
	import mx.controls.DataGrid;
	
	public class MyDataGrid extends DataGrid
	{
		
		private var _rowColorFunction:Function;
		private var _customed:Boolean;
		private var _customerColor:uint=0;
		
		public function MyDataGrid()
		{
			super();
		}
		
		override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void
		{
			 if (_customed==true)
		  	 {
		         if(this._rowColorFunction != null)
			     {
				     if (dataIndex < this.dataProvider.length)
				     {
					      var item:Object=this.dataProvider.getItemAt(dataIndex);//设定颜色
					      color=this._rowColorFunction.call(this, item, color);
				     }
			      }
				  else
				  {
					   if (this._customerColor!=0)
					   {
						    if (dataIndex < this.dataProvider.length)
						    {
						    	color=this._customerColor;
						    }
					   }
				  }
			}
			super.drawRowBackground(s, rowIndex, y, height, color, dataIndex);
		} 
		
		override public function set columns(value:Array):void
		{
			super.columns = value;
		}
		
		override public function set dataProvider(value:Object):void
	    {
	        super.dataProvider = value;
	    }
	    
		public function set rowColorFunction(rowColorFunction:Function):void
		{
		this._rowColorFunction=rowColorFunction;
		}
		
		public function get rowColorFunction():Function
		{
		return this._rowColorFunction;
		}
		  
		public function set customed(customed:Boolean):void
		{
		 _customed=customed;
		}
		  
		public function get customed():Boolean
		{
		return _customed;
		}
		  
		public function set customerColor(customerColor:uint):void
		{
		 _customerColor=customerColor;
		}
		  
		public function get customerColor():uint
		{
		return _customerColor;
		}
	}
}

在mxml中调用如代码：

<custom:MyDataGrid  id="myDataGrid" customed="true"   rowColorFunction="showStatus" >

showStatus函数如下：

private function showStatus(item:Object, color:uint):uint
{
	if (item.status=="1") 
	{
		return 0x32f817;
	}
	else if (item.status=="2")
	{
		return 0x8ad5fc;
	}
	else if(item.status=="6") 
	{
		return 0xe7e3e3;
	}
	return color;
}