如何使用DataGrid中的styleFunction

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>