Flex中AdvancedDataGrid的用法示例介绍

在实际的Flex开发中，表格的复杂表头需求并不少见——比如需要把“高一、高二、高三”归到“班级”下面，或者把“语文、数学、英语”归到“课程”下面。这种双表头（即分组表头）能让数据展示一目了然。下面直接通过一个实例，看看AdvancedDataGrid如何实现这一效果。

（1）源码

文件：AdvanceGrid.mxml

复制代码 代码如下：

    
        
    
    
    

    
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        .adv{
            font-size:12;
            font-weight:bold;
            color:FFFFFF;
        }
    

    
        
    

    
        
            
                
                
                    
                    
                    
                
                
                    
                    
                
                
                    
                    
                    
                
            
        
    

（2）显示结果

运行上述代码，渲染出的表格效果如下：

整个思路其实很清晰：通过mx:AdvancedDataGridColumnGroup将子列包裹起来，就能实现分组表头。代码中的数据源用了扁平化的ArrayCollection，每个字段对应一个列，双表头层次完全由groupedColumns结构定义。调整样式、颜色、对齐方式也很方便，直接修改AdvancedDataGrid的属性即可。如果需要更复杂的多层嵌套，继续在Group里嵌套Group就行，和这里的方式完全一致。