首先我先来看下利用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>