Flex中动态生成表头

1、设计思路

（1）使用组件新建一个DataGrid；

（2）将表头生成函数放在GridData中，利用另一个组件引用它；

（3）在DGridHeader中引用GridData组件，并在自身中声明几个表头的数据源；

（4）在新建应用程序中，引用DGridHeader

2、设计源码

（1）GridData.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
		   width="100%" height="100%" creationComplete="initCompleteHandler(event)">
	<mx:Style>
		.headStyle{
			font-size:14;
			font-weight:bold;
		}
	</mx:Style>
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.dataGridClasses.DataGridColumn;
			import mx.events.FlexEvent;
			
			//表格表头数据绑定
			private var _headerArray:ArrayCollection;
			
			//表头名称
			private var _headerName:String;
			
            /*初始化函数*/
			protected function initCompleteHandler(event:FlexEvent):void
			{
				generateDataGridHead(_headerArray);
			}
			
			/*生成表格表头函数*/
			private function generateDataGridHead(header:ArrayCollection):void
			{
				if(header != null && header.length >0)
				{
					var column:Array = dataGrid.columns;
					column.length = 0;
					var dataGridColumn:DataGridColumn;
					for each(var obj:Object in header)
					{
						dataGridColumn = new DataGridColumn();
						dataGridColumn.headerText = obj.headDesc;
						dataGridColumn.dataField = obj.headCode;
						dataGridColumn.width = 55;
						column.push(dataGridColumn);
					}
					dataGrid.columns = column;
					if(column.length > 8)
					{
						dataGrid.width = column.length*55;
						dataGrid.height = column.length*60;
					}else{
						dataGrid.width = 1290;
						dataGrid.height = 510;
					}
				}
			}
			
			/*get方法*/
			public function get headerArray():ArrayCollection
			{
				return _headerArray;
			}
			
			/*set方法*/
			public function set headerArray(value:ArrayCollection):void
			{
				_headerArray = value;
			}

			/*get方法*/
			public function get headerName():String
			{
				return _headerName;
			}
			
			/*set方法*/
			public function set headerName(value:String):void
			{
				_headerName = value;
			}
			
		]]>
	</mx:Script>
	
	<mx:VBox width="100%" height="100%">
		<mx:DataGrid id="dataGrid" width="100%" height="100%" headerStyleName="headStyle" 
					 headerColors="[0xD9D9D9,0xD9D9D9]" paddingBottom="10" paddingLeft="20"
					 paddingRight="10" paddingTop="10">
			
		</mx:DataGrid>
	</mx:VBox>
</mx:Canvas>

（2）DGridHeader.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
		   width="100%" height="100%" xmlns:grid="grid.*">
	
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
		    [Bindable]
			//教师表格表头数据绑定
			private var teacherArray:ArrayCollection = new ArrayCollection([
				{headDesc:"教师姓名",headCode:"teacherName"},
				{headDesc:"教师性别",headCode:"teacherSex"},
				{headDesc:"教师年龄",headCode:"teacherAge"},
				{headDesc:"教师工号",headCode:"teacherNumber"},
				{headDesc:"教师住址",headCode:"teacherAddress"}
			]);
			
			[Bindable]
			//学生表格表头数据绑定
			private var studentArray:ArrayCollection = new ArrayCollection([
				{headDesc:"学生姓名",headCode:"studentName"},
				{headDesc:"学生性别",headCode:"studentSex"},
				{headDesc:"学生年龄",headCode:"studentAge"},
				{headDesc:"学生学号",headCode:"studentNumber"},
				{headDesc:"学生住址",headCode:"studentAddress"}
			]);
			
			[Bindable]
			//课程表格表头数据绑定
			private var classArray:ArrayCollection = new ArrayCollection([
				{headDesc:"课程名称",headCode:"className"},
				{headDesc:"教授教师",headCode:"teachTeacher"},
				{headDesc:"上课人数",headCode:"number"}
			]);
		]]>
	</mx:Script>
	
	<mx:TabNavigator width="100%" height="100%" fontSize="14">
		<mx:Canvas label="教师" width="100%" height="100%">
			<grid:GridData headerArray="{teacherArray}" textAlign="center" width="100%" height="100%"
						   headerName="教师"/>
		</mx:Canvas>
		<mx:Canvas label="学生" width="100%" height="100%">
			<grid:GridData headerArray="{studentArray}" textAlign="center" width="100%" height="100%"
						   headerName="学生"/>
		</mx:Canvas>
		<mx:Canvas label="课程" width="100%" height="100%">
			<grid:GridData headerArray="{classArray}" textAlign="center" width="100%" height="100%"
						   headerName="课程"/>
		</mx:Canvas>
	</mx:TabNavigator>
	
</mx:Canvas>

（3）DynamicGrid.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				width="100%" height="100%" xmlns:data="data.*">
	<mx:VBox width="100%" height="100%">
		<data:DGridHeader width="100%" height="100%"/>
	</mx:VBox>
</mx:Application>

3、设计结果

（1）教师

（2）学生

（3）课程