如何根据条件为高级数据网格列背景着色?
how to color advanceddatagrid column background based on condition?
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};
}
您可能需要编写自己的项目渲染器来覆盖 set data
方法,如下所示。 class 的名称是 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>
它工作正常,如下所示:
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};
}
您可能需要编写自己的项目渲染器来覆盖 set data
方法,如下所示。 class 的名称是 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>
它工作正常,如下所示: