如何在 Adob​​e Flex 中为 DataGrid 上的 DropDownList 设置选定项？

Question

我在 DataGrid 上呈现了 DropDownList。我的 Datagrid 包含两列，第一列包含项目名称，而第二列包含 DropDownList（带有分配给该项目的标签）。

我能够加载以从数据库中获取标签值并将它们加载到 DropDownList。

因此每一行都包含项目名称和加载了标签数据的 DropDownList。

现在我想要的是，我希望每个下拉菜单都显示与该特定项目关联的标签。

我的 Flex 代码：

<mx:DataGrid id="IdDgItemLabelDisp" left="10" right="10" top="39" bottom="10" dataProvider="{arrAllItem}">
<mx:columns>
    <mx:DataGridColumn dataField="itemName" headerText="Item Name"/>
    <mx:DataGridColumn headerStyleName="dataGridHeadingStyle" headerText="Label">
        <mx:itemRenderer>
            <fx:Component>
                <mx:HBox horizontalAlign="center">
                    <fx:Script>
                        <![CDATA[
                        ]]>
                    </fx:Script>
                    <s:DropDownList id="IdCmbItemLabel" dataProvider="{outerDocument.arrLabelCombo}" selectedItem="{outerDocument.arrLabelCombo.getItemAt(0)}">                                                             
                    </s:DropDownList>
                </mx:HBox>
            </fx:Component>
        </mx:itemRenderer>
    </mx:DataGridColumn>
</mx:columns>

Answer 1

如果您想要 dropdown 中的 selectedItem 根据 arrAllItem 中定义的行数据，那么这里是解决方案：

<?xml version="1.0"?>
<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">
<fx:Script><![CDATA[
    import mx.collections.ArrayCollection;
    [Bindable]
    private var arrAllItem:ArrayCollection = new ArrayCollection([
        {itemName: "Laptop", quantity:1},
        {itemName: "Windows", quantity:2},
        {itemName: "Mac", quantity:3},
        {itemName: "Tablet", quantity:4}
    ]);
    [Bindable]
    public var arrLabelCombo:ArrayCollection = new ArrayCollection([
        {label: "One", data: 1},
        {label: "Two", data: 2},
        {label: "Three", data: 3},
        {label: "Four", data: 4}
    ]);
    ]]></fx:Script>
<mx:DataGrid id="IdDgItemLabelDisp" left="10" right="10" top="39" bottom="10" dataProvider="{arrAllItem}">
    <mx:columns>
        <mx:DataGridColumn dataField="itemName" headerText="Item Name"/>
        <mx:DataGridColumn headerStyleName="dataGridHeadingStyle" headerText="Label">
            <mx:itemRenderer>
                <fx:Component>
                    <mx:HBox horizontalAlign="center">
                        <fx:Script>
                        <![CDATA[
                            override public function set data(value:Object):void
                            {
                                if(data != value)
                                {
                                    super.data = value;
                                }
                            }
                            private function getSelectedItem(data:Object):Object
                            {
                                if (data)
                                {
                                    for each(var item:Object in IdCmbItemLabel.dataProvider)
                                    {
                                        if(data.quantity == item.data)
                                            return item;
                                    }
                                }
                                return null;
                            }
                            ]]>
                        </fx:Script>
                        <s:DropDownList id="IdCmbItemLabel" dataProvider="{outerDocument.arrLabelCombo}" selectedItem="{getSelectedItem(data)}">
                        </s:DropDownList>
                    </mx:HBox>
                </fx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>
</s:Application>