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>

示例图：