如何在一列中显示来自两个不同元素的数据?

时间:2011-03-10 13:10:28

标签: flex flex3 flex4

如何在一列中显示来自两个不同元素的数据?或者如果有办法组合两列?

与下面的示例一样,只显示firstName。如何在同一列中显示lastName?

Folloing是“XML文件”,无法更改':

<userEmail>
<user firstName="john" lastName="seena" />
<user firstName="pinku" lastName="phil"/>
</userEmail>

代码:

monitoringArray = event.result.userEmail.user;
.
.
. 
<mx:DataGrid id="monDataGrid" x="10" y="10" dataProvider="{monitoringArray}">
 <mx:columns>
  <mx:DataGridColumn width="150" headerText="User Name" dataField="firstName"
 </mx:columns>
</mx:DataGrid>

3 个答案:

答案 0 :(得分:2)

可以通过使用DatagridColumn的labelFunction属性来完成定义。

粗略的例子:

<?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">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>


    <fx:Script>
        <![CDATA[

            private var xml:XML = <userEmail>
                                    <user firstName="john" lastName="seena" />
                                    <user firstName="pinku" lastName="phil"/>
                                  </userEmail>

            private function getCombinedUserNameLabel(item:Object, col:DataGridColumn):String
            {
                return item.@firstName + " " + item.@lastName;
            }
        ]]>
    </fx:Script>

    <mx:DataGrid id="monDataGrid" x="10" y="10" dataProvider="{xml.user}">
        <mx:columns>
            <mx:DataGridColumn width="150" headerText="User Name" labelFunction="{getCombinedUserNameLabel}"/>
        </mx:columns>
    </mx:DataGrid>  

编辑:阵列也不应成为问题:

<?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"
               creationComplete="application1_creationCompleteHandler(event)"
               >
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>


    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            private var xml:XML = <userEmail>
                                    <user firstName="john" lastName="seena" />
                                    <user firstName="pinku" lastName="phil"/>
                                  </userEmail>;

            private var monitoringArray:Array = [{firstName:"john", lastName:"seena"}, {firstName:"pinku", lastName:"phil"}];

            private function getCombinedUserNameLabel(item:Object, col:DataGridColumn):String
            {
                return item.@firstName + " " + item.@lastName;
            }

            private function getCombinedUserNameLabel2(item:Object, col:DataGridColumn):String
            {
                return item.firstName + " " + item.lastName;
            }           

            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                // TODO Auto-generated method stub
            }

        ]]>
    </fx:Script>

    <s:VGroup>
        <mx:DataGrid id="monDataGrid" x="10" y="10" dataProvider="{xml.user}">
            <mx:columns>
                <mx:DataGridColumn width="150" headerText="User Name" labelFunction="{getCombinedUserNameLabel}"/>
            </mx:columns>
        </mx:DataGrid>

        <mx:DataGrid id="monDataGrid2" x="10" y="10" dataProvider="{monitoringArray}">
            <mx:columns>
                <mx:DataGridColumn width="150" headerText="User Name" labelFunction="{getCombinedUserNameLabel2}"/>
            </mx:columns>
        </mx:DataGrid>      

    </s:VGroup>

</s:Application>

答案 1 :(得分:0)

我想如果不更改XML文件就无法完成。 datafield属性只能使用一个字符串。 以下是adobe参考网站的定义。

    dataField : String
    The name of the field or property in the data provider item 
    associated with the column.

答案 2 :(得分:0)

datagrid中的复杂列可以通过项呈示器实现。您可以在adobe的tour de flex app上看到示例。 Tour De Flex