Flex DataGrid 可编辑

fanday

墨衍会员 · AI 创作全网分发码龄20年

关注

最新推荐文章于 2026-05-30 15:27:37 发布 231 阅读 AI 写同款· GEO 优化 ›

传统应用中有这个一个很好的效果，即一个Grid的一个单元格内嵌入一个文本框后面再跟个按钮，做一些操作，很机动，很灵活。

Flex当然不会直接给提供这样的组件，只能自己写一个，具体实现如下：

1、写一个Grid。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
				layout="vertical"
			    creationComplete="init();">
	<mx:Script source="sss.as"/>
	<mx:DataGrid id="testGrid" editable="true">
		<mx:dataProvider>
	        <mx:Object code="PC-001" amount="11"/>
	        <mx:Object code="PC-002" amount="1"/>
	    </mx:dataProvider>
			<mx:columns>
				<mx:DataGridColumn headerText="编号"
								   dataField="code"
								   headerStyleName="centered"
								   itemEditor="common.CellTextButton.CellTextButton"
								   editable="true"
								   width="120"
								   resizable="false"
								   textAlign="left"/>
				<mx:DataGridColumn headerText="数量"
								   dataField="amount"
								   headerStyleName="centered"
								   editable="true"
								   textAlign="left"/>
			</mx:columns>
		</mx:DataGrid>
</mx:Application>

要注意的问题如下：

(1)、editable="true"

(2)、itemEditor="common.CellTextButton.CellTextButton" 双括号里面的内容就是一个自己写的组件组件，

下面介绍这个组件。

2、写一个包含Text和Button的组件。

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%">
	<mx:Script>
		<![CDATA[
			[Bindable]
			[Embed(source='image/common/fangdajing.jpg')]
			private var fangdajing:Class;// 这个素材在文章下面提供了链接，要自己下下来。
			
			private var _text:String = "";
			
			public function get text():String {
				return this._text;
			}
			
			public function set text(str:String):void {
				this._text = str;
			}
		]]>
	</mx:Script>
	<mx:Text id="txt" width="100%"/>
	<mx:Button id="btn" icon="{fangdajing}" width="23"/>
</mx:HBox>

要注意的问题如下：

(1)、里面有个text属性，切忌这个属性不能删除，因为Flex的DataGrid会自己判断，默认就从这个属性中读值，

如果去掉或改名会出问题（好像是改成label也可以，没试过，大家可以试一下）。

3、在AS中调用。

// ActionScript file
import common.CellTextButton.CellTextButton;

import flash.events.MouseEvent;

import mx.controls.Alert;
import mx.controls.DataGrid;
import mx.controls.TextInput;
import mx.events.DataGridEvent;

public function init():void {
	testGrid.addEventListener(DataGridEvent.ITEM_FOCUS_IN, editGrid);
	testGrid.addEventListener(DataGridEvent.ITEM_FOCUS_OUT, editOver);
}

public function editGrid(event:DataGridEvent):void {
	if (event.columnIndex == 0) {
		CellTextButton(DataGrid(event.target).itemEditorInstance).txt.text = testGrid.selectedItem.code;
		CellTextButton(DataGrid(event.target).itemEditorInstance).btn.addEventListener(MouseEvent.CLICK, btnClick);
	} else if (event.columnIndex == 1) {
		TextInput(DataGrid(event.target).itemEditorInstance).restrict = "0-9";
		TextInput(DataGrid(event.target).itemEditorInstance).maxChars = 9;
	}
}

public function editOver(event:DataGridEvent):void {
	if (event.columnIndex == 0) {
		var str:String = CellTextButton(DataGrid(event.target).itemEditorInstance).txt.text;
		testGrid.selectedItem.code = str;
	}
}

public function btnClick(event:MouseEvent):void {
	Alert.show("Do something");
}

偶了。