如何使用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>