flex DataGrid 行列颜色设置

DataGrid行列背景颜色自定义

最新推荐文章于 2019-06-21 17:56:22 发布

原创最新推荐文章于 2019-06-21 17:56:22 发布 · 384 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#大数据

Adobe 专栏收录该内容

69 篇文章

订阅专栏

本文演示如何在Flex框架中使用DataGrid组件，通过重写drawRowBackground和drawColumnBackground方法来实现行列背景颜色的自定义设置。

群里一哥们问了个问题，就写了个这个demo

DataGrid 行列背景颜色设置

效果图：

相关代码：

原理重写DataGrid drawRowBackground 方法。

<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009" 
			xmlns:s="library://ns.adobe.com/flex/spark" 
			xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.containers.Form;
			import mx.controls.Alert;
			import mx.controls.dataGridClasses.DataGridColumn;
			override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void
			{
				var list:XMLList = new XMLList(dataProvider);
				if(rowIndex<list.length())
				{
						var item:XML=list[rowIndex];
						super.drawRowBackground(s,rowIndex,y,20,item.child("color"),dataIndex);
				}
			}
			
			override protected function drawColumnBackground(s:Sprite, columnIndex:int, color:uint, column:DataGridColumn):void
			{
					var columnShape:Shape = Shape(s.getChildByName("lines"+columnIndex.toString()));
					if( columnShape == null ) {
						columnShape = new Shape();
						columnShape.name = "lines"+columnIndex;
						s.addChild(columnShape);
					} 
					super.drawColumnBackground(s,columnIndex,color,column);
			}
			
		]]>
	</fx:Script>
</mx:DataGrid>