如何在flex數據網格中設置備用行顏色？

Question

在Flex數據網格中爲交替行設置不同顏色的方法是什麼？這樣兩個相鄰的行很容易識別？

Answer 1

使用alternatingItemColors風格。您可以在陣列中指定任意數量的顏色。

<mx:DataGrid id="dg" alternatingItemColors="[#449933, #994433]" 
    dataProvider="{[{d:'ASD', c:'$#'},{d:'WER', c:'^@'},{d:'VCB', c:'*!'}]}"> 
    <mx:columns> 
     <mx:DataGridColumn dataField="d"/> 
     <mx:DataGridColumn dataField="c"/> 
    </mx:columns> 
</mx:DataGrid> 

這style只有當沒有指定backgroundColor效果。

Answer 2

另一種方法是使用DataItemBound(Object, DataGridItemEventArgs)事件處理程序。

在此事件簽名的對象是數據網格控制，所以重鑄它並使用.DataGrid.Items.Count模2以獲得用於當.DataGridItemEventArgs.Item是備用行的參考。然後，我爲替代者創建了一個css樣式，並將.DataGridItemEventArgs.Item.CssClass更改爲新創建的樣式。

該方法的優點是可以在此之後進行其他行顏色操作以進行突出顯示;上面的alternateItemColor解決方案將始終是渲染前的最後一次css更改，可能會覆蓋其他突出顯示。

Answer 3

我用的itemRenderer到的DataGridColumn

<mx:DataGrid> 
    <mx:columns> 
     <mx:DataGridColumn dataField="A" itemRenderer="com.shels.table.MarkObject"/> 
     <mx:DataGridColumn dataField="B" /> 
    </mx:columns> 
</mx:DataGrid> 

package com.shels.table { 

import flash.display.Graphics; 
import flash.geom.Matrix; 

import mx.controls.Label; 
import mx.controls.dataGridClasses.*; 

public class MarkObject extends Label { 

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { 
     super.updateDisplayList(unscaledWidth, unscaledHeight); 

     var g:Graphics = graphics; 
     g.clear(); 

     var dField:String = DataGridListData(listData).dataField; 
     var f:int = DataGridListData(listData).columnIndex; 

     var c:int = 0xFFFFFF; 

     // c = parseInt(data[ "color"]); 
     // You can to use field values from record. 

     g.beginFill(c); 
     g.drawRect(0, 0, unscaledWidth, unscaledHeight); 

     g.endFill(); 
    } 
}