动态添加DataGrid的数据列

时间:2011-12-28 03:57:34

标签: actionscript-3 flex flex4 flash-builder

伙计们我已经将dataColumn定义为

<mx:DataGridColumn headerText="Role" id="roleAdmin"  headerStyleName="myHeaderStyles">
        <mx:itemRenderer>
                <fx:Component>
                        <mx:VBox>
                                <mx:Text width="100%" text="{(data.role == 0)? 'Super Admin':((data.role == 1)? 'Admin': ((data.role == 2)? 'Regular User': 'Unknown'))}"/>
                        </mx:VBox>
                </fx:Component>
        </mx:itemRenderer>
</mx:DataGridColumn>

我想要做的就是根据我放置的条件动态创建这些数据。任何人都可以帮助我完成我应该做的代码以及如何添加所有这些东西。

最好的问候

2 个答案:

答案 0 :(得分:5)

试试这个。您将获得逻辑如何使用项呈示器处理动态列。

var cols:Array=new Array();
cols = dgDatagrid.columns;
var column:DataGridColumn = new DataGridColumn();
column.headerText = "Role";
column.width=170;
column.dataField="role";
column.setStyle('headerStyleName',myHeaderStyles);
column.itemRenderer = new ClassFactory(MyRenderer);  
cols.push(column);
dgDatagrid.columns=cols;

MyRenderer:

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" 
         >

    <s:layout>
        <s:HorizontalLayout paddingLeft="10" paddingRight="10" />
    </s:layout>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
    import mx.controls.DataGrid;
            import mx.controls.dataGridClasses.DataGridListData;
            import mx.events.FlexEvent;

            import spark.events.TextOperationEvent;

            private var dg:DataGrid;
            private var dglistData:DataGridListData;


            override public function set data( value:Object ) : void 
            {
                super.data = value;
                if(value){
                    dglistData = listData as DataGridListData;
                    if(value[dglistData.dataField]){
txtText.text=((value[dglistData.dataField]) == 0)? 'Super Admin':(((value[dglistData.dataField]) == 1)? 'Admin': (((value[dglistData.dataField]) == 2)? 'Regular User': 'Unknown'))

                        }
                                            }
            }
]]>
</fx:Script>

<mx:VBox>
<mx:Text width="100%" id="txtText"/>
 </mx:VBox>
</s:MXDataGridItemRenderer>

答案 1 :(得分:1)

您根本不需要自定义itemrenderer。这是使用labelFunction的典型示例。

首先,按如下方式编写标签函数:

private function roleLabelFunction(data:Object, column:DataGridColumn):String {
    switch(data.role) {
        case 0: return 'Super Admin';
        case 1: return 'Admin';
        case 2: return 'Regular User';
        default: return 'Unknown';
    }
    //Some flex compilers show a compiler error if there is no return in the main function body, so this is the same as the default case
    return 'Unknown';
}

然后将其用作datagridcolumn的labelFunction

<mx:DataGridColumn headerText="Role" id="roleAdmin"  headerStyleName="myHeaderStyles" labelFunction="roleLabelFunction">