如何根据条件为advanceddatagrid列背景着色?

时间:2015-05-08 12:47:58

标签: actionscript-3 flex advanceddatagrid itemrenderers

AdvancedDataGrid不允许我使用列级itemrenderizer或样式函数,我应该在每行的特定条件下填充列的背景颜色。

我尝试了样式功能,它改变了文本颜色而不是单元格的背景颜色>我不知道如何使用itemrender来覆盖ADG的属性。

请帮助我,我尝试了所有可能的方法,这是我最后的希望得到一些解决方案  我的代码:         

        <mx:AdvancedDataGridColumnGroup headerText="Time Frame">    
            <mx:AdvancedDataGridColumn dataField="region" headerText="Region"/>
            <mx:AdvancedDataGridColumn dataField="cat1" headerText="Cat 1"/>
            <mx:AdvancedDataGridColumn dataField="cat2" headerText="Cat 2"/>
        </mx:AdvancedDataGridColumnGroup> 
            <mx:AdvancedDataGridColumn id="levelfield" dataField="level" headerText="level"  styleFunction="myColStyleFunc" />
        <mx:AdvancedDataGridColumnGroup headerText="Role">    
            <mx:AdvancedDataGridColumn dataField="operation" headerText="Operation" />
        </mx:AdvancedDataGridColumnGroup> 

功能

public function myColStyleFunc(data:Object, col:AdvancedDataGridColumn):Object
{
    if(data["level"]== 'Level 1'){
        return {backgroundColor:0x00FF00};
}

1 个答案:

答案 0 :(得分:0)

您可能需要编写自己的项目渲染器,覆盖set data方法,如下所示。该类的名称是ColoredHeaderRenderer。

<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark" 
                                  xmlns:mx="library://ns.adobe.com/flex/mx" 
                                  focusEnabled="true" xmlns:local="*">
    <fx:Script>
        <![CDATA[

            override public function set data(value:Object):void {
                  if(value.Actual == 29134) {
                      lblData.getTxt().background = true;
                      lblData.getTxt().backgroundColor = '0xFFFF00';
                  } else if(value.Actual == 38865) {
                      lblData.getTxt().background = true;
                      lblData.getTxt().backgroundColor = '0xFF0000';
                  }
                   super.data=value;  
            }
        ]]>
    </fx:Script>
    <local:CustomLabel id="lblData" top="0" left="0" right="0" bottom="0" text="{listData.label}"/>
</s:MXAdvancedDataGridItemRenderer>

我已尝试使用以下示例代码:

<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" xmlns:local="*">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var dpHierarchy:ArrayCollection = new ArrayCollection([
                {Region:"Southwest", categories: [
                    {Region:"Arizona", categories: [ 
                        {Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
                        {Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},  
                    {Region:"Central California", categories: [ 
                        {Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},  
                    {Region:"Nevada", categories: [ 
                        {Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},  
                    {Region:"Northern California", categories: [ 
                        {Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
                        {Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},  
                    {Region:"Southern California", categories: [ 
                        {Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
                        {Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
                ]}
            ]);
        ]]>
    </fx:Script>

    <mx:AdvancedDataGrid width="100%" height="100%">
        <mx:dataProvider>
            <mx:HierarchicalData source="{dpHierarchy}" 
                                 childrenField="categories"/>
        </mx:dataProvider>
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="Region"/>
            <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                                       headerText="Territory Rep"/>
            <mx:AdvancedDataGridColumn dataField="Actual" itemRenderer="ColoredHeaderRenderer"/>
            <mx:AdvancedDataGridColumn dataField="Estimate"/>
        </mx:columns>
    </mx:AdvancedDataGrid>
</s:Application>

它工作正常,如下所示: enter image description here