Flex 之 可变背景表格渲染器

1.实现的效果如下；

该表格的单元格的背景色可以变化，随着单元格数数据的变化而变化，字体也随着变化，但背景为深色时，字体改为白色显示。

2.实现步骤：

  CellColorItemRenderer 渲染器的实现，一般的渲染器如，实现有checkbox 的tree 组件的渲染器，只需继承TreeItemRenderer，重写如下的几个方法：

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void

{}

override public  function set data(value:Object):void

{}

override protected function createChildren():void

{}

而gridview 的 可以继承DataGridItemRenderer 。但是这种功能好像没有办法来继承DataGridItemRenderer。但是用如下的实现，

 继承如下的类，然后重写方法。设计的思想是通过改变该单元格的背景色与字体的颜色。重写的方法有：validateNow data

 ，在实现改变颜色时：var dataField:String=DataGridListData(listData).dataField;

dataField=dataField.substring(1,dataField.length);取得该单元格的值，然后改写背景色与字体颜色。为什么要以该种方式实现，是为了方便的实现动态的增加与删除行列。

  1 package com.owncontrol

 2 {  
 3     import mx.containers.HBox;
 4     import mx.controls.Text;
 5     import mx.controls.dataGridClasses.DataGridListData;
 6     import mx.controls.listClasses.BaseListData;
 7     import mx.controls.listClasses.IDropInListItemRenderer;
 8     import mx.controls.listClasses.IListItemRenderer;
 9     import mx.core.IDataRenderer;
10     public class CellColorItemRenderer extends HBox implements IDataRenderer, IDropInListItemRenderer,IListItemRenderer
11      {  
12        
13         public var mytxt:Text;  
14         public function CellColorItemRenderer()
15         {  
16             super();  
17             mytxt= new Text();
18             mytxt.width=this.width;  
19             this.addChild(mytxt);  
20         }  
21           
22         private var _data:Object;  
23         override public function get data():Object 
24         {  
25             return _data;  
26         }  
27         override public function set data(value:Object):void 
28         {  
29             _data = value;  
30         }  
31   
32         private var _listData:DataGridListData;  
33   
34         [Bindable( "dataChange" )]  
35         public function get listData():BaseListData 
36         {  
37             return _listData;  
38         }  
39         public function set listData( value:BaseListData ):void
40         {  
41             _listData = DataGridListData( value );  
42         }  
43           
44         override public function validateNow():void  
45         {  
46             if(data!=null)
47                 {
48                     var item:XML=data as XML;
49                     
50                     var dataField:String=DataGridListData(listData).dataField;
51                     dataField=dataField.substring(1,dataField.length);
52                 
53                     var valueInt:Number=Number(item.attribute(dataField).toString());
54                     //getColor()方法为外部的任意方法，用来获取参数的颜色
55                     var colo:uint=getColor(dataField,valueInt);
56                     setStyle("backgroundColor",colo);
57                     if(setOnFont(colo))
58                         mytxt.setStyle("color",0xffffff);
59                     else 
60                         mytxt.setStyle("color",0x0);
61                     //setStyle("color",colo);
62                     mytxt.width=this.width;
63                     mytxt.text=valueInt.toString();
64                 }
65             super.validateNow();  
66         }
67         
68         /**
69         * @private
70         * 如果颜色在字体的矩阵中，则改变字体的颜色为白色
71         * @param: 输入的颜色
72         * @return 是否设置字体颜色
73         */
74         private function setOnFont(colo:uint):Boolean
75         {
76             var blueRow1:uint=0;
77             var blueRow2:uint=13056;//3300
78             var greenRow1:uint=3342336;//330000
79             var greenRow2:uint=3355392;//333300            //蓝色
80             for(var i:int=0;i<6;i++)
81             {
82 
83                 if(colo==blueRow1)
84                     return true;
85                 if(colo==blueRow2)
86                     return true;
87                 if(colo==greenRow1)
88                     return true;
89                 if(colo==greenRow2)
90                     return true;                
91                 blueRow1=blueRow1+51;
92                 blueRow2=blueRow2+51;
93                 greenRow1=greenRow1+51;
94                 greenRow2=greenRow2+51;
95             }
96             return false;
97         }  
98     }  
99 }

 在界面的使用

  1             private  function AddColumn(par:String):void

 2             {
 3                 var dgColumn:DataGridColumn=new DataGridColumn(par);
 4                 dgColumn.dataField="@"+par;
 5                 var cellColorRenderer:ClassFactory=new ClassFactory(CellColorItemRenderer);
 6                 dgColumn.itemRenderer=cellColorRenderer;
 7                 grid.columns=grid.columns.concat(dgColumn);
 8             }
 9         
10             
11             /*
12              *remove last column
13               */
14             private function RemoveColumn():void
15             {
16                 var columns:Array=this.grid.columns;
17                 var column:Object=columns.pop();                
18                 this.grid.columns=columns;
19             }
20             
21             private function ColumnIsExist(par:XML):Boolean
22             {
23                 var ret:Boolean=false;
24                 var columns:Array=this.grid.columns;
25                 for each(var column:Object in columns)
26                 {
27                     if(par.@name==column.dataField)
28                     {
29                         ret=true;
30                         break;
31                     }
32                 }
33                 return ret;
34             }
35             
36             private  function AddRow(item:Object):void
37             {
38                 if(this.da!=null)
39                     this.da.appendChild(item);
40             }
41             
42             private function RemoveRow(items:Array):void
43             {
44             
45                 for each(var item:XML in items)
46                 {
47                     delete item.parent().*[item.childIndex()];
48                 }
49             }
50             
51             private function RowIsExist(par:XML):Boolean
52             {
53                 var ret:Boolean=false;
54                 var items:Object=this.da..Item;
55                 for each(var item:Object in items)
56                 {
57                     if(par.@test==item.@test)
58                     {
59                         ret=true;
60                         break;
61                     }
62                 }
63                 return ret;
64             }
65             
66                 <view:GridView id="grid" width="100%" height="100%" rowCount="1" dataProvider="{da.Item}" allowMultipleSelection="true" y="10">
67         <view:columns>
68             <mx:DataGridColumn id="test" dataField="@test" headerText="test"/>
69             <mx:DataGridColumn id="time" dataField="@time" headerText="Time"/>
70         </view:columns>
71     </view:GridView >