actionscript-3 - FLEX DataGrid 列の変更

Question

私はFlexが初めてです。付属のグリッド形式でデータを表示したい。DataGrid に表示する最良の方法を見つけました。ただし、CI 列には複数のエントリがあるため、他の列が重複するためです。他の列でのデータの重複を避けたい。添付のスクリーンショットは Excel のものです。Flex でも同じ形式を実現したいと考えています。Flex 4.5 を使用しています

Answer 1

あなたが望むことを行うための最良の方法は、CLS 列のカスタム アイテム レンダラーを作成し、それをリスト コントロールとしてレンダリングすることです。そうすれば、各行の CLS アイテムは、複数の行ではなく 1 つの行のみを占有します。

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>

アイテムリエンダー名：-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>