FLEX AdvancedDataGrid生成斜線網格頭

生成斜線網格頭，即重新渲染表頭，重繪render放在headerRenderer上。

1.Application.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" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 將非可視元素（例如服務、值對象）放在此處 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			[Bindable]  
			private var dpFlat:ArrayCollection = new ArrayCollection([  
				{yf:"1", qczhs:25000,   
					qyqc:4000, qybyzj:38865, qybyjs:40000,qyqmhs:3000,gtqc:150,gtbyzj:111,  
					gtbyjs:30,gtqmhs:3000,qzdx:16,qzds:1500,qmzs:4000},   
				{yf:"2", qczhs:25000,   
					qyqc:4000, qybyzj:38865, qybyjs:40000,qyqmhs:3000,gtqc:150,gtbyzj:111,  
					gtbyjs:30,gtqmhs:3000,qzdx:16,qzds:1500,qmzs:4000},  
				{yf:"3", qczhs:25000,   
					qyqc:4000, qybyzj:38865, qybyjs:40000,qyqmhs:3000,gtqc:150,gtbyzj:111,  
					gtbyjs:30,gtqmhs:3000,qzdx:16,qzds:1500,qmzs:4000},  
				{yf:"4", qczhs:25000,   
					qyqc:4000, qybyzj:38865, qybyjs:40000,qyqmhs:3000,gtqc:150,gtbyzj:111,  
					gtbyjs:30,gtqmhs:3000,qzdx:16,qzds:1500,qmzs:4000},  
				{yf:"5", qczhs:25000,   
					qyqc:4000, qybyzj:38865, qybyjs:40000,qyqmhs:3000,gtqc:150,gtbyzj:111,  
					gtbyjs:30,gtqmhs:3000,qzdx:16,qzds:1500,qmzs:4000},  
				{yf:"6", qczhs:25000,   
					qyqc:4000, qybyzj:38865, qybyjs:40000,qyqmhs:3000,gtqc:150,gtbyzj:111,  
					gtbyjs:30,gtqmhs:3000,qzdx:16,qzds:1500,qmzs:4000},  
				{yf:"7", qczhs:25000,   
					qyqc:4000, qybyzj:38865, qybyjs:40000,qyqmhs:3000,gtqc:150,gtbyzj:111,  
					gtbyjs:30,gtqmhs:3000,qzdx:16,qzds:1500,qmzs:4000},  
				{yf:"8", qczhs:25000,   
					qyqc:4000, qybyzj:38865, qybyjs:40000,qyqmhs:3000,gtqc:150,gtbyzj:111,  
					gtbyjs:30,gtqmhs:3000,qzdx:16,qzds:1500,qmzs:4000},  
				{yf:"9", qczhs:25000,   
					qyqc:4000, qybyzj:38865, qybyjs:40000,qyqmhs:3000,gtqc:150,gtbyzj:111,  
					gtbyjs:30,gtqmhs:3000,qzdx:16,qzds:1500,qmzs:4000},  
				{yf:"10", qczhs:25000,   
					qyqc:4000, qybyzj:38865, qybyjs:40000,qyqmhs:3000,gtqc:150,gtbyzj:111,  
					gtbyjs:30,gtqmhs:3000,qzdx:16,qzds:1500,qmzs:4000},  
				{yf:"11", qczhs:25000,   
					qyqc:4000, qybyzj:38865, qybyjs:40000,qyqmhs:3000,gtqc:150,gtbyzj:111,  
					gtbyjs:30,gtqmhs:3000,qzdx:16,qzds:1500,qmzs:4000},  
				{yf:"12", qczhs:25000,   
					qyqc:4000, qybyzj:38865, qybyjs:40000,qyqmhs:3000,gtqc:150,gtbyzj:111,  
					gtbyjs:30,gtqmhs:3000,qzdx:16,qzds:1500,qmzs:4000}  
			]);     
		]]>
	</fx:Script>
	<mx:AdvancedDataGrid width="100%" height="100%" dataProvider="{dpFlat}" designViewDataType="flat">
		<mx:groupedColumns>
			<mx:AdvancedDataGridColumn dataField="yf" headerText="月份" headerWordWrap="true" headerRenderer="render.ADGHeaderRenderer13"/>
			<mx:AdvancedDataGridColumn dataField="qczhs" headerText="期初總戶數"/>
			
			<mx:AdvancedDataGridColumnGroup headerText="企業">
				<mx:AdvancedDataGridColumn dataField="qyqc" headerText="期初戶數"/>
				<mx:AdvancedDataGridColumn dataField="qybyzj" headerText="本月增加戶"/>
				<mx:AdvancedDataGridColumn dataField="qybyjs" headerText="本月減少戶"/>
				<mx:AdvancedDataGridColumn dataField="qyqmhs" headerText="期末戶數"/>
			</mx:AdvancedDataGridColumnGroup>
			
			<mx:AdvancedDataGridColumnGroup headerText="個體工商戶">
				<mx:AdvancedDataGridColumn dataField="gtqc" headerText="期初戶數"/>
				<mx:AdvancedDataGridColumn dataField="gtbyzj" headerText="本月增加戶"/>
				<mx:AdvancedDataGridColumn dataField="gtbyjs" headerText="本月減少戶"/>
				<mx:AdvancedDataGridColumn dataField="gtqmhs" headerText="期末戶數"/>
				
				<mx:AdvancedDataGridColumnGroup headerText="其中">
					<mx:AdvancedDataGridColumn dataField="qzdx" headerText="起徵點以上戶"/>
					<mx:AdvancedDataGridColumn dataField="qzds" headerText="起徵點以下戶"/>
				</mx:AdvancedDataGridColumnGroup>
			</mx:AdvancedDataGridColumnGroup>
			
			<mx:AdvancedDataGridColumn dataField="qmzs" headerText="期末總戶數"/> 
		</mx:groupedColumns>
	</mx:AdvancedDataGrid>
</s:Application>

2.ADGHeaderRenderer13.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009" 
				   xmlns:s="library://ns.adobe.com/flex/spark" 
				   xmlns:mx="library://ns.adobe.com/flex/mx"  creationComplete="init()">
	<fx:Script>
		<![CDATA[
			import mx.controls.Label;
			import mx.events.ResizeEvent;
			
			private var leftLabel:Label;
			private var rightLabel:Label;
			private function init():void{
				addLabel();
				drawLine();
				//監聽RESIZE事件，
				this.addEventListener(ResizeEvent.RESIZE,resizeon);
			}
			
			private function resizeon(event:ResizeEvent):void{
				//當組件大小發生變化時,1、this.width,this.height的大小會發生變化，
				//2、重新計算leftLabel、rightLabel的x，y座標
				labelSize();
				drawLine();
			}
			
			private function addLabel():void{
				leftLabel = new Label();
				leftLabel.text = "月份";
				addChild(leftLabel);
				
				rightLabel = new Label();
				rightLabel.text = "戶型";
				addChild(rightLabel);
				
			}
			//從（0,0）座標表處繪圖位置開始到 (this.width, this.height) 結束的直線
			private function drawLine():void{
				var gr:Graphics = this.graphics;
				gr.clear();
				gr.lineStyle(0.5,0xB7BABC);
				gr.moveTo(0,0);
				gr.lineTo(this.width,this.height);
				
				//callLater排隊稍後調用的函數。 
				//在每次更新屏幕之前，this.width,this.height確認後，才調用labelSize()方法

				callLater(labelSize);
			}
			
			private function labelSize():void{
				leftLabel.x = 5;
				leftLabel.y = this.height - leftLabel.height - 5;//設置leftLabel的x，y的座標
				
				rightLabel.x = this.width - rightLabel.width - 10;//設置rightLabel的x，y的座標
				rightLabel.y = 10;
			}
		]]>
	</fx:Script>
</mx:Canvas>

示例圖：