about Flex DataGrid edit

Summary(概述)： Adobe Flex 的 dataGrid 有很强大的功能，比如ItemRenderer,headerRenderer等，可以方便地实现自己想要的功能。但对dataGrid直接编辑并保存到Service端，就有点麻烦了。

 

Requirement(需求)： 对dataGrid进行单位格编辑，若有变化，保存到Service; 否则不保存。

 

Solution(解决方案): 运用DataGrid 的 itemEditBegin 事件、itemFocusOut 事件。

1.  when the itemEditBegin is dispatched, the event handler should save this cell value as old value.(编辑前保存旧值)

2. when the listener of itemFocusOut is responding, you should check the current cell to the old value. If it's value have changed, you should save the new value to Service.(编辑后判断，是否更改。)

 

Example(例子)  as follow:

 

<mx:Script>

        <![CDATA[

 

 

private var oldValueOfEditedItem: CreditVO;

 

   private function creditDGEditBegin(event: DataGridEvent): void {

             oldValueOfEditedItem = (event.itemRenderer.data as CreditVO).clone() as CreditVO;

            }

 

            private function editedItemChanged(newValue: CreditVO): Boolean {

             return (newValue.amount != oldValueOfEditedItem.amount)|| 

               (newValue.description != oldValueOfEditedItem.description);

            }

            private function creditDGEditEnd(event: DataGridEvent): void {

             var newValue: CreditVO = event.itemRenderer.data as CreditVO;

             if (editedItemChanged(newValue)) {

             dispatchEvent(new UpdateCreditEvent(newValue))

             }

            }

 

 

 

  ]]>

    </mx:Script>

 

 

 

 <mx:DataGrid id="creditLineDG"

     dataProvider="{creditLineDGData}"

        width="100%"

        itemEditBegin="creditDGEditBegin(event)"

        itemFocusOut="creditDGEditEnd(event)"

        selectable="true"

        allowMultipleSelection="false"     

        name="inbox"

        paddingLeft="0"

        height="100%"

        textAlign="right"

        editable="true"

        >

        <mx:columns>      

 

            <mx:DataGridColumn textAlign="center" headerText="Reg" dataField="regSelected" editable="false" sortable="false" width="30">

             <mx:headerRenderer>

                 <mx:Component>

                 <mx:VBox horizontalAlign="center" verticalGap="-2" 

                 horizontalScrollPolicy="off" verticalScrollPolicy="off">

                 <mx:Label text="Reg"/>

                 <mx:CheckBox id="buffer1"  selected="{outerDocument.regSelectedAll}" click="outerDocument.clickReg(event); "/>

                 </mx:VBox>

                 </mx:Component>

                </mx:headerRenderer>

             <mx:itemRenderer>

             <mx:Component>

             <mx:CheckBox selected="{data.regSelected}" click="{data.regSelected = !data.regSelected;outerDocument.checkClick(event);}" />

             </mx:Component>

             </mx:itemRenderer>

            </mx:DataGridColumn>

 

            <mx:DataGridColumn textAlign="center" headerText="Buffer1" dataField="buffer1Selected" editable="false" sortable="false" width="55">

             <mx:headerRenderer>

                 <mx:Component>

                 <mx:VBox horizontalAlign="center" verticalGap="-2"

                 horizontalScrollPolicy="off" verticalScrollPolicy="off">

                 <mx:Label text="Buffer1"/>

                 <mx:CheckBox id="reg" selected="{outerDocument.bufferSelectedAll}" click="outerDocument.clickBuffer1()"/>

                 </mx:VBox>

                 </mx:Component>

                </mx:headerRenderer>

             <mx:itemRenderer >

             <mx:Component>

             <mx:CheckBox selected="{data.buffer1Selected}" click="data.buffer1Selected = !data.buffer1Selected;outerDocument.checkClick(event);" />

             </mx:Component>

             </mx:itemRenderer>

            </mx:DataGridColumn>

 

            <mx:DataGridColumn headerText="{resourceManager.getString(JupiterConstants.RESOURCE_BUNDLE, 'START_DATE')}"

                dataField="startdate"

                textAlign="left"

                editable="false"

                labelFunction="labelFunction"/>

            <mx:DataGridColumn headerText="{resourceManager.getString(JupiterConstants.RESOURCE_BUNDLE, 'END_DATE')}"

                dataField="enddate"

                textAlign="left"

                editable="false"

                labelFunction="labelFunction"/>

            <mx:DataGridColumn headerText="{resourceManager.getString(JupiterConstants.RESOURCE_BUNDLE, 'TYPE')}"

                dataField="type"

                editable="false"

                textAlign="left"

                />

            <mx:DataGridColumn headerText="{resourceManager.getString(JupiterConstants.RESOURCE_BUNDLE, 'PROVIDER_NAME')}"

                dataField="providername"

                textAlign="left"

                visible="false"

                editable="false">

            </mx:DataGridColumn>

             <mx:DataGridColumn headerText="{resourceManager.getString(JupiterConstants.RESOURCE_BUNDLE, 'PROVIDER_NAME')}"

                dataField="providername"

                textAlign="left"

                visible="false"

                editable="false">

            </mx:DataGridColumn>

            <mx:DataGridColumn headerText="Nominal Amount"

                dataField="commitmentfeed"

                labelFunction="currencyLabel"

                textAlign="right"                

                editable="false" >

             <mx:headerRenderer>

                 <mx:Component>

                 <mx:VBox horizontalAlign="center" verticalGap="-2" horizontalScrollPolicy="off" verticalScrollPolicy="off">

                 <mx:Label text="Nominal"/>

                 <mx:Label text="Amount"/>

                 </mx:VBox>

                 </mx:Component>

                </mx:headerRenderer>                

            </mx:DataGridColumn>

 

            <mx:DataGridColumn headerText="{resourceManager.getString(JupiterConstants.RESOURCE_BUNDLE, 'AMOUNT')}"

                dataField="amount" 

                labelFunction="currencyLabel"

                textAlign="right" 

                editable="true" >

             <mx:headerRenderer>

                 <mx:Component>

                 <mx:VBox horizontalAlign="center" verticalGap="-2" horizontalScrollPolicy="off" verticalScrollPolicy="off">

                 <mx:Label text="Market Value"/>

                 <mx:Label text="Available"/>

                 </mx:VBox>

                 </mx:Component>

               </mx:headerRenderer>

 

                <mx:itemEditor>

                  <mx:Component>            

                   <mx:TextInput text="{data.amount}" restrict="0-9.">            

                   </mx:TextInput> 

                 </mx:Component>

                </mx:itemEditor>

            </mx:DataGridColumn>

 

            <mx:DataGridColumn  headerText="{resourceManager.getString(JupiterConstants.RESOURCE_BUNDLE, 'DESCRIPTION')}"

                dataField="description"

                textAlign="left"

                editable="true">

             <mx:itemEditor>

             <mx:Component>

             <mx:TextInput text="{data.description}">            

             </mx:TextInput>

             </mx:Component>

             </mx:itemEditor>

            </mx:DataGridColumn>

 

            <mx:DataGridColumn headerText="{resourceManager.getString(JupiterConstants.RESOURCE_BUNDLE, 'CURRENCY')}"

                dataField="currency"

                editable="false"

                textAlign="left" width="60"

                />

 

            <mx:DataGridColumn headerText="{resourceManager.getString(JupiterConstants.RESOURCE_BUNDLE, 'DRAWN_INTEREST')}"

                dataField="drawninterest"

                labelFunction="currencyLabel"

                visible="false"

                textAlign="right"

                />

            <mx:DataGridColumn headerText="{resourceManager.getString(JupiterConstants.RESOURCE_BUNDLE, 'UNDRAWN_INTEREST')}"

                dataField="undrawninterest"

                labelFunction="currencyLabel"

                visible="false"

                textAlign="right"

                />          

 

        </mx:columns>

    </mx:DataGrid>

 

 

注：该代码不能直接运行，因为有一些Class依赖于项目，但能解决问题。