Flex控件_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>????
??????????????????? </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,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>????
??????????????? </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)}]);
??????? ]]>
??? </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>

8.Flex的Datagrid控件双击弹出子窗体编辑
功能说明：
??? 当双击DataGrid的一项时，弹出窗口进行内容编辑.
??? 通过PopUpManager和itemRenderer实现
代码：
主程序
??? <?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"
?????????????? xmlns:local="XautComponent.*"
?????????????? minWidth="1024" minHeight="768">
??? <s:layout>
??????? <s:BasicLayout/>
??? </s:layout>
??? <fx:Declarations>
??????? <fx:Array id="arr">
??????????? <fx:Object articleName="Finding out a characters Unicode character code Downloading the latest Adobe Labs version of Flex 3 SDK/Flex Builder 3 (codename: Moxie)" data="15" />
??????????? <fx:Object articleName="Setting an icon in an Alert control" data="14" />
??????????? <fx:Object articleName="Setting an icon in a Button control" data="13" />
??????????? <fx:Object articleName="Installing the latest nightly Flex 3 SDK build into Flex Builder 3" data="10" />
??????????? <fx:Object articleName="Detecting which button a user pressed to dismiss an Alert dialog" data="9" />
??????????? <fx:Object articleName="Using the Alert control Formatting data tips in a Slide" data="8" />
??????? </fx:Array>

??? </fx:Declarations>

??????? <mx:DataGrid height="250" dataProvider="{arr}" variableRowHeight="true" width="60%" editable="true">
??????????? <mx:columns>
??????????????? <mx:DataGridColumn dataField="data" headerText="ID" editable="false" width="125"/>
??????????????? <mx:DataGridColumn
??????????????????? editable="false" wordWrap="true"
??????????????????? headerText="Article Name"?????????????
??????????????????? itemRenderer="XautComponent.MyRenderer" dataField="articleName"/>
??????????? </mx:columns>
??????? </mx:DataGrid>
</s:Application>

MyRender.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Text 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.IDropInListItemRenderer"
???????? toolTip="Double Click to Edit…" doubleClick="callLater(openPopup)"
???????? doubleClickEnabled="true"
???????? text="{txt}">
???
??????? <fx:Script>
??????????? <![CDATA[
??????????? import mx.controls.DataGrid;
??????????? import mx.controls.listClasses.ListData;
??????????? import mx.controls.dataGridClasses.DataGridListData;
??????????? import mx.controls.listClasses.BaseListData;
??????????? import mx.managers.PopUpManager;
??????????? import mx.events.FlexEvent;
??????????? import XautComponent.Popup;
???????????????
??????????? private var _listData:DataGridListData;???????????
???????????
??????????? [Bindable]
??????????? public var txt:String;
???????????
??????????? private var pop:Popup;
???????????
??????????? override public function set data(value:Object):void {
??????????? super.data = value;???????
??????????? txt=data[_listData.dataField];
??????????? }
???????????
??????????? override public function get data():Object {
??????????? return super.data;
??????????? }??????????
???????????
??????????? override public function get listData():BaseListData
??????????? {
??????????? return _listData;
??????????? }

??????????? override public function set listData(value:BaseListData):void
??????????? {
??????????? _listData = DataGridListData(value);
??????????? }?
???????????
??????????? private function openPopup():void{
??????????? pop= Popup(PopUpManager.createPopUp(this.owner,Popup,true));
??????????? pop.txt=this.txt;
??????????? pop.opener=this;
??????????? }?????????
???????????
??????????? public function updateDP(str:String):void{
??????????? var myDG:DataGrid=this.owner as DataGrid;
??????????? var row:int=_listData.rowIndex+myDG.verticalScrollPosition;
??????????? this.data[_listData.dataField]=str;
??????????? myDG.dataProvider.itemUpdated(data);
??????????? }
??????????? ]]>
??????? </fx:Script>
</mx:Text>

Popup.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
??????????????? xmlns:s="library://ns.adobe.com/flex/spark"
??????????????? xmlns:mx="library://ns.adobe.com/flex/halo"
??????????????? layout="absolute"
??????????????? width="350" height="250" showCloseButton="false" creationComplete="centerMe()"
??????????????? defaultButton="{btnSave}">

??????? <fx:Script>
??????????? <![CDATA[
??????????? import mx.managers.FocusManager;
??????????? import mx.managers.PopUpManager;
???????????
??????????? [Bindable]
??????????? public var txt:String;
???????????
??????????? public var opener:Object;
???????????
???????????
??????????? private function save():void{
??????????? (opener as MyRenderer).updateDP(ta.text);
??????????? cancel();
??????????? }
???????????
??????????? private function cancel():void{
??????????? PopUpManager.removePopUp(this);
??????????? returnFocus();
??????????? }
???????????
??????????? private function returnFocus():void{
??????????? opener.setFocus();
??????????? }
???????????
??????????? private function centerMe():void{
??????????? PopUpManager.centerPopUp(this);
??????????? ta.setFocus();????????
??????????? }
???????????
??????????? ]]>
??????? </fx:Script>
???????
??????? <mx:TextArea id="ta" text="{txt}" height="100%" width="100%"/>
??????? <mx:ControlBar>
??????????? <mx:HBox>
??????????????? <mx:Button id="btnSave" label="save" click="save()"/>
??????????????? <mx:Button id="btnCancel" label="cancel" click="cancel()"/>???????????
??????????? </mx:HBox>
??????? </mx:ControlBar>
</mx:TitleWindow>

9.Flex的Datagrid控件双击后进行编辑
?? 本例为用户必须双击单元格才能进行编辑，由于datagrid默认是单击进行编辑，必须先继承Datagrid类，添加doubleClick事件处理。
代码：
主程序
<?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"
?????????????? xmlns:local="*" >
??? <s:layout>
??????? <s:BasicLayout/>
??? </s:layout>
??? <fx:Declarations>
??????? <!-- Place non-visual elements (e.g.,value objects) here -->
??? </fx:Declarations>
??? <fx:Script>
??????? <![CDATA[
??????? private var arr:Array = [
??????? { firstName: "Alex",lastName: "Harui" },
??????? { firstName: "Gordon",lastName: "Smith" },
??????? { firstName: "Deepa",lastName: "Subramanian" },
??????? { firstName: "Matt",lastName: "Chotin" },
??????? { firstName: "Ely",lastName: "Greenfield" },
??????? { firstName: "Kevin",lastName: "Lynch" },
??????? { firstName: "Shantanu",lastName: "Narayan" },
??????? { firstName: "Joan",lastName: "Lafferty" },
??????? { firstName: "Ryan",lastName: "Frishberg" },
??????? { firstName: "Jason",lastName: "Szeto" },
??????? { firstName: "Mark",lastName: "Anders" },
??????? { firstName: "Peter",lastName: "Flynn" },
??????? { firstName: "Heidi",lastName: "Williams" }
???????
??????? ];
???????
??????? ]]>
??? </fx:Script>
??? <local:DoubleClickDataGrid id="dg" initialize="dg.dataProvider=arr" editable="true">
??????? <local:columns>
??????????? <mx:DataGridColumn dataField="firstName" headerText="First Name" />
??????????? <mx:DataGridColumn dataField="lastName" headerText="Last Name" />
??????? </local:columns>
??? </local:DoubleClickDataGrid>
</s:Application>

DoubleClickDataGrid.as
package
{
??? import flash.events.MouseEvent;
??? import mx.controls.DataGrid;
??? import mx.controls.dataGridClasses.DataGridColumn;
??? import mx.controls.listClasses.IDropInListItemRenderer;
??? import mx.controls.listClasses.IListItemRenderer;
??? import mx.core.EventPriority;
??? import mx.events.DataGridEvent;

??? public class DoubleClickDataGrid extends DataGrid
??? {
???????
??????? public function DoubleClickDataGrid()
??????? {
??????????? super();
??????????? doubleClickEnabled = true;
??????? }
???????
??????? override protected function mouseDoubleClickHandler(event:MouseEvent):void
??????? {
??????????? var dataGridEvent:DataGridEvent;
??????????? var r:IListItemRenderer;
??????????? var dgColumn:DataGridColumn;
???????????
??????????? r = mouseEventToItemRenderer(event);
??????????? if (r && r != itemEditorInstance)
??????????? {
??????????????? var dilr:IDropInListItemRenderer = IDropInListItemRenderer(r);
??????????????? if (columns[dilr.listData.columnIndex].editable)
??????????????? {
??????????????????? dgColumn = columns[dilr.listData.columnIndex];
??????????????????? dataGridEvent = new DataGridEvent(DataGridEvent.ITEM_EDIT_BEGINNING,false,true);
??????????????????? // ITEM_EDIT events are cancelable
???????????????????
??????????????????? dataGridEvent.columnIndex = dilr.listData.columnIndex;
??????????????????? dataGridEvent.dataField = dgColumn.dataField;
??????????????????? dataGridEvent.rowIndex = dilr.listData.rowIndex + verticalScrollPosition;
??????????????????? dataGridEvent.itemRenderer = r;
??????????????????? dispatchEvent(dataGridEvent);
??????????????? }
??????????? }
??????????? super.mouseDoubleClickHandler(event);
??????? }
???????
??????? override protected function mouseUpHandler(event:MouseEvent):void
??????? {
??????????? var r:IListItemRenderer;
??????????? var dgColumn:DataGridColumn;
???????????
??????????? r = mouseEventToItemRenderer(event);
??????????? if (r)
??????????? {
??????????????? var dilr:IDropInListItemRenderer = IDropInListItemRenderer(r);
??????????????? if (columns[dilr.listData.columnIndex].editable)
??????????????? {
??????????????????? dgColumn = columns[dilr.listData.columnIndex];
??????????????????? dgColumn.editable = false;
??????????????? }
??????????? }
??????????? super.mouseUpHandler(event);
???????????
??????????? if (dgColumn)
??????????????? dgColumn.editable = true;
??????? }
??? }
}


参考文献： 1.在dataGrid中使用checkBox和ComboBox的用法示例. http://www.javaeye.com/topic/374149 2.DataGrid Example with SelectAll Checkbox. http://www.cnblogs.com/sban/archive/2009/02/28/select-all-checkbox-in-datagrid-example.html 3.DataGrid里嵌入checkBox，增加，删除等控件等操作. http://blog.csdn.net/jinxinxin1314/archive/2009/11/03/4761443.aspx 4.Flex教程/组件详解之一：DataGrid. http://blog.l4cd.net/post-old-42.html 5.Flex中的DateField作为DataGrid的itemEditor接收字符串日期. http://www.iabel.com/?p=100 6.Flex的Datagrid控件双击编辑问题.