Flex AdvancedDatagrid使用

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

今天到此爲止，歡迎各位拍磚！