Flex AdvancedDatagrid使用

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

View Code

四.使用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>

View Code

由于时间原因，其中用到的知识就点到这里，其他请读者自行查找，参考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>

View Code

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