首先我先来看下利用Advanced Datagrid做出的效果，然后我们再对其中所利用的知识进行讲解，效果图如下：

我们来看下这个效果我们所用到的关于Advanced Datagrid的相关知识：

一.选择多个单元格及多行

     所有基于List的控件都支持allowMultipleSelection属性。将allowMultipleSelection属性设置为True可以使得您在控件中一次选择不止一个条目。例如，DataGrid控件可以让您选择多行这样您就可以将他们拖放到另一个DataGrid中。

     AdvancedDataGrid增加了可以让您选择多个单元格的新的特性，一旦已选择，您就可以将其拖放到另一个AdvancedDataGrid控件中、将它们拷贝到剪切板中或者在单元格数据进行某些其他的处理。

     您可以使用AdvancedDataGrid控件的selectionMode和allowMultipleSelection配置多重选择。selectionMode的缺省属性是singleRow，这就是说您一次只能选择单行。要多重选择，需要将selectionMode属性设置为multipleRows或者multipleCells。

  多个单元格的选择方式和表格处理软件中的用法相似，连续的使用Shift键，非连续的使用Control建。

选择控件中邻近的单元

1. 点击第一个单元，在某行或某列，选择它。
2. 在选择其他的单元时按下Shift键。如果selectionMode设置为multipleRows，点击任何其他行的单元格来选择多个时，将选择邻近的行。如果selectionMode设置为multipleCells，点击任何单元格，将选择邻近的单元格

选择控件中非邻近的单元

1. 点击第一个单元，在某行或某列，选择它。
2. 在选择其他的单元时按下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 
        2 
      
         7       8     
       
          9         111     
       112 
      

 

四.使用CSS来定义样式

表格CSS代码如下，具体每个样式所代表内容请查阅api

1         
      
        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         
      

由于时间原因，其中用到的知识就点到这里，其他请读者自行查找，参考api即可。现附上测试代码：

1 
        2 
      
         6   7     
       
          8          46     
        47  48     
       
         49         
         50     
        51         
       
         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         
        69      70     
       
         71         
        
          72             
         
           73                 
           74             
          75             
         
                   76                 
          
            77                     
           
             78 
            
              79 
             
               80 
               81 
               82 
              83 
             84 
            85                 
                   86                  87                 
          
            88                     
            89                     
           
             90 
             91 
             92 
               93                     
           
             94 
             95 
             96 
             97 
               98                 
           99             
         100         
        101     
       102 
      

今天到此为止，欢迎各位拍砖！