DataGrid简单的显示数据

Flex中基于List的组件是RIA的重要组成部分，List不仅能够胜任显示数据的大批任务，而且还能为用户提供许多便利，如：列排序和自动换行，从而增强Flex应用程序的可用性。

上图为基于列表的一系列MX组件及相互的关系。

由于flex已经很少在使用，逐渐的被JS所替代，网上相应的API很多也停止了更新，这里为ActionScript3.0的查询参考文档。https://help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/index.html

下面介绍了网页上简单的数据展示功能代码：

---

这里是可视化界面搭建：

<mx:DataGrid id="dgTest" x="522" y="130" width="333" dataProvider="{acUser}" 
itemClick="dgTest_selectionChangeHandler(event)"	>
		<mx:columns>
			
				<mx:DataGridColumn dataField="id" headerText="编号"></mx:DataGridColumn>			
				<mx:DataGridColumn dataField="account" headerText="账号"></mx:DataGridColumn>
				<mx:DataGridColumn dataField="pass" headerText="密码"></mx:DataGridColumn>
			
		</mx:columns>
	</mx:DataGrid>
	<s:Label x="565" y="380" text="编号："/>
	<s:Label x="565" y="421" text="账号："/>
	<s:Label x="565" y="469" text="密码："/>
	<s:TextInput x="639" y="370" id="txtId"/>
	<s:TextInput x="639" y="421" id="txtAccount"/>
	<s:TextInput x="639" y="465" id="txtPass"/>
	<s:Button x="531" y="317" label="增加" click="button1_clickHandler(event)"/>
	<s:Button x="640" y="323" label="删除" click="button2_clickHandler(event)"/>
	<s:Button x="857" y="323" label="查找" click="button3_clickHandler(event)"/>
	<s:Button x="756" y="323" label="修改" click="button4_clickHandler(event)"/>

功能实现代码：

<fx:Script>
		<![CDATA[
	
			import mx.collections.ArrayCollection;
			import mx.collections.ListCollectionView;
			import mx.events.DataGridEvent;
			[Bindable] 
			public var acUser:ArrayCollection=new ArrayCollection([
				{id:"1",account:"Anho",pass:"653487"},  
				{id:"2",account:"Beha",pass:"328756"},  
				{id:"3",account:"Canv",pass:"987056"}  
			]); 
			
			//添加
			protected function button1_clickHandler(event:MouseEvent):void
			{
				acUser.addItem({id:txtId.text,account:txtAccount.text,pass:txtPass.text});

			}				
			//删掉所选
			protected function button2_clickHandler(event:MouseEvent):void
			{
				var idx:int=acUser.getItemIndex(dgTest.selectedItem);
				acUser.removeItemAt(idx);
			}
			//修改所选
			protected function button3_clickHandler(event:MouseEvent):void
			{
				var item:Object=dgTest.selectedItem;
				item.id=txtId.text;
				item.account=txtAccount.text;
				item.pass=txtPass.text;
				acUser.itemUpdated(item);
			}
			//查找
			protected function button4_clickHandler(event:MouseEvent):void
			{
				//根据id来查找
				var id:int=int(txtId.text);
				for(var i:int=0;i<acUser.length;i++)
				{
					if(acUser.getItemAt(i).id==id)
					{
						txtId.text=acUser.getItemAt(i).id
						txtAccount.text=acUser.getItemAt(i).account;
						txtPass.text=acUser.getItemAt(i).pass;
					}
				}
			}
			//项选择发生改变时
			protected function dgTest_selectionChangeHandler(event):void
			{
				txtId.text=dgTest.selectedItem.id;
				txtAccount.text=dgTest.selectedItem.account;
				txtPass.text=dgTest.selectedItem.pass;
			}
		]]>
	</fx:Script>

很多的引用可能由于时间版本的问题，导致单纯的复制代码容易出错，应注意查询ActionScript的参考文档。