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>

<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>

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., services, 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控件双击编辑问题.