FLEX4實踐—DatagridColumn根據條件顯示不同顏色

需求：

表格中存在不同的資料，要求將 name='Apple'的單元格顯示紅色

下面是示例程式碼：

<?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" xmlns:conp="components.*" minWidth="955" minHeight="600"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> <fx:Array id="fruit"> <fx:Object data="A" name="Apple"/> <fx:Object data="B" name="Banana"/> <fx:Object data="A" name="Apple"/> <fx:Object data="B" name="Banana"/> </fx:Array> </fx:Declarations> <mx:DataGrid x="414" y="132" width="390" height="174" dataProvider="{fruit}" rowCount="9" selectionColor="#F9E4B7" alternatingItemColors="[#f9f4f4,#dce9fd]"> <mx:columns> <mx:DataGridColumn headerText="Data" dataField="data"/> <mx:DataGridColumn headerText="Name" dataField="name"> <mx:itemRenderer> <fx:Component> <conp:TextRenderer text="{data.name}"/> </fx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> </s:Application>

 

components.TextRenderer.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Text xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Script> <!--[CDATA[ override public function set data(value:Object):void{ super.data = value; if(value.name == 'Apple'){ setStyle('color',0xFF0000); } } ]]--> </fx:Script> </mx:Text>

 

執行結果：