flex中dataGrid的编辑功能 精华
from:http://blog.csdn.net/wuyan520/article/details/5469794 也是转载,源头未知。
在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>
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;
}
}
}
flex中dataGrid的编辑功能 精华相关推荐
- flex中dataGrid的编辑功能
在flex的dataGrid中,很多情况下列是需要嵌入其他的控制的,比如:checkbox,combox等,此时需要利用dataGrid的如下功能: 1.datagrid编辑功能简介 当我们点 ...
- Flex控件_datagrid_编辑功能
1.datagrid编辑功能简介 当我们点击datagrid中的一个单元格进行编辑时,可结合使用一些组件,RadioButtonGroup.checkbox.ComboBox等 dat ...
- flex中datagrid中的过滤功能
代码来自http://try.flex.org/index.cfm <?xml version="1.0" encoding="utf-8"?> & ...
- flex中DataGrid里使用itemRenderer后数据无法绑定到数据源的问题
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="ht ...
- 知识管理系统中的在线编辑,让共享协作更简便
编者按:共享协作越来越被企业重视,那么如何实现企业内部共享协作呢?在线编辑是关键,本文分析了共享协作的作用,并进一步介绍了知识管理中的在线编辑功能. 关键词: 在线编辑,在线预览,资料分享,全文检索, ...
- flex html 控制编辑,在富文本编辑器中添加Tab键功能(Flex 3)
我试图在使用事件keyDown的富文本编辑器中添加Tab键功能.只需要清楚,在标签键上,我需要将控件保留在前面带有'\ t'空格的同一个文本框中,而不是跳到下一个对象.我尝试的下面的代码完全适用于te ...
- Flex DataGrid双击编辑单元格
flex中的 DataGrid是支持单击编辑单元格内容的,不过这确实不够方便,单击是选中数据的,怎么能变成修改呢!在网上查了看,利用一个 DataGrid组件,可以实现双击修改 此组件源码为: Dou ...
- 文本编辑器中实现自定义编辑框中字体和大小的功能
文章目录 1 文本编辑器中实现自定义编辑框中字体和大小的功能 1 文本编辑器中实现自定义编辑框中字体和大小的功能 实现思路: 通过QFontDialog选择字体及大小. 将QFont对象设置到文本编辑 ...
- jtextpane设置不能选中_在Bridge cc中不能使用camera raw 的编辑功能,解决方法
有时我们在Bridge cc中想对raw文件进行处理,这时需要启动camera raw功能,可是当我们启用时却显示不能编辑,下面说下如何启动使用camera raw 的编辑功能 1.打开一张raw格式 ...
最新文章
- 如果对GIF进行模糊化加边扩增
- 人工智能时代的用户体验设计与创新
- 【机器学习基础】线性回归和梯度下降的初学者教程
- mysql 5.6 安装教程
- python 连通域_连通域的原理与Python实现
- Office安装源损坏
- SpringBoot报错 org.apache.catalina.LifecycleException: Protocol handler start failed
- python3的格式化用法_浅析python3字符串格式化format()函数的简单用法
- 【转】两个算法题,感觉挺有意思
- 伪元素在父元素中居中_从ArrayList中移除元素
- [资讯]北京二套学区房奋斗目标
- 一小时搞定 简单VBA编程 Excel宏编程快速扫盲
- trader vn 显示不全_一个VNPY 的“CTP:平昨仓位不足”问题的解决记录
- 转载 注解@PostConstruct与@PreDestroy讲解及实例 - 云淡风轻、仅此一抹 - 博客频道 - CSDN.NET http://blog.csdn.net/yaerfeng/art
- css 怎么让图片一直旋转
- 世界环境日 | 始祖数字化可持续发展峰会就在6.5!
- [NCTF 2018]签到题
- FAThdc.inc
- android简历!剖析Android开发未来的出路在哪里,Android篇
- 兼容IE8的旋转角度
热门文章
- PS制作复古彩色画人像照片、创意分割照片
- C语言例题:用星号输出棱形图案。
- 【Mo 人工智能技术博客】利用Logistic函数和LSTM分析疫情数据
- SAP WM初阶LS07冻结Quant
- 复选框checkbox实现批量删除
- 未来偶像的硬件破局:为爱买单,不为 AI 买单
- 解决el--checkbox 复选框的禁用方法
- 前端明水印到隐水印你了解了吗
- Signing for “target“ requires a development team. Select a development team in the project editor.
- C语言课后习题(计算增长率比值