Flex 的DataGrid列 的字体，根据不同情况 渲染不同颜色

 

分两种情况，

 一种，是绑定了列  dataField，要通过dataField的值进行不同情况的 字体变色。

另外一种，是 不管dataField， 而要通过labelFunction 渲染后的值，进行 字体变色。 第一种相对简单，第二中，让我找了好久才找到解决办法。先说第一种：

 

两者的思路都相同，给列 添加渲染器。既 itemRenderer=渲染器。

 

渲染气为一label，如下：

 

view plain copy to clipboard print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Label xmlns:mx="http://www.adobe.com/2006/mxml">  
3. <mx:Script><!--[CDATA[     
4.         import mx.controls.DataGrid;     
5.         import mx.controls.dataGridClasses.DataGridColumn;     
6.         import mx.controls.listClasses.BaseListData;     
7.              
8.         override public function set data(value:Object):void    
9.         {     
10.             super.data = value;     
11.             var dg:DataGrid = this.owner as DataGrid;     
12.             if(dg && data){     
13.                 var dgc:DataGridColumn =     
14.                     dg.columns[listData.columnIndex] as DataGridColumn;     
15.         //根据 dataField不同情况 配色   
16.                 if(data[dgc.dataField]== "0"){     
17.                     this.setStyle("color",0x7F7F7F);     
18.                 }     
19.                 else if(data[dgc.dataField]=="1"){     
20.                     this.setStyle("color","black");     
21.                 } else if (data[dgc.dataField]=="2") {  
22.                     this.setStyle("color",0xCD0000);     
23.                 }else if(data[dgc.dataField]=="3"){  
24.                     this.setStyle("color",0x008000);     
25.                 }  
26.             }     
27.         }     
28.              
29.     ]]--></mx:Script>     
30. </mx:Label>  

<?xml version="1.0" encoding="utf-8"?> <mx:Label xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script><!--[CDATA[ import mx.controls.DataGrid; import mx.controls.dataGridClasses.DataGridColumn; import mx.controls.listClasses.BaseListData; override public function set data(value:Object):void { super.data = value; var dg:DataGrid = this.owner as DataGrid; if(dg && data){ var dgc:DataGridColumn = dg.columns[listData.columnIndex] as DataGridColumn; //根据 dataField不同情况 配色 if(data[dgc.dataField]== "0"){ this.setStyle("color",0x7F7F7F); } else if(data[dgc.dataField]=="1"){ this.setStyle("color","black"); } else if (data[dgc.dataField]=="2") { this.setStyle("color",0xCD0000); }else if(data[dgc.dataField]=="3"){ this.setStyle("color",0x008000); } } } ]]--></mx:Script> </mx:Label>  

 

 

第二中情况的，解决方案 和上面只有一点不同，如下：

 

view plain copy to clipboard print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Label xmlns:mx="http://www.adobe.com/2006/mxml" width="100%">  
3. <mx:Script><!--[CDATA[  
4. import mx.controls.Alert;     
5.         import mx.controls.DataGrid;     
6.         import mx.controls.dataGridClasses.DataGridColumn;     
7.         import mx.controls.listClasses.BaseListData;     
8.              
9.         override public function set data(value:Object):void    
10.         {     
11.             super.data = value;     
12.             var dg:DataGrid = this.owner as DataGrid;     
13.             if(dg && data){     
14.                 var dgc:DataGridColumn =     
15.                     dg.columns[listData.columnIndex] as DataGridColumn;     
16.                     //获得 lablFuncton 返回的结果   
17.                     var nowCellText:String=dgc.itemToLabel(value);  
18.                     if(nowCellText.indexOf("拒绝")==-1){  
19.                      this.setStyle("color",0x008000);     
20.                     }else{  
21.                      this.setStyle("color",0xCD0000);      
22.                     }  
23.             }     
24.         }     
25.              
26.     ]]--></mx:Script>     
27. </mx:Label>  

<?xml version="1.0" encoding="utf-8"?> <mx:Label xmlns:mx="http://www.adobe.com/2006/mxml" width="100%"> <mx:Script><!--[CDATA[ import mx.controls.Alert; import mx.controls.DataGrid; import mx.controls.dataGridClasses.DataGridColumn; import mx.controls.listClasses.BaseListData; override public function set data(value:Object):void { super.data = value; var dg:DataGrid = this.owner as DataGrid; if(dg && data){ var dgc:DataGridColumn = dg.columns[listData.columnIndex] as DataGridColumn; //获得 lablFuncton 返回的结果 var nowCellText:String=dgc.itemToLabel(value); if(nowCellText.indexOf("拒绝")==-1){ this.setStyle("color",0x008000); }else{ this.setStyle("color",0xCD0000); } } } ]]--></mx:Script> </mx:Label> 

 

 

 

两者的区别就在于 var nowCellText:String=dgc.itemToLabel(value); 

itemToLabel(obj) 方法就是 获得labFunction 的返回值；

然后判断就可以了。

第二种情况的，解决效果图如下：