首先我先来看下利用Advanced Datagrid做出的效果，然后我们再对其中所利用的知识进行讲解，效果图如下：
我们来看下这个效果我们所用到的关于Advanced Datagrid的相关知识：
一.选择多个单元格及多行
所有基于List的控件都支持allowMultipleSelection属性。将allowMultipleSelection属性设置为True可以使得您在控件中一次选择不止一个条目。例如，DataGrid控件可以让您选择多行这样您就可以将他们拖放到另一个DataGrid中。
AdvancedDataGrid增加了可以让您选择多个单元格的新的特性，一旦已选择，您就可以将其拖放到另一个AdvancedDataGrid控件中、将它们拷贝到剪切板中或者在单元格数据进行某些其他的处理。
您可以使用AdvancedDataGrid控件的selectionMode和allowMultipleSelection配置多重选择。selectionMode的缺省属性是singleRow，这就是说您一次只能选择单行。要多重选择，需要将selectionMode属性设置为multipleRows或者multipleCells。
多个单元格的选择方式和表格处理软件中的用法相似，连续的使用Shift键，非连续的使用Control建。
选择控件中邻近的单元
- 点击第一个单元，在某行或某列，选择它。
- 在选择其他的单元时按下Shift键。如果selectionMode设置为multipleRows，点击任何其他行的单元格来选择多个时，将选择邻近的行。如果selectionMode设置为multipleCells，点击任何单元格，将选择邻近的单元格
选择控件中非邻近的单元
- 点击第一个单元，在某行或某列，选择它。
- 在选择其他的单元时按下Control键。如果selectionMode设置为multipleRows，点击任何其他行的单元格来选择多个时，将选择该单独的行。如果selectionMode设置为multipleCells，点击任何单元格，将选择该单独的单元格
一旦选择了AdvancedDataGrid控件的某行或列时，该控件将更新selectedCells属性来记录您的选择信息。selectedCells是一个对象数组，它包含的每个对象都有一个rowIndex和columnIndex属性来表示您选择的单元格在控件中的行列的位置。
selectionMode属性的值决定了rowIndex和columnIndex属性的值，如下图所示：
二.分层和分组数据显示
AdvancedDataGrid支持分级和分组数据的显示，为了支持这样的显示，AdvancedDataGrid在第一列显示一个导航树以让您分级浏览数据。唯一要记住的规则是该树总是显示在所有列的最左边。尽管在AdvancedDataGrid控件您可以任意组织列而不管数据是如何组织的。并且您可以通过拖动列来对AdvancedDataGrid控件上的列进行重新定位，但是导航树总是出现在列的最左边。
数据表格的第一列通常与该控件的数据源的某一字段关联。该数据字段用于为树节点标签命名。
分层数据（Hierarchical data）是一种以父子项目结构分层的数据，分组数据（Grouped data）是一开始就为平面的而无内在层次关系的数据。在将该数据传递给AdvancedDataGrid前，您可以指定一个或更多的数据字段将一组数据归组为同一层次。
三.项目渲染器(或者项呈示器)
您可以通过创建自定义的条目渲染器(item renderers)或者条目编辑器(item editors)来定制AdvancedDataGrid中单元格的外观和行为。与DataGrid处理的方法类似，我们直接将条目渲染器(item renderers)或者条目编辑器(item editors)赋值给AdvancedDataGrid的列就可以了。。
AdvancedDataGrid在对于项目渲染器的支持上增加了一些新的特性，这些新的特性可以让您处理下面的操作：
- 创建非关联数据源数据的行或列。例如，您可以从数据源创建汇总行。
- 一个渲染器跨越多个列。
- 单列使用多个渲染器。例如，当显示分层数据时，基于分层中的级别同一列使用不同的渲染器。
注意：这些新的特性只支持项目渲染器；项目编辑器的用法和DataGrid中的用法相同。
而最上方用到的是项渲染器中之一的HeaderRender,主要是实现类似于Excel表格中的表头，如下图
项渲染器的代码headerRender.mxml如下：
1 <?xml version="1.0" encoding="utf-8"?> 2 <mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009" 3 xmlns:s="library://ns.adobe.com/flex/spark" 4 xmlns:mx="library://ns.adobe.com/flex/mx" 5 focusEnabled="true" 6 creationComplete="init()"> 7 8 <fx:Script> 9 <![CDATA[ 10 11 import mx.controls.Label; 12 import mx.events.ResizeEvent; 13 14 15 private const leftText:String = "分类"; 16 17 private const middleText:String = "内容"; 18 19 private const rightText:String = "详细"; 20 21 22 private var leftLabel:Label; 23 24 private var middleLabel:Label; 25 26 private var rightLabel:Label; 27 28 29 30 private function init():void{ 31 32 addLabel(); 33 34 drawLine(); 35 36 this.addEventListener(ResizeEvent.RESIZE, onResize); 37 38 } 39 40 41 42 private function onResize(e:ResizeEvent):void{ 43 44 resetLabel(); 45 46 drawLine(); 47 48 } 49 50 51 52 private function drawLine():void{ 53 54 var g:Graphics = this.graphics; 55 56 g.clear(); 57 58 g.lineStyle(0.5, 0x000000); 59 60 g.moveTo(0, 0); 61 62 g.lineTo(this.width, this.height/2); 63 64 g.moveTo(0, 0); 65 66 g.lineTo(this.width/2, this.height); 67 68 } 69 70 71 72 private function addLabel():void{ 73 74 leftLabel = new Label(); 75 76 leftLabel.text = leftText; 77 addChild(leftLabel); 78 79 80 middleLabel = new Label(); 81 82 middleLabel.text = middleText; 83 addChild(middleLabel); 84 85 86 rightLabel = new Label(); 87 88 rightLabel.text = rightText; 89 addChild(rightLabel); 90 91 92 callLater(resetLabel); 93 } 94 95 private function resetLabel():void{ 96 97 leftLabel.x = 2; 98 99 leftLabel.y = this.height - leftLabel.height ; 100 101 middleLabel.x = this.width/2; 102 103 middleLabel.y = this.height/2 + 2; 104 105 rightLabel.x = this.width - rightLabel.width; 106 107 rightLabel.y = 0; 108 } 109 110 ]]> 111 </fx:Script> 112 </mx:Canvas>
四.使用CSS来定义样式
表格CSS代码如下，具体每个样式所代表内容请查阅api
1 <fx:Style> 2 @namespace s "library://ns.adobe.com/flex/spark"; 3 @namespace mx "library://ns.adobe.com/flex/mx"; 4 .myADG{ 5 borderColor:"0x000000"; 6 selectionColor:"0x0099CC"; 7 /* alternatingItemColors:'0xcccccc','0xffffff'; */ 8 color:"0x000000"; 9 rollOverColor:"0x99CCFF"; 10 horizontalGridLineColor:"0x000000"; 11 /* horizontalGridLines:true; 12 verticalGridLines:true; 表格图标效果 */ 13 verticalGridLineColor:"0x000000"; 14 headerColors:'0xffffff','0xffffff'; 15 /*headerSortSeparatorSkin:ClassReference("mx.skins.ProgrammaticSkin");去除排序竖线,这里设置只是单纯去除了竖线，但竖线的位置依然存在，完美解决只需设置sortExpertMode="true"即可*/ 16 headerStyleName:adgHeadStyle; 17 } 18 </fx:Style>
由于时间原因，其中用到的知识就点到这里，其他请读者自行查找，参考api即可。现附上测试代码：
1 <?xml version="1.0" encoding="utf-8"?> 2 <viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009" 3 xmlns:s="library://ns.adobe.com/flex/spark" 4 xmlns:mx="library://ns.adobe.com/flex/mx" 5 xmlns:viewer="com.cityigs.viewer.*" layout="absolute"> 6 7 <fx:Script> 8 <![CDATA[ 9 import mx.collections.ArrayCollection; 10 11 [Bindable] 12 private var dpFlat:ArrayCollection = new ArrayCollection([ 13 {Region:"山东", Range:"0-3级", 14 Count:"4", Time:"2013-3-1", eqMagnitude:2}, 15 {Region:"山东", Range:"3-5级", 16 Count:"3", Time:"2013-2-1", eqMagnitude:4}, 17 {Region:"山东", Range:"5级以上", 18 Count:"1", Time:"2013-8-1", eqMagnitude:6}, 19 {Region:"山东", Range:"0-3级", 20 Count:"4", Time:"2011-7-1", eqMagnitude:2.5}, 21 {Region:"山东", Range:"0-3级", 22 Count:"4", Time:"2010-1-1", eqMagnitude:1}, 23 {Region:"山东", Range:"0-3级", 24 Count:"4", Time:"2003-5-1", eqMagnitude:1.6}, 25 {Region:"山东", Range:"3-5级", 26 Count:"3", Time:"2011-6-1", eqMagnitude:4.2}, 27 {Region:"山东", Range:"3-5级", 28 Count:"3", Time:"2012-4-1", eqMagnitude:3.2}, 29 {Region:"江苏", Range:"0-3级", 30 Count:"2", Time:"2010-5-1", eqMagnitude:2}, 31 {Region:"江苏", Range:"0-3级", 32 Count:"2", Time:"2011-3-1", eqMagnitude:3}, 33 {Region:"江苏", Range:"3-5级", 34 Count:"1", Time:172911, eqMagnitude:3.6}, 35 {Region:"江苏", Range:"5级以上", 36 Count:"1", Time:"2003-7-1", eqMagnitude:8}, 37 {Region:"河北", Range:"0-3级", 38 Count:"1", Time:"2003-6-1", eqMagnitude:2}, 39 {Region:"河北", Range:"3-5级", 40 Count:"1", Time:"2010-2-1", eqMagnitude:3.5}, 41 {Region:"河北", Range:"5级以上", 42 Count:"1", Time:"2011-4-1", eqMagnitude:5.1} 43 ]); 44 45 ]]> 46 </fx:Script> 47 48 <fx:Declarations> 49 <!-- 将非可视元素（例如服务、值对象）放在此处 --> 50 </fx:Declarations> 51 <fx:Style> 52 @namespace s "library://ns.adobe.com/flex/spark"; 53 @namespace mx "library://ns.adobe.com/flex/mx"; 54 .myADG{ 55 borderColor:"0x000000"; 56 selectionColor:"0x0099CC"; 57 /* alternatingItemColors:'0xcccccc','0xffffff'; */ 58 color:"0x000000"; 59 rollOverColor:"0x99CCFF"; 60 horizontalGridLineColor:"0x000000"; 61 /* horizontalGridLines:true; 62 verticalGridLines:true; 表格图标效果 */ 63 verticalGridLineColor:"0x000000"; 64 headerColors:'0xffffff','0xffffff'; 65 /*headerSortSeparatorSkin:ClassReference("mx.skins.ProgrammaticSkin");去除排序竖线,这里设置只是单纯去除了竖线，但竖线的位置依然存在，完美解决只需设置sortExpertMode="true"即可*/ 66 headerStyleName:adgHeadStyle; 67 } 68 </fx:Style> 69 70 <viewer:WidgetTemplate id="wTemplate" width="600" height="500"> 71 <s:Group width="100%" height="100%"> 72 <s:layout> 73 <s:VerticalLayout horizontalAlign="center"/> 74 </s:layout> 75 <mx:AdvancedDataGrid id="myADG" width="100%" height="100%" selectionMode="multipleRows" allowMultipleSelection="true" color="0x323232" styleName="myADG" sortExpertMode="true" initialize="gc.refresh();"> 76 <mx:dataProvider> 77 <mx:GroupingCollection id="gc" source="{dpFlat}"> 78 <mx:grouping> 79 <mx:Grouping> 80 <mx:GroupingField name="Region"/> 81 <mx:GroupingField name="Range"/> 82 </mx:Grouping> 83 </mx:grouping> 84 </mx:GroupingCollection> 85 </mx:dataProvider> 86 87 <mx:groupedColumns> 88 <mx:AdvancedDataGridColumn dataField="Region" headerText="地区" headerRenderer="widgets.Test.headRender"/> 89 <mx:AdvancedDataGridColumnGroup headerText="详细信息"> 90 <mx:AdvancedDataGridColumn dataField="Time" headerText="发生时间"/> 91 <mx:AdvancedDataGridColumn dataField="eqMagnitude" headerText="震级"/> 92 </mx:AdvancedDataGridColumnGroup> 93 <mx:AdvancedDataGridColumnGroup headerText="统计信息"> 94 <mx:AdvancedDataGridColumn dataField="Region" headerText="地区"/> 95 <mx:AdvancedDataGridColumn dataField="Range" headerText="震级范围"/> 96 <mx:AdvancedDataGridColumn dataField="Count" headerText="发震次数"/> 97 </mx:AdvancedDataGridColumnGroup> 98 </mx:groupedColumns> 99 </mx:AdvancedDataGrid> 100 </s:Group> 101 </viewer:WidgetTemplate> 102 </viewer:BaseWidget>
今天到此为止，欢迎各位拍砖！