actionscript-3 - FLEX DataGrid 列修改

Question

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

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>

项目重新渲染器名称： - 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>