Question

我是Flex的新手。我想以附加的网格格式显示数据。我找到了在DataGrid中显示的最佳方式。但CI列有多个条目，因此其他列将重复。我想避免在其他列中重复数据。附加截图是excel，我想在Flex中实现相同的格式。我使用的是Flex 4.5

My Requirement

Answer 1

我认为你想做的最好的方法是为CLS列创建一个自定义项呈示器，并将其呈现为列表控件。这样，每行中的CLS项只占用一行而不是多行。

Answer 2

您可以通过以下代码获得一些想法......您可以使用以下概念为您的实现构建逻辑。以下示例是根据您的要求未完成的示例： -

<?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[
            import mx.collections.ArrayCollection;
            import mx.core.UIComponent;
            import mx.events.AdvancedDataGridEvent;
            import mx.events.ListEvent;

            [Bindable]
            private var dpHierarchy:ArrayCollection= new ArrayCollection
                ([
                    {name:"Barbara Jennings", address: "Arizona", contact:999970, orders:["1"]},
                    {name:"Dana Binn", address: "Arizona", contact:9999130, orders:["2"]},
                    {name:"Joe Smith", address: "California", contact:9992929, orders:["3"]},
                    {name:"Alice Treu", address: "California", contact:9999230, orders:["4"]}
                ]);                    

            private function addOrder():void
            {
                for(var i:int = 0 ; i < dpHierarchy.length; i++)
                {
                    if(dropDownID.selectedItem.name == dpHierarchy[i].name)
                    {
                        var itemUpdated:Array = dpHierarchy[i].orders;
                        itemUpdated.push(orderNumber.text);
                        dpHierarchy[i].orders = itemUpdated;
                        dpHierarchy.itemUpdated(dpHierarchy[i]);
                        break;
                    }
                }
            }

        ]]>
    </fx:Script>
    <mx:VBox x="30" y="30" width="450" height="400">
        <s:HGroup>
            <s:Button label="Add Order" click="addOrder()"/>
            <s:DropDownList id="dropDownID" dataProvider="{dpHierarchy}" labelField="name" selectedIndex="0"/>
            <s:TextInput id="orderNumber" width="100"/>
        </s:HGroup>
        <mx:AdvancedDataGrid id="myADG"   
                             dataProvider="{dpHierarchy}"
                             variableRowHeight="true" wordWrap="true">
            <mx:columns>
                <mx:AdvancedDataGridColumn dataField="name" headerText="Name"/>
                <mx:AdvancedDataGridColumn dataField="address" headerText="Address"/>
                <mx:AdvancedDataGridColumn dataField="contact" headerText="Contact"/>
                <mx:AdvancedDataGridColumn dataField="orders" headerText="Orders" itemRenderer="OrderItemRenderer"/>

            </mx:columns>   
        </mx:AdvancedDataGrid>
    </mx:VBox>  
</s:Application>

项目Reenderer名称： - OrderItemRenderer

<?xml version="1.0" encoding="utf-8"?>
<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" width="90%" height="90%">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable]
            private var initDG:ArrayCollection = new ArrayCollection();

            override public function set data(value:Object):void
            {
                super.data = value;
                initDG = new ArrayCollection(value.orders)
            }
        ]]>
    </fx:Script>
    <mx:DataGrid id="dataGrid" dataProvider="{initDG}" headerHeight="0" rowCount="{initDG.length}"/>
</s:MXAdvancedDataGridItemRenderer>

FLEX DataGrid列修改

2 个答案: