Flex grid 复杂表头

Flex grid 复杂表头

第一种 最简单的两重表头

code 如下：

<?xml version="1.0"?>
<mx: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" initialize="init()">
	
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			[Bindable]
			private var dpFlat:ArrayCollection = new ArrayCollection([
				{Region:"Southwest", Territory:"Arizona", 
					Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
				{Region:"Southwest", Territory:"Arizona", 
					Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},  
				{Region:"Southwest", Territory:"Central California", 
					Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},  
				{Region:"Southwest", Territory:"Nevada", 
					Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},  
				{Region:"Southwest", Territory:"Northern California", 
					Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
				{Region:"Southwest", Territory:"Northern California", 
					Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},  
				{Region:"Southwest", Territory:"Southern California", 
					Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
				{Region:"Southwest", Territory:"Southern California", 
					Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
			]);
			
		private function init()
		 {
			 
		 }
		]]>
	</fx:Script>
	
	<mx:Panel title="AdvancedDataGrid Control Example"
			  height="75%" width="75%" layout="horizontal"
			  paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
		
		<mx:AdvancedDataGrid id="myADG" 
							 width="100%" height="100%" 
							 initialize="gc.refresh();">        
			<mx:dataProvider>
				<mx:GroupingCollection2 id="gc" source="{dpFlat}">
					<mx:grouping>
						<mx:Grouping>
							<mx:GroupingField name="Region"/>
							<mx:GroupingField name="Territory"/>
						</mx:Grouping>
					</mx:grouping>
				</mx:GroupingCollection2>
			</mx:dataProvider>        
			
			<mx:groupedColumns>
				<mx:AdvancedDataGridColumn dataField="Region"/>
				
				<mx:AdvancedDataGridColumnGroup  id="headerText" headerText="Territory">
					<mx:AdvancedDataGridColumn dataField="Territory"/>
					<mx:AdvancedDataGridColumn dataField="Territory_Rep"
											   headerText="Territory Rep"/>
				</mx:AdvancedDataGridColumnGroup>
				<mx:AdvancedDataGridColumnGroup  id ="Actual" headerText="Actual">
					<mx:AdvancedDataGridColumn dataField="Actual"/>
					<mx:AdvancedDataGridColumn dataField="Estimate"/>
				</mx:AdvancedDataGridColumnGroup>
				
			</mx:groupedColumns>
		</mx:AdvancedDataGrid>
	</mx:Panel>
	
</mx:Application>

第二种 复杂表头

定制ClassFactory。。。重写展现方式

Code

<?xml version="1.0"?>
<mx: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" initialize="init()">
	
	<fx:Script>
		<![CDATA[
			
			import mx.collections.ArrayCollection;
			
			[Bindable]
			private var dpFlat:ArrayCollection = new ArrayCollection([
				{Region:"Southwest", Territory:"Arizona", 
					Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
				{Region:"Southwest", Territory:"Arizona", 
					Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},  
				{Region:"Southwest", Territory:"Central California", 
					Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},  
				{Region:"Southwest", Territory:"Nevada", 
					Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},  
				{Region:"Southwest", Territory:"Northern California", 
					Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
				{Region:"Southwest", Territory:"Northern California", 
					Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},  
				{Region:"Southwest", Territory:"Southern California", 
					Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
				{Region:"Southwest", Territory:"Southern California", 
					Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
			]);
			
		private function init()
		 {
			var classFactory = new ClassFactory(HeaderRenderer);
			classFactory.properties = {type: 'region1', defaultExpandCollapseImage: 'region1', headerLevel1: 'region1', headerLevel2: 'region2', headerLevel3:'region3'};
			region.headerRenderer = classFactory;
			
			
			classFactory = new ClassFactory(TestGridHeader);
			classFactory.properties = {fullName: 'Test', shortName: 'Test', mouseOverTitle: 'Test Territory', hasAccess: true};
			test1.headerRenderer = classFactory;
			
//			programViewGridColumns.push(programHierarchyColumn);
		 }
		]]>
	</fx:Script>
	
	<mx:Panel title="AdvancedDataGrid Control Example"
			  height="75%" width="75%" layout="horizontal"
			  paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
		
		<mx:AdvancedDataGrid id="myADG"  sortableColumns="false" styleName="datagridsummary" verticalScrollPolicy="auto" resizableColumns="false" draggableColumns="false"
							 width="100%" height="100%" 
							 initialize="gc.refresh();">        
			<mx:dataProvider>
				<mx:GroupingCollection2 id="gc" source="{dpFlat}">
					<mx:grouping>
						<mx:Grouping>
							<mx:GroupingField name="Region"/>
							<mx:GroupingField name="Territory"/>
						</mx:Grouping>
					</mx:grouping>
				</mx:GroupingCollection2>
			</mx:dataProvider>        
			
			<mx:groupedColumns>
				<mx:AdvancedDataGridColumn id ='region' dataField="Region" width="300"/>
				
				<mx:AdvancedDataGridColumnGroup  id="headerText" headerText="Territory" >
					<mx:AdvancedDataGridColumn id="test1" dataField="Territory" width="100" />
					<mx:AdvancedDataGridColumn dataField="Territory_Rep"
											   headerText="Territory Rep" width="100"/>
				</mx:AdvancedDataGridColumnGroup>
				<mx:AdvancedDataGridColumnGroup  id ="Actual" headerText="Actual">
					<mx:AdvancedDataGridColumn dataField="Actual" width="100"/>
					<mx:AdvancedDataGridColumn dataField="Estimate" width="100"/>
				</mx:AdvancedDataGridColumnGroup>
				
			</mx:groupedColumns>
		</mx:AdvancedDataGrid>
	</mx:Panel>
	
</mx:Application>

classfactory 如下：

HeaderRenderer

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" horizontalAlign="center" verticalAlign="top" horizontalScrollPolicy="off" verticalScrollPolicy="off" paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0" verticalGap="0" horizontalGap="0">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Style source="./assets/css/main.css"/>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			[Bindable]
			public var type:String;
			[Bindable]
			public var defaultExpandCollapseImage:String;
			[Bindable]
			public var headerLevel1:String;
			[Bindable]
			public var headerLevel2:String;
			[Bindable]
			public var headerLevel3:String;
		]]>
	</fx:Script>
	<mx:VBox width="100%">
		<mx:HBox width="100%" height="100%">
			<mx:Image source="{'./assets/images/plus.gif'}" toolTip="'Expand All'" click=""/>
			<mx:Label text="{headerLevel1}" styleName="gridHeader" textDecoration="none"/>
		</mx:HBox>
		<mx:HBox width="100%" height="100%" paddingLeft="20">
			<mx:Image source="{'./assets/images/sub_dot.gif'}"/>
			<mx:Label text="{headerLevel2}" alpha="0.5" textDecoration="none"/>
		</mx:HBox>
		<mx:HBox width="100%" height="100%" paddingLeft="20" id="level3Header">
			<mx:Image source="{'./assets/images/sub_dot.gif'}" visible="true"/>
			<mx:Image source="{'./assets/images/sub_dot.gif'}"/>
			<mx:Label text="{headerLevel3}" alpha="0.5" textDecoration="none"/>
		</mx:HBox>
	</mx:VBox>
</mx:HBox>

TestGridHeader

package 
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.text.AntiAliasType;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	
	import mx.containers.VBox;
	import mx.controls.Alert;
	import mx.controls.ToolTip;
	import mx.controls.listClasses.IListItemRenderer;
	import mx.core.FlexGlobals;
	import mx.messaging.AbstractConsumer;

	public class TestGridHeader extends VBox implements IListItemRenderer {
		[Bindable]public var fullName:String;
		[Bindable]public var shortName:String;
		[Bindable]public var mouseOverTitle:String;
		[Bindable]public var hasAccess:Boolean = true;
		[Bindable]public var wrapText:Boolean = false;
		private var _lbl:TextField;
		
		override protected function createChildren():void {
			super.createChildren();
			var _txtFormat:TextFormat = new TextFormat();
			_txtFormat.font = "myPlainFont";
			_txtFormat.size = 11;
			_txtFormat.bold = true;
			_txtFormat.color = 0x020264;
			_txtFormat.align = "left";
			
			_lbl = new TextField();
			_lbl.alpha = 1
			_lbl.wordWrap = wrapText;
			_lbl.autoSize = TextFieldAutoSize.LEFT;
			_lbl.embedFonts = true;
			_lbl.antiAliasType = AntiAliasType.ADVANCED;
			_lbl.defaultTextFormat = _txtFormat;
			_lbl.rotation = 270;
			_lbl.mouseEnabled = false;
			_lbl.width = 60;
			_lbl.height = 100;
			
			var sprite:Sprite = new Sprite();
			sprite.buttonMode = true;//Mouse Hand Cursor
			sprite.addChild(_lbl);
			
			rawChildren.addChild(sprite);
			this.toolTip = mouseOverTitle;
		}
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
			super.updateDisplayList(unscaledWidth,unscaledHeight);
			if(shortName != null && shortName != "") {
				_lbl.textColor = 0xffffff;
				_lbl.text = shortName;
				_lbl.y = 25;
				_lbl.x = (width - _lbl.width)/2;
				_lbl.textColor = 0x020264;
			}
		}
	}
}