2

我正在尝试在数据网格中添加一个 textInput,以便用户可以看到有一个文本框供他们编辑。我有一个 textInputRender 以便我可以在 dataGrid 中显示文本框并相应地更新值。

我还有另一个 dataGrid 表来捕获我在之前的 dataGrid 表中选择的值。

问题是我能够在 dataGrid 表中看到文本框。但是我必须双击单元格并输入我的值才能将 dataGrid 中单元格的值保存回数据提供者。实际上,用户不会双击输入,因为他们可能只是在其中输入值。是否有无需双击单元格即可捕获值的方法??

双击文本框并输入我的新值后的下一个问题它不反映文本框中的变化。但是我可以看到新输入的值被捕获。

请帮助我。我已经为此苦苦挣扎了很长时间。请告诉我如何解决这个问题?

这是我将它放在 GridItemRenderer 标签中的文本框的自定义渲染器:

<s:TextInput id="ti" text="{data.quant}"/>  

这是我的代码:

 <fx:Script>
    <![CDATA[                
        import FrontEndObjects.ColourItems;         
        import mx.collections.ArrayCollection;          
        import spark.events.IndexChangeEvent;

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

        private function addOrder():void{               
            var orderItems:ColourItems = new ColourItems("OrderNo","1","--Choose a colour--");
            order.addItem(orderItems);              
        }  

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

        protected function saveData(event:MouseEvent):void
        {
            //dataGrid is the id (name) of our dataGrid table
            var dataProvider = myDG.dataProvider;               
            var item = null;
            for (var i:int = 0; i < dataProvider.length; i++)
            {
                item = dataProvider.getItemAt(i);
                confirmOrder.addItem(item);
                //Alert.show("the data is : " + item);
            } 

        }
    ]]>
</fx:Script>

<s:BorderContainer x="240" y="50" width="449" height="518">
    <s:DataGrid id="myDG" x="32" y="27" width="393" height="151" dataProvider="{order}"
                editable="true" variableRowHeight="true">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn dataField="label1" headerText="Order #" editable="false"/>                
                <s:GridColumn dataField="quant" headerText="Qty" editable="true" itemRenderer="DesignItemRenderer.myTextInputRender"/>                  
                <s:GridColumn dataField="color" headerText="Color" editable="true" rendererIsEditable="true">                       
                    <s:itemRenderer>
                        <fx:Component>                              
                            <s:GridItemRenderer>
                                <fx:Script>
                                    <![CDATA[
                                        import spark.events.IndexChangeEvent;

                                        protected function onCbChange(event:IndexChangeEvent):void
                                        {
                                            var value:String = (event.currentTarget as DropDownList).selectedItem;
                                            data[column.dataField] = value; 
                                        }
                                    ]]>
                                </fx:Script>                                    
                                <s:DropDownList id="cb" width="100%" change="onCbChange(event)" prompt="--Choose a colour--">  <!--selectedIndex="0" requireSelection="true" >-->
                                    <s:dataProvider>
                                        <s:ArrayCollection>
                                            <fx:String>red</fx:String>
                                            <fx:String>blue</fx:String>
                                            <fx:String>green</fx:String>
                                        </s:ArrayCollection>                                        
                                    </s:dataProvider>
                                </s:DropDownList>                                   
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>           
                </s:GridColumn>                 
            </s:ArrayList> 
        </s:columns >
    </s:DataGrid>
    <s:DataGrid id="myDG1" x="24" y="317" width="401" height="174" dataProvider="{confirmOrder}"
                requestedRowCount="4">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn dataField="label1" headerText="Ordernum - getback"></s:GridColumn>
                <s:GridColumn dataField="quant" headerText="quanty-getback"></s:GridColumn>
                <s:GridColumn dataField="color" headerText="color-getback"></s:GridColumn>
            </s:ArrayList>
        </s:columns>    
    </s:DataGrid>
    <s:Button x="355" y="186" label="add" click="addOrder()" />
    <s:Button x="277" y="186" label="save" click="saveData(event)"/>
</s:BorderContainer>
4

2 回答 2

1

试试这个:

在 GridColumn "quant" 中设置 rendererIsEditable="true"

<s:GridColumn dataField="quant" headerText="Qty" editable="true" rendererIsEditable="true" itemRenderer="DesignItemRenderer.myTextInputRender"/>

像这样更改您的 ItemRenderer

<?xml version="1.0" encoding="utf-8"?> 
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx"
                clipAndEnableScrolling="true">

<fx:Binding source="ti.text" destination="data.quant"/>

<s:TextInput 
    id="ti" 
    text="{data.quant}" 
    editable="true"/> 

</s:GridItemRenderer>

它对我很好

于 2013-01-31T09:03:08.553 回答
0

无论如何,我无法识别出您的代码存在哪些问题,我设法开发了一个:

数据网格中的文本输入,以便用户可以看到有一个文本框供他们编辑

使用此代码

       <mx:DataGrid id="weekGrid" width="100%" height="60%"
    dataProvider="{weekList}" editable="true">
<mx:DataGridColumn id="noteColumn" dataField="note" editable="false"
               headerText="Note" sortable="false">
    <mx:itemRenderer>
        <fx:Component>
            <mx:VBox width="100%" height="100%" horizontalAlign="center"
                     verticalAlign="middle">
                <fx:Script>
                    <![CDATA[
                        import managers.StraordinariManager;

                        import spark.events.TextOperationEvent;

                        protected function textinput1_changeHandler(event:TextOperationEvent):void
                        {
                            data['note']=textInput.text;        
                            outerDocument.notSavedAlert.statrtBlinker();
                        }

                    ]]>
                </fx:Script>

                <s:TextInput id="textInput" width="100%" height="100%"
                             borderVisible="false"
                             change="textinput1_changeHandler(event)"
                             editable="{data.oreStr!=null}"

                             text="{data.oreStr!=null?data.note:''}">
                </s:TextInput>
            </mx:VBox>
        </fx:Component>
    </mx:itemRenderer>
   </mx:DataGridColumn>
</mx:DataGrid>

我使用 aItemRenderer而不是 aItemEditor来避免双击问题。请注意,列editable属性设置为false,但网格设置为editable="true"

我还使用相同的技术来插入不同的组件,这是一个使用单选按钮的示例:

                <mx:DataGridColumn id="flag" headerText="Approva Rifiuta" >
                <mx:itemRenderer>
                    <fx:Component>
                        <mx:HBox width="100%" height="100%" horizontalAlign="center" 
                                 verticalAlign="middle">

                            <fx:Script>
                                <![CDATA[
                                    import managers.IngressiManager;
                                    import mx.events.FlexEvent;

                                    protected function radiobutton1_changeHandler(event:Event):void
                                    {   
                                        if(apprRb.selected){
                                            data['flag']=ApprovazioneStraordinariView.APPROVA_FLAG;
                                            data['note']="";
                                        }else
                                            if(rifRb.selected){
                                                data['flag']=ApprovazioneStraordinariView.RIFIUTA_FLAG;
                                            }
                                    }

                                ]]>
                            </fx:Script>
                            <s:RadioButton id="apprRb" label="A"
                                           click="radiobutton1_changeHandler(event)"  
                                           groupName="approvaRifiutaGroup" 
                                           selected="{data['flag']==ApprovazioneStraordinariView.APPROVA_FLAG}">
                            </s:RadioButton>
                            <s:RadioButton id="rifRb" label="R"  
                                           click="radiobutton1_changeHandler(event)"
                                           groupName="approvaRifiutaGroup" 
                                           selected="{data['flag']==ApprovazioneStraordinariView.RIFIUTA_FLAG}">
                            </s:RadioButton>
                            <fx:Declarations>
                                <s:RadioButtonGroup  id="approvaRifiutaGroup">
                                </s:RadioButtonGroup>
                            </fx:Declarations>
                        </mx:HBox>
                    </fx:Component>
                </mx:itemRenderer>
于 2013-01-31T08:39:58.197 回答