Flex之AdvancedDataGrid用法

一、新建一个Flex项目，命名为AdvanceDataGrid;

二、在src默认包下，新建一个MXML应用程序，名为AdvanceDataGrid.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/mx" 
			   width="100%" height="100%">
	
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		.advanceDataGrid{
			font-size:12px;
			color:FFFFFF;
		}
	</fx:Style>
	
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			[Bindable]
			private var collegeArray:ArrayCollection = new ArrayCollection([
				{Grade:"大学一年级", Classes:"计算机学院", Teacher:"王宇", Number:38865, Calling:40000}, 
				{Grade:"大学一年级", Classes:"软件工程学院", Teacher:"李华", Number:29885, Calling:30000},  
				{Grade:"大学一年级", Classes:"物流学院", Teacher:"赵小刚", Number:29134, Calling:30000},  
				{Grade:"大学一年级", Classes:"政治与行政学院", Teacher:"孙雪", Number:52888, Calling:45000},  
				{Grade:"大学一年级", Classes:"外国语学院", Teacher:"李煌", Number:38805, Calling:40000}, 
				{Grade:"大学一年级", Classes:"航海学院", Teacher:"石理", Number:55498, Calling:40000},  
				{Grade:"大学一年级", Classes:"文学学院", Teacher:"钱无", Number:44985, Calling:45000}, 
				{Grade:"大学一年级", Classes:"生物学院", Teacher:"赵八", Number:44913, Calling:45000},
				{Grade:"大学二年级", Classes:"计算机学院", Teacher:"王宇", Number:38865, Calling:40000}, 
				{Grade:"大学二年级", Classes:"软件工程学院", Teacher:"李华", Number:29885, Calling:30000},  
				{Grade:"大学二年级", Classes:"物流学院", Teacher:"赵小刚", Number:29134, Calling:30000},  
				{Grade:"大学二年级", Classes:"政治与行政学院", Teacher:"孙雪", Number:52888, Calling:45000},  
				{Grade:"大学二年级", Classes:"外国语学院", Teacher:"李煌", Number:38805, Calling:40000}, 
				{Grade:"大学二年级", Classes:"航海学院", Teacher:"石理", Number:55498, Calling:40000},  
				{Grade:"大学二年级", Classes:"文学学院", Teacher:"钱无", Number:44985, Calling:45000}, 
				{Grade:"大学二年级", Classes:"生物学院", Teacher:"赵八", Number:44913, Calling:45000},
				{Grade:"大学三年级", Classes:"计算机学院", Teacher:"王宇", Number:38865, Calling:40000}, 
				{Grade:"大学三年级", Classes:"软件工程学院", Teacher:"李华", Number:29885, Calling:30000},  
				{Grade:"大学三年级", Classes:"物流学院", Teacher:"赵小刚", Number:29134, Calling:30000},  
				{Grade:"大学三年级", Classes:"政治与行政学院", Teacher:"孙雪", Number:52888, Calling:45000},  
				{Grade:"大学三年级", Classes:"外国语学院", Teacher:"李煌", Number:38805, Calling:40000}, 
				{Grade:"大学三年级", Classes:"航海学院", Teacher:"石理", Number:55498, Calling:40000},  
				{Grade:"大学三年级", Classes:"文学学院", Teacher:"钱无", Number:44985, Calling:45000}, 
				{Grade:"大学三年级", Classes:"生物学院", Teacher:"赵八", Number:44913, Calling:45000},
				{Grade:"大学四年级", Classes:"计算机学院", Teacher:"王宇", Number:38865, Calling:40000}, 
				{Grade:"大学四年级", Classes:"软件工程学院", Teacher:"李华", Number:29885, Calling:30000},  
				{Grade:"大学四年级", Classes:"物流学院", Teacher:"赵小刚", Number:29134, Calling:30000},  
				{Grade:"大学四年级", Classes:"政治与行政学院", Teacher:"孙雪", Number:52888, Calling:45000},  
				{Grade:"大学四年级", Classes:"外国语学院", Teacher:"李煌", Number:38805, Calling:40000}, 
				{Grade:"大学四年级", Classes:"航海学院", Teacher:"石理", Number:55498, Calling:40000},  
				{Grade:"大学四年级", Classes:"文学学院", Teacher:"钱无", Number:44985, Calling:45000}, 
				{Grade:"大学四年级", Classes:"生物学院", Teacher:"赵八", Number:44913, Calling:45000}
			]);
		]]>
	</fx:Script>
	
	<mx:Panel title="AdvancedDataGrid样例"
			  height="100%" width="100%" layout="horizontal"
			  paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" textAlign="center">
		
		<mx:AdvancedDataGrid id="myADG" width="100%" height="100%" initialize="ca.refresh();" headerColors="0xcccccc" styleName="advanceDataGrid">        
			<mx:dataProvider>
				<mx:GroupingCollection2 id="ca" source="{collegeArray}">
					<mx:grouping>
						<mx:Grouping>
							<mx:GroupingField name="Grade"/>
							<mx:GroupingField name="Classes"/>
						</mx:Grouping>
					</mx:grouping>
				</mx:GroupingCollection2>
			</mx:dataProvider>        
			
			<mx:columns>
				<mx:AdvancedDataGridColumn dataField="Grade" headerText="年级"/>
				<mx:AdvancedDataGridColumn dataField="Classes" headerText="班级"/>
				<mx:AdvancedDataGridColumn dataField="Teacher" headerText="指导员"/>
				<mx:AdvancedDataGridColumn dataField="Number" headerText="人数"/>
				<mx:AdvancedDataGridColumn dataField="Calling" headerText="联系方式"/>
			</mx:columns>
		</mx:AdvancedDataGrid>
	</mx:Panel>

	
</s:Application>

三、鼠标右键，点击“运行方式”中的“Web应用程序”，运行结果如下：