如何在flex datagrid中设置备用行颜色？

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>

仅当未指定backgroundColor此样式才会生效。

Answer 2

我将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();
    }
}

Answer 3

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

此事件签名中的Object是DataGrid控件，因此重新.DataGrid.Items.Count它并使用.DataGrid.Items.Count模2来获取何时.DataGridItemEventArgs.Item是备用行的引用。 然后我为备用创建了一个css样式，并将.DataGridItemEventArgs.Item.CssClass更改为新创建的样式。

这种方法的优点是可以在此之后进行其他行颜色操作以突出显示; 上面的alternateItemColor解决方案将始终是渲染前的最后一次css更改，可能会覆盖任何其他突出显示。