Study Flex《AdvancedDataGrid生成斜线网格头》

一、描述

前段时间找工作被问到，当时只有大致想法，并未实现，被BS了。现具体实现。

在展现数据时，会有表头，在表头中会有斜线这种情况。

二、解决方法

重新渲染表头，即重绘render放在headerRenderer上。

三、原因

默认情况下：headerRenderer="AdvancedDataGridItemRenderer"

四、实现

1.AdvancedDataGrids.mxml

<?xml version="1.0" encoding="utf-8"?>
<ex:ExampleBase  xmlns:ex="examples.*" xmlns="http://www.adobe.com/2006/mxml" xmlns:dataGrid="examples.dataGrid.*">
	<Script>
		<![CDATA[
			import flash.sampler.Sample;
			override public function get descriptions():Array {
				return ["a simple AdvancedDataGrid"];
			}
		]]>
	</Script>
	<Model id="dataSet" source="/data/advancedData.xml" />
	<AdvancedDataGrid id="adv" dataProvider="{dataSet.Sample}" headerWordWrap="true"
					  headerSortSeparatorSkin="mx.skins.ProgrammaticSkin" sortableColumns="false"
					  sortExpertMode="true" designViewDataType="flat" dragEnabled="false">
		<groupedColumns>
			<AdvancedDataGridColumn headerText="月份" dataField="month"
									headerRenderer="examples.dataGrid.MyRenderer">
			</AdvancedDataGridColumn>
			
			<AdvancedDataGridColumn headerText="期初总户数" dataField="startTotal" />
			<AdvancedDataGridColumnGroup headerText="企业">
				<AdvancedDataGridColumn headerText="期初户数" dataField="businessStartCount" />
				<AdvancedDataGridColumn headerText="本月增加户数" dataField="businessAdd" />
				<AdvancedDataGridColumn headerText="本月减少户数" dataField="businessCut" />
				<AdvancedDataGridColumn headerText="期末户数" dataField="businessEndCount" />
			</AdvancedDataGridColumnGroup>
			
			<AdvancedDataGridColumnGroup headerText="个体工商户">
				<AdvancedDataGridColumn headerText="期初户数" dataField="personalStartCount" />
				<AdvancedDataGridColumn headerText="本月增加户数" dataField="personalAdd" />
				<AdvancedDataGridColumn headerText="本月减少户数" dataField="personalCut" />
				<AdvancedDataGridColumn headerText="期末户数" dataField="personalEndCount" />
				<AdvancedDataGridColumnGroup headerText="其中">
					<AdvancedDataGridColumn headerText="起征点以上户" dataField="businessPonintUp" />
					<AdvancedDataGridColumn headerText="起征点以下户" dataField="businessPonintDown" />
				</AdvancedDataGridColumnGroup>
			</AdvancedDataGridColumnGroup>
			
			<AdvancedDataGridColumn headerText="期末总户数" dataField="endTotal" />
		</groupedColumns>
	</AdvancedDataGrid>
</ex:ExampleBase>

2.advancedData.xml

<YearlyData>
	<Sample month="1" startTotal="25000" businessStartCount="4000" businessAdd="38865" businessCut="4000"
		businessEndCount="3000" personalStartCount="150" personalAdd="111" personalCut="30" 
		personalEndCount="3000" businessPonintUp="16" businessPonintDown="1500" endTotal="4000"/>
	<Sample month="2" startTotal="25000" businessStartCount="4000" businessAdd="38865" businessCut="4000"
		businessEndCount="3000" personalStartCount="150" personalAdd="111" personalCut="30" 
		personalEndCount="3000" businessPonintUp="16" businessPonintDown="1500" endTotal="4000"/>
	<Sample month="3" startTotal="25000" businessStartCount="4000" businessAdd="38865" businessCut="4000"
		businessEndCount="3000" personalStartCount="150" personalAdd="111" personalCut="30" 
		personalEndCount="3000" businessPonintUp="16" businessPonintDown="1500" endTotal="4000"/>
	<Sample month="4" startTotal="25000" businessStartCount="4000" businessAdd="38865" businessCut="4000"
		businessEndCount="3000" personalStartCount="150" personalAdd="111" personalCut="30" 
		personalEndCount="3000" businessPonintUp="16" businessPonintDown="1500" endTotal="4000"/>
	<Sample month="5" startTotal="25000" businessStartCount="4000" businessAdd="38865" businessCut="4000"
		businessEndCount="3000" personalStartCount="150" personalAdd="111" personalCut="30" 
		personalEndCount="3000" businessPonintUp="16" businessPonintDown="1500" endTotal="4000"/>	
</YearlyData>

3.MyRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
		   creationComplete="init()">
	<mx:Script>
		<![CDATA[
			import mx.events.ResizeEvent;
			import mx.controls.Label;
			
			private const leftText:String = "月份";
			private const rightText:String = "户型";
			private var leftLabel:Label;
			private var rightLabel:Label;
			
			private function init():void{
				addLabel();
				drawLine();
				this.addEventListener(ResizeEvent.RESIZE, onResize);
			}
			private function onResize(e:ResizeEvent):void{
				resetLabel();
				drawLine();
			}
			private function drawLine():void{
				var g:Graphics = this.graphics;
				g.clear();
				g.lineStyle(0.5, 0xB7BABC);
				g.moveTo(0, 0);
				g.lineTo(this.width, this.height);
			}
			private function addLabel():void{
				leftLabel = new Label();
				leftLabel.text = leftText;
				addChild(leftLabel);
				
				rightLabel = new Label();
				rightLabel.text = rightText;
				addChild(rightLabel);
				
				callLater(resetLabel);
			}
			private function resetLabel():void{
				leftLabel.x = 5;
				leftLabel.y = this.height - leftLabel.height - 5;
				rightLabel.x = this.width - rightLabel.width;
				rightLabel.y = 10;
			}
		]]>
	</mx:Script>
</mx:Canvas>

五、效果

六、说明

1.本工程是基于其它工程而来，如需单独工程，请参考：http://blog.csdn.net/czx33859066/article/details/4843136

2.此内容思想主要来自：http://www.iteye.com/topic/380207

3.presses老大说也可以用：用带斜线的背景图、HRule设置rotate也可以实现。（应该是可以，没亲测）

4.感谢以上人的无私奉献

------------------------------------------------------------------------------------