flex中dataGrid的编辑功能详解

在flex的dataGrid中，很多情况下列是需要嵌入其他的控制的，比如：checkbox,combox等，此时需要利用dataGrid的如下功能：

1.datagrid编辑功能简介
    当我们点击datagrid中的一个单元格进行编辑时，可结合使用一些组件，RadioButtonGroup、checkbox、ComboBox等
    datagrid的编辑功能必须使用以下组件：editorDataField、itemEditor和itemRenderer。

    editorDataField 属性确定包含新数据的项目编辑器的属性，并使用这些新数据更新数据提供程序项目。因为默认项目编辑器是 TextInput 控件，所以 editorDataField 属性的默认值为 "text"，以指定 TextInput 的 text 属性包含新项目数据。
    itemEditor为DataGrid的单元格编辑器,而itemRenderer则为渲染器,就是说.itemEditor只会在单元格处理编辑状态下才会出现.
    itemRenderer则是一直显示(就是网友关心的,自定义DataGrid的列)

   datagrid各项数据编辑后的保存
   不要一个一个地从datagrid中读取各项的值，最好通过Arraycollection数据源与datagrid进行绑定，如果需要读取编辑后的数值，可以直接读取ArrayCollection。具体看本文《datagrid控件的各项数据可编辑》。

2.editorDataField使用方法
属性描述：
         public var editorDataField:String = "text"
    项目编辑器的属性名称，其中包含列表项目的新数据。例如，默认的 itemEditor 为 TextInput，因此，editorDataField 属性的默认值为 "text"，此值指定 TextInput 控件的 text 属性。
   
例1：
    <mx:DataGridColumn headerText="名称" id="dg2" dataField="name" editable="true" editorDataField="text"/>
    以上代码说明表示"名称"这一列可通过TextInput控件编辑，并将TextInput控件的text属性值传给DataGridColumn。editorDataField="text"是默认值，可不写。

例2：
    <mx:DataGridColumn headerText="价格" id="dg3" dataField="price" editorDataField="value" editable="false">    
                <mx:itemRenderer>    
                    <fx:Component>    
                        <mx:NumericStepper maximum="1000" minimum="10">    
                        </mx:NumericStepper>    
                    </fx:Component>    
                </mx:itemRenderer>    
            </mx:DataGridColumn>
    editorDataField="value"表示将控件NumericStepper 的属性value传给DataGridColumn

3.itemEditor使用方法
属性描述：
        public var itemEditor:IFactory
       当编辑该列时，调用列的项目编辑器实例的类工厂创建编辑类。
       默认值为 new ClassFactory(mx.controls.TextInput).见本文《editorDataField使用方法》

例1：
    <mx:DataGridColumn dataField="score"
                     editable="true"
                     itemEditor="mx.controls.NumericStepper"
                     editorDataField="value" />
    这里表示，当进入编辑状态时，itemEditor将创建NumericStepper对象，并将NumericStepper的属性与该单元格进行绑定。
    如果想进一步指定NumericStepper的取值范围等，可采用如下代码
    <mx:DataGridColumn headerText="数量" dataField="count" editorDataField="value">
        <mx:itemEditor>
            <fx:Component>
                <mx:NumericStepper maximum="1000" minimum="10">
                </mx:NumericStepper>
            </fx:Component>
        </mx:itemEditor>
    </mx:DataGridColumn>
   
例2：
    如果绑定的对象属性与itemEditor指定控件不能对应，比如数据源中的日期是一个String类型，而编辑时必须用Date类型。可采用如下代码：
    <mx:DataGridColumn headerText="DateString"
                    dataField="dateString" width="120"
                    itemEditor="DateEditor"
                    editorDataField="text" />
    下面对DateEditor控件继承mx.controls.DateField控件，并重载set data()方法，并进入编辑状态时，创建一个DateEditor对象，这个对象先将字符串转换成Date对象，再用DateField控件进行编辑。
    详见本文的《Flex中的DateField作为DataGrid的itemEditor接收字符串日期》

4.itemRenderer使用方法
    itemRenderer有两种用法：自定义控件和直接嵌入代码。
例1：
    本例为直接嵌入代码，<fx:component>表示直接嵌入一个控件，可以理解为一个内部类。
    <mx:DataGridColumn headerText="价格" id="dg3" dataField="price" editorDataField="value"editable="false">    
                <mx:itemRenderer>    
                    <fx:Component>    
                        <mx:NumericStepper maximum="1000" minimum="10">    
                        </mx:NumericStepper>    
                    </fx:Component>    
                </mx:itemRenderer>    
            </mx:DataGridColumn>

例2：
   本例先自定义一个控件，再引用该控件。
   <mx:DataGridColumn headerText="描述" id="dg4" dataField="count" editable="true" editorDataField="value" itemEditor="{cb_Render}"/>

    <fx:Declarations>
        <fx:Component id="cb_Render">
            <mx:ComboBox>
                <mx:dataProvider>
                    <fx:String>不合格</fx:String>
                    <fx:String>合格</fx:String>
                    <fx:String>错别字</fx:String>
                </mx:dataProvider>
            </mx:ComboBox>
        </fx:Component>
    </fx:Declarations>



5.as代码使用方法
    大概跟上面类似.,需要注意的是.用代码设置itemRenderer时.接受的类形是ClassFactory.,如果需要给选择的组件 (这里是NumericStepper),需要设置ClassFactory的properties属性.为一个object,代码模拟《控件的各项数据可编辑》
        col = new DataGridColumn()
        col.headerText = "价格"
        col.dataField = "price"
        col.editable = false
        var itemRenderer:ClassFactory = new ClassFactory(NumericStepper);
        itemRenderer.properties = {maximum:1000,minimum:10}
        col.itemRenderer = itemRenderer
        col.editorDataField = "value"



6.datagrid控件的各项数据可编辑
功能说明：
    本例中的datagrid各项数据都可编辑，“序号”不可编辑，“名称”通过文本框编辑，“价格”通过数字下拉框编辑，“描述”通过combobox编辑，“select”通过checkbox编辑。
    用户点击“保存”按钮，读取表中各行属性显示。

代码：
<?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/halo"
               creationComplete="init()"
               minWidth="1024" minHeight="768">
    <s:layout>
        <s:BasicLayout/>
    </s:layout>

    <fx:Script>    
        <![CDATA[    
            import mx.collections.ArrayCollection;
            import mx.controls.*;    
            import mx.controls.dataGridClasses.*; 
           
           
            private var DataGrid1:DataGrid   
            public var languageFlag:String = "cn"; 
            [Bindable] 
            public var dataArr2:ArrayCollection =new ArrayCollection(
                        [{id:1,name:"苹果",price:100,count:"不合格",selected:false},    
                        {id:2,name:"西瓜",price:50,count:"不合格",selected:true},    
                        {id:3,name:"水蜜桃",price:333,count:"错别字",selected:false}]
                        );
           
            [Bindable] 
            public var dataArr:ArrayCollection = new ArrayCollection(
                    [{label:"不合格", data:"2"},{label:"不合格", data:"3"}, 
                    {label:"进口", data:"4"}, {label:"一般", data:"5"}]
                    ); 
           
            private function init():void{   
               
            } 
           
            public function saved():void{
                for each(var a:Object in dataArr2){ 
                    Alert.show("当前数据为: " + "序号: " + a.id + ", 名称: " + a.name + ", 数量: " + a.count + ", selected: " + a.selected); 
                } 
            } 
        ]]>    
    </fx:Script>    
   
    <fx:Declarations>
        <fx:Component id="cb_Render">
            <mx:ComboBox>
                <mx:dataProvider>
                    <fx:String>不合格</fx:String>
                    <fx:String>合格</fx:String>
                    <fx:String>错别字</fx:String>
                </mx:dataProvider>
            </mx:ComboBox>
        </fx:Component>
    </fx:Declarations>
   
    <mx:Button click="saved()" x="441" y="46" label="保存"/> 
    <mx:DataGrid id="DataGrid2" editable="true" dataProvider="{dataArr2}" y="76" x="10" height="266" width="516">    
        <mx:columns>    
            <mx:DataGridColumn headerText="序号" id="dg1" dataField="id" editable="false"/>    
            <mx:DataGridColumn headerText="名称" id="dg2" dataField="name"/>   
            <mx:DataGridColumn headerText="价格" id="dg3" dataField="price" editorDataField="value" editable="false">    
                <mx:itemRenderer>    
                    <fx:Component>    
                        <mx:NumericStepper maximum="1000" minimum="10">    
                        </mx:NumericStepper>    
                    </fx:Component>    
                </mx:itemRenderer>    
            </mx:DataGridColumn>    
            <mx:DataGridColumn headerText="描述" id="dg4" dataField="count" editable="true" editorDataField="text" itemEditor="{cb_Render}"/>  
            <mx:DataGridColumn headerText="select" dataField="selected" editable="false"> 
                <mx:itemRenderer> 
                    <fx:Component> 
                        <mx:CheckBox click="data.selected=!data.selected"  selected="{data.selected}"/> 
                    </fx:Component>                      
                </mx:itemRenderer> 
            </mx:DataGridColumn>   
        </mx:columns>    
    </mx:DataGrid>    
</s:Application>

7.Flex中的DateField作为DataGrid的itemEditor接收字符串日期
功能说明：
    扩展DateField组件处理字符型日期数据
代码：
DateEditor.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:DateField xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:mx="library://ns.adobe.com/flex/halo"
              implements="mx.controls.listClasses.IListItemRenderer"
              focusIn="open()">
    <fx:Script>
        <![CDATA[
            override public function set data(value:Object):void{
                if(listData){
                    var newDate:Date;
                   
                    if (value is String){
                        newDate = new Date(Date.parse(data as String));
                        super.data=newDate;
                    }
                    else if (value is Date){
                        super.data=value as Date;
                    }
                }       
            }
        ]]>
    </fx:Script>
</mx:DateField>

datagrid4.mxml
<?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/halo" minWidth="1024" minHeight="768">
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
        import mx.controls.dataGridClasses.DataGridListData;
        import mx.events.DataGridEvent;
        import mx.collections.ArrayCollection;
        import mx.controls.DateField;
        import mx.core.ClassFactory;
        import mx.controls.dataGridClasses.DataGridListData;
       
        [Bindable]
        public var ac:ArrayCollection = new ArrayCollection(
        [{dateString:"11/12/2006", contact:"ABD DEF", dt: new Date(2003,10,23)},
        {dateString:"11/12/2007", contact:"GHI", dt:new Date(2004,11,2)},
        {dateString:"10/10/2007", contact:"JKL MNOP", dt:new Date(2007,4,14)},
        {dateString:"09/12/2007", contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)}]);
        ]]>
    </fx:Script>
    <mx:DataGrid editable="true" height="95%" width="95%" id="dg" dataProvider="{ac}">
        <mx:columns>
            <mx:DataGridColumn headerText="DateString" dataField="dateString" width="120"
                               itemEditor="DateEditor"
                               editorDataField="text" />                   
            <mx:DataGridColumn headerText="Date" dataField="dt" width="120"
                               itemRenderer="mx.controls.DateField"
                               rendererIsEditor="true"
                               editorDataField="selectedDate"/>                    
            <mx:DataGridColumn headerText="Contact" dataField="contact" width="80"/>
        </mx:columns>
    </mx:DataGrid>
</s:Application>