Flex DataGrid单元格背景色 单元格字体颜色控制

前阵子在做Flex网页时,关于单元格字体颜色这方面纠结了好久。现在总结一下实现方法

一、单元格背景色：

 修改单元格背景色就需要借助与itemRenderer了。这个itemRenderer如果是Label的话，利用opaqueBackground属性；或者利用DataGridItemRenderer:

override function set data():void

{

this.background = true;

this.backgroundColor = 0xCC0000;

}

不过这种方法会有问题,因为itemRenderer是重复利用的,这样再点击滚动条时,就会出现错乱的情况。

解决方法：

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

{
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    var colors:Array=[0x92f196,0x92f196];
    var alphas:Array=[0.3,0.3];
    var ratios:Array=[0x00,0xff];
    var myListData:DataGridListData=DataGridListData(listData);

    if(myListData.dataField=="UN")//if(Number(data.UN)<=50||Number(data.UN)>=100)也可以这样
    {
     this.graphics.clear();
     this.graphics.beginGradientFill(GradientType.LINEAR,colors,alphas,ratios);
     this.graphics.drawRect(0,0-topHeight,unscaledWidth,26);
    }

    else
      this.graphics.clear();

}

二、单元格字体颜色控制：

有两种方法，第一种通过htmlText属性，另一种在itemRenderer的updateDisplayList函数（或者借助于stylefunction）。倘若是修改过的单元格数据变为红色的话，就需要记录旧值，然后itemEditEnd之后去做比较。以下为记录旧值的情况:

htmlText:htmlText="{data.hasOwnProperty('OldData')?(data.OldData.UN!=null?

'&lt;font color=&quot;#ff0000&quot;&gt;'+data.UN+'&lt;/font&gt;':data.UN):data.UN}"

updateDisplayList实现方法:

    //修改过的数据设为红色
    if(data.hasOwnProperty("oldData"))
    {
     if(data[myListData.dataField]!=data.OldData[myListData.dataField])
      this.setStyle("color","red");
     else
      this.setStyle("color","black");
    }

记录旧值:也是有两种方法

1.在itemRenderer的creationgComplete事件中

                if (!data.hasOwnProperty("oldData"))
                {
                    var oldData:Object = {};
                    var classInfo:Object = ObjectUtil.getClassInfo(data);
                    var properties:Array = classInfo["properties"];
                    for (var i:int = 0; i < properties.length; i++)
                    {
                        var property:String = properties[i];
                        oldData[property] = data[property];
                    }
                    //oldData属性中，记录的是原object
                    data.oldData = oldData;
                }//这种方法记录了data的所有属性,这段代码也可以写在datagrid的itemEditBegin事件中

                 //此时需要var data:Object = evt.itemRenderer.data;

2.在datagrid的itemEditEnd事件中做记录,此时记录的只是需要记录的字段

    if(evt.dataField == "Freight")
    {
     if(data.Freight != TextInput(evt.target.itemEditorInstance).text)//值发生改变后才去判断
     {
      if(!data.hasOwnProperty("OldData"))
      {
       var obj1:Object = new Object();
       obj1.Freight = TextInput(evt.target.itemEditorInstance).text;
       data.OldData = obj1;
       GridChangeTag++;//变量用于记录是否做过修改,用于其它操作
      }
      else
      {
       if(data.OldData.Freight == null)//之前没有该字段的记录,但是有OldData属性
         data.OldData.Freight = data.Freight;
       else
       {

        //值修改为原值则删除该字段的记录
        if(data.OldData.Freight == TextInput(evt.target.itemEditorInstance).text)
         delete data.OldData.Freight;

        //此时多加一步判断用于删除OldData属性
        if(data.OldData.Freight == null && data.OldData.TransSName == null)
        {
         delete data.OldData;
         GridChangeTag--;
        }
       }
      }
     }
    }

补充一点关于styleFunction的实现方法:(AdvancedDataGridColumn才有的属性styleFunction="styleHandler")

   private function styleHandler(data:Object, column:AdvancedDataGridColumn):Object
   {
    if (!data.hasOwnProperty("oldData"))
        return {color: 0x000000, textSelectedColor: 0x000000, textRollOverColor: 0x000000};
    //值没有做修改的情况
    if (data[column.dataField] == data.oldData[column.dataField])
        return {color: 0x000000, textSelectedColor: 0x000000, textRollOverColor: 0x000000};
    return {color: 0xFF0000, textSelectedColor: 0xFF0000, textRollOverColor: 0xFF0000};
   }