Question

如何使用DataGrid中的styleFunction

Answer 1

Flex 中的DataGrid和DataGridColumn上都可以使用styleFunction，如果在DataGrid上使用，那么样式会应用到符合条件的整行，如果是在DataGridColumn上使用，那么样式只会应用到具体的列上，styleFunction的签名是固定的，如下：

public function myStyleFunc(data:Object,col:AdvancedDataGridColumn):Object
{
if (data["Artist"] == artistName)
return {fontWeight:"bold", backgroundColor:0xFF0000,color:0xCCCCCC};
return null;
}

其中的返回值为样式的name/value对，另外有一个非常重要的地方需要特别注意，这些样式其实是给itemRenderer使用的，也就是说只有你的itemRenderer里有这一样式属性，样式才会正确显示出来，DataGrid的默认itemRenderer为mx Text,而Text没有backgroundColor这一样式属性，所以上面的例子里你会发行背景颜色没有生效，虽然DataGridColumn有backgroundColor,但是Text里面根本没有这一项，所以如果你想加更多的样式属性的话，就得自己实现一个自定义的itemRenderer.

另外你可以通过myADG.invalidateList()来刷新DataGrid使其显示出样式，当然默认情况下当初始构造DataGrid或重构时都会自动调用styleFunction。
AdvancedDataGrid中使用styleFunction代码：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" width="400" height="500">
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

import spark.components.Button;
[Bindable]
private var dpADG:ArrayCollection = new ArrayCollection([
{Artist:'Pavement', Album:'Slanted and Enchanted', Price:12.99},
{Artist:'Pavement', Album:'Brighten the Corners', Price:13.99},
{Artist:'Saner', Album:'A Child Once', Price:14.99},
{Artist:'Saner', Album:'Helium Wings', Price:12.99},
{Artist:'The Doors', Album:'The Doors', Price:10.99},
{Artist:'The Doors', Album:'Morrison Hotel', Price:12.99},
{Artist:'Grateful Dead', Album:'American Beauty', Price:11.99},
{Artist:'Grateful Dead', Album:'In the Dark', Price:17.99},
{Artist:'Grateful Dead', Album:'Shakedown Street', Price:13.99},
{Artist:'The Doors', Album:'Strange Days', Price:12.99},
{Artist:'The Doors', Album:'The Best of the Doors', Price:10.99}
]);
protected var artistName:String;
private function setArtistName(event:MouseEvent):void{
artistName = mx.controls.Button(event.currentTarget).label;
adg.invalidateList();
}
private function myStyleFunc(data:Object,col:AdvancedDataGridColumn):Object{
if(data["Artist"] == artistName){
return { color:0xFF0000};
}
return null;
}
private function myPrice(data:Object,col:AdvancedDataGridColumn):Object{
if(data["Price"] <= 11.00){
return { color:0x00FF00};
}
return null;
}
]]>
</fx:Script>
<mx:AdvancedDataGrid id="adg" width="100%" height="400" dataProvider="{dpADG}" styleFunction="myStyleFunc">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="Artist"/>
<mx:AdvancedDataGridColumn dataField="Album"/>
<mx:AdvancedDataGridColumn dataField="Price" styleFunction="myPrice">
<mx:formatter>
<mx:CurrencyFormatter/>
</mx:formatter>
</mx:AdvancedDataGridColumn>
</mx:columns>
</mx:AdvancedDataGrid>
<mx:HBox x="8" y="430" width="100%" height="100%">
<mx:Button label="Pavement" click="setArtistName(event);"/>
<mx:Button label="Saner" click="setArtistName(event);"/>
<mx:Button label="The Doors" click="setArtistName(event);"/>
</mx:HBox>
</s:Application>