Flex DataGrid给列加button

摘要

在flex组件中,datagird是我们常用的组件,一般用来展示数据,但是往往我们想在datagird的列中加上button,checkbox或者combox组件,该怎么做呢。下面是一个例子,可以用来

在flex组件中,datagird是我们常用的组件,一般用来展示数据,但是往往我们想在datagird的列中加上button,checkbox或者combox组件,该怎么做呢。下面是一个例子,可以用来举一反三。

<?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/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<fx:Component id="comboboxEditor">
			<mx:ComboBox dataProvider="{dt}" editable="true">
				<fx:Script>
					<![CDATA[
						private var dt:Array = ["男", "女"];
					]]>
				</fx:Script>
			</mx:ComboBox>
		</fx:Component>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.DataGrid;
			import mx.events.ListEvent;
			[Bindable]
			private var dgDataArr:Array = [{name: "Jon", job: "officer"},
				{name: "James", job: "seller"},
				{name: "Jodon", job: "manager"}];
			
			[Bindable]
			private var test:Array = [{name: "loginName", type: "realName",content:"XX"},
				{name: "James", type: "seller",content:"XX"},
				{name: "Jodon", type: "manager",content:"XX"}];
			
			private function itemClickHandler(e:ListEvent):void
			{
				trace(e.target);
			}
			
			protected function add_clickHandler(event:MouseEvent):void
			{
				var obj:Object=new Object();
				var obj1:Object=new Object();
				obj.name= "wgy";
				obj.job = "gyw";
				obj1.name="wulun";obj1.type="student";obj1.content = "flex develop";
				dgDataArr.push(obj);
				test.push(obj1);
				dg1.dataProvider = dgDataArr;
				dg.dataProvider =test;
			}
			
		]]>
	</fx:Script>

	<mx:DataGrid id="dg1" x="2" y="62" width="532" height="160" dataProvider="{dgDataArr}"
				 editable="true" fontSize="14" itemClick="itemClickHandler(event)">
		<mx:columns>
			<mx:DataGridColumn dataField="name" editable="false" />
			<mx:DataGridColumn dataField="job"></mx:DataGridColumn>
			<mx:DataGridColumn dataField="sex" itemEditor="{comboboxEditor}"> </mx:DataGridColumn>
		</mx:columns>
	</mx:DataGrid>
	<mx:DataGrid id="dg" x="10" y="250" width="571" dataProvider="{test}">
		<mx:columns>
			<mx:DataGridColumn headerText="名称" dataField="name"/>
			<mx:DataGridColumn headerText="类型" dataField="type"/>
			<mx:DataGridColumn headerText="内容" dataField="content" />
			<mx:DataGridColumn headerText="操作" width="60" resizable="false">
				<mx:itemRenderer>
					<fx:Component>
						<mx:Button fontSize="14" click="openEditWindow(data)" label="添加">
							<fx:Script>
								<![CDATA[
								import mx.controls.Alert;
								private function openEditWindow(data:Object):void
								{
								Alert.show(data.name);
								}
								]]>
							</fx:Script>  
						</mx:Button>
					</fx:Component>
					
				</mx:itemRenderer>
			</mx:DataGridColumn>
		</mx:columns>
	</mx:DataGrid>
	<s:Button x="30" y="33" id="add" click="add_clickHandler(event)" label="添加一行"/>
	<s:Button x="137" y="32" id="del" label="删除一行"/>
</s:Application>


IT家园
IT家园

网友最新评论 (0)