Question

我在DataGrid上渲染了DropDownList。我的Datagrid由两列组成，第一列包含Item of Item，第二列包含DropDownList（带有要分配给该项的标签）。

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

所以每一行都包含Item name和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

如果您希望selectedItem中的dropdown符合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>

如何在Adobe Flex中的DataGrid上为DropDownList设置所选项目？

1 个答案: