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

时间:2009-11-12 05:12:48

标签: flex datagrid colors

为flex数据网格中的备用行设置不同颜色的方法是什么?那么容易识别出两个相邻的行吗?

3 个答案:

答案 0 :(得分:10)

使用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时,此style才会生效。

答案 1 :(得分: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();
    }
}

答案 2 :(得分:1)

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

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

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