讲解Flex表格中itemEditor或itemRenderer较好的文章。

Flex DataGrid 编辑实例源码

源码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="vertical" horizontalAlign="center"  
 xmlns:mx="http://www.adobe.com/2006/mxml" >
 <mx:Script>
  <![CDATA[
   import mx.events.DataGridEventReason;
   import mx.controls.NumericStepper;
   import mx.controls.TextInput;
   import mx.core.UIComponent;
   import mx.containers.HBox;
   import mx.controls.DataGrid;
   import mx.events.DataGridEvent;
   // 屏蔽第一列的编辑事件
   private function onItemEditBeginning(event:DataGridEvent):void{
    if(event.columnIndex==0)
     event.preventDefault();
   } 
   private function onItemEditBegin(event:DataGridEvent):void{ 
    // 阻止默认侦听器执行
    event.preventDefault();
    var dg:DataGrid = event.currentTarget as DataGrid;   
    // 创建项目编辑器实例
    dg.createItemEditor(event.columnIndex,event.rowIndex);
    var editorInstance:UIComponent = dg.itemEditorInstance as UIComponent;
    var tiLabel:TextInput = editorInstance.getChildAt(0) as TextInput;
    tiLabel.percentWidth = 50;
    tiLabel.text = dg.editedItemRenderer.data.label;
    var numStepper:NumericStepper = editorInstance.getChildAt(1) as NumericStepper;
    numStepper.percentWidth = 50;
    numStepper.value = dg.editedItemRenderer.data.price;   
   }
   private function onItemEditEnd(event:DataGridEvent):void{
    if (event.reason == DataGridEventReason.CANCELLED){
     // 如果取消编辑，不更新数据 
     return;
    }
    // 阻止默认侦听器执行
    event.preventDefault();
    var dg:DataGrid = event.currentTarget as DataGrid;  
    var editorInstance:UIComponent = dg.itemEditorInstance as UIComponent; 
    var tiLabel:TextInput = editorInstance.getChildAt(0) as TextInput;
    var numStepper:NumericStepper = editorInstance.getChildAt(1) as NumericStepper;
    var newLabel:String = tiLabel.text;
    var newPrice:Number = numStepper.value;
    // 取得旧数据
    var oldLabel:String = dg.editedItemRenderer.data.label;
    var oldPrice:Number = dg.editedItemRenderer.data.price;
    // 判断label是否为空，price是否小于50
    if(newLabel=="" || newPrice<50){  
     //销毁项目编辑器并返回，不更新数据
     dg.destroyItemEditor();   
     return;
    }  
    // 为项目渲染器设置新数据
    dg.editedItemRenderer.data.label = newLabel;
    dg.editedItemRenderer.data.price = newPrice;   
    dg.destroyItemEditor();
   }

  ]]>
 </mx:Script>
 <mx:Model id="myData">
  <items>
   <item>
      <icon>assets/icon1.png</icon>
      <label>Item1</label>
      <price>60.0</price>
   </item>
   <item>
      <icon>assets/icon2.png</icon>
      <label>Item2</label>
      <price>75.0</price>
   </item>
   <item>
      <icon>assets/icon3.png</icon>
      <label>Item3</label>
      <price>60.0</price>
   </item>
   <item>
      <icon>assets/icon4.png</icon>
      <label>Item4</label>
      <price>70.0</price>
   </item>
  </items>
 </mx:Model>
 <mx:DataGrid width="400" dataProvider="{myData.item}" editable="true" 
  itemEditBeginning="onItemEditBeginning(event)" 
  itemEditBegin="onItemEditBegin(event)" 
  itemEditEnd="onItemEditEnd(event)">
  <mx:columns>
   <mx:DataGridColumn itemRenderer="mx.controls.Image" dataField="icon"/> 
   <mx:DataGridColumn headerText="price">
    <!-- 在项目渲染器中使用Label组件显示label和price值  -->
    <mx:itemRenderer>
     <mx:Component>
      <mx:Label text="{data.label}:${data.price}"/>    
     </mx:Component>
    </mx:itemRenderer>
    <mx:itemEditor>
     <mx:Component>
      <!-- 在项目编辑器中使用TextInput和NumericStepper组件 -->
      <mx:HBox horizontalScrollPolicy="off">
       <mx:TextInput/>
       <mx:NumericStepper minimum="0" maximum="100"/>
      </mx:HBox>     
     </mx:Component>
    </mx:itemEditor>    
   </mx:DataGridColumn>   
  </mx:columns>
 </mx:DataGrid>
</mx:Application>
 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="vertical" horizontalAlign="center"  
 xmlns:mx="http://www.adobe.com/2006/mxml" >
 <mx:Script>
  <![CDATA[
   import custom.MyEditor;
   import mx.events.DataGridEventReason;
   import mx.controls.NumericStepper;
   import mx.controls.TextInput;
   import mx.controls.DataGrid;
   import mx.events.DataGridEvent;
   // 屏蔽第一列的编辑事件
   private function onItemEditBeginning(event:DataGridEvent):void{
    if(event.columnIndex==0)
     event.preventDefault();
   } 
   private function onItemEditEnd(event:DataGridEvent):void{
    if (event.reason == DataGridEventReason.CANCELLED){    
     return;
    }
    event.preventDefault();
    var dg:DataGrid = event.currentTarget as DataGrid;  
    var editorInstance:MyEditor = dg.itemEditorInstance as MyEditor;       // 取得项目编辑器中的新数据
    var newLabel:String = editorInstance.newLabel
    var newPrice:Number = editorInstance.newPrice
    // 检查数据是否符合要求
    if(newLabel=="" || newPrice<50){  
     // 销毁项目编辑器并返回，不更新数据
     dg.destroyItemEditor();   
     return;
    }
    // 为项目渲染器设置新数据
    dg.editedItemRenderer.data.label = newLabel;
    dg.editedItemRenderer.data.price = newPrice;   
    dg.destroyItemEditor();
   }   
  ]]>
 </mx:Script>
 <mx:Model id="myData">
  <items>
   <item>
      <icon>assets/icon1.png</icon>
      <label>Item1</label>
      <price>60.0</price>
   </item>
   <item>
      <icon>assets/icon2.png</icon>
      <label>Item2</label>
      <price>75.0</price>
   </item>
   <item>
      <icon>assets/icon3.png</icon>
      <label>Item3</label>
      <price>60.0</price>
   </item>
   <item>
      <icon>assets/icon4.png</icon>
      <label>Item4</label>
      <price>70.0</price>
   </item>
  </items>
 </mx:Model>
 <mx:DataGrid width="300" dataProvider="{myData.item}" editable="true" 
  itemEditBeginning="onItemEditBeginning(event)" 
  itemEditEnd="onItemEditEnd(event)">
  <mx:columns>
   <mx:DataGridColumn itemRenderer="mx.controls.Image" dataField="icon" width="100"/> 
   <mx:DataGridColumn headerText="price" itemEditor="custom.MyEditor" 
    editorXOffset="5" editorYOffset="0" editorHeightOffset="40">
    <!-- 在项目渲染器中使用Label组件显示label和price值  -->
    <mx:itemRenderer>
     <mx:Component>
      <mx:Label text="{data.label}:${data.price}"/>    
     </mx:Component>
    </mx:itemRenderer>       
   </mx:DataGridColumn>  
  </mx:columns>
 </mx:DataGrid>
</mx:Application>