Flex 3 AdvancedDataGrid的使用(二)

续第一部分，我们继续来讲AdvancedDataGrid的使用。

选择多个单元格及多行

所有基于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属性的值，如下表所示：

selectionMode属性	rowIndex和columnIndex属性值
none	控件不允许选择，并且selectedCells为null
singleRow	点击某行的任意单元来选择该行。 在选择后，selectedCells包含一个单独对象： [{rowIndex:selectedRowIndex, columnIndex: -1}]
multipleRows	点击某行的任意单元来选择该行。 对于非邻近行，按下Control键时，点击其他行的单元格来选择其他行。 对于邻近行，按下Shfit键时，点击其他行的单元格来选择多个连续的行。 选择后，每行在selectedCells保存为一个对象： [ {rowIndex: selectedRowIndex1, columnIndex: -1}, {rowIndex: selectedRowIndex2, columnIndex: -1}, ... {rowIndex: selectedRowIndexN, columnIndex: -1} ]
singleCell	点击任意单元来选择该单元格。 在选择后，selectedCells包含一个单独对象： [{rowIndex: selectedRowIndex, columnIndex:selectedColIndex}]
multipleCells	点击任意单元来选择该单元格。 对于非邻近单元，按下Control键时，点击任意单元格来选择多个非连续的单元格。 对于邻近单元，按下Shfit键时，点击任意单元格来选择多个连续的单元格。 选择后，每行在selectedCells保存为一个对象： [ {rowIndex: selectedRowIndex1, columnIndex: selectedColIndex1}, {rowIndex: selectedRowIndex2, columnIndex: selectedColIndex2}, ... {rowIndex: selectedRowIndexN, columnIndex: selectedColIndexN} ]

以下示例设置selectionMode属性为multipleCells使得您可以选择表格中的多个单元。该应用使用KeyUp事件处理器来识别Control-C组合键，如果监听到，将选择的多个单元格从AdvancedDataGrid控件复制到系统剪贴板中。

在拷贝单元格后，您可以将这些单元格粘贴到Flex应用的其他位置中，或者将它们粘贴到其他应用如微软Excel。您可以将它们粘贴到应用底部的TextArea中去。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import flash.events.KeyboardEvent;
   import flash.system.System;
   include "StyleData.as"
   // Event handler to recognize when Ctrl-C is pressed,
   // and copy the selected cells to the system clipboard.
   private function myKeyUpHandler(event:KeyboardEvent):void
   {
    var keycode_c:uint = 67;
    if (event.ctrlKey && event.keyCode == keycode_c)
    {
     // Separator used between Strings sent to clipboard
     // to separate selected cells.
     var separator:String = ",";
     // The String sent to the clipboard
     var dataString:String = "";
     // Loop over the selectedCells property.
     // Data in selectedCells is ordered so that
     // the last selected cell is at the head of the list.
     // Process the data in reverse so
     // that it appears in the correct order in the clipboard.
     var n:int = event.currentTarget.selectedCells.length;
     for (var i:int = 0; i < n; i++)
     {
      var cell:Object = event.currentTarget.selectedCells[i];
      // Get the row for the selected cell.
      var data:Object =
      event.currentTarget.dataProvider[cell.rowIndex];
      // Get the name of the field for the selected cell.
      var dataField:String =
      event.currentTarget.columns[cell.columnIndex].dataField;
      // Get the cell data using the field name.
      dataString = data[dataField] + separator + dataString;
     }
     // Remove trailing separator.
     dataString =
     dataString.substr(0, dataString.length - separator.length);
     // Write dataString to the clipboard.
     System.setClipboard(dataString);
    }
   }
  ]]>
 </mx:Script>
 <mx:AdvancedDataGrid width="100%" height="100%"
  dataProvider="{dpADG}"
  selectionMode="multipleCells"
  allowMultipleSelection="true"
  keyUp="myKeyUpHandler(event);">
  <mx:columns>
   <mx:AdvancedDataGridColumn dataField="Artist"/>
   <mx:AdvancedDataGridColumn dataField="Album"/>
   <mx:AdvancedDataGridColumn dataField="Price"/>
  </mx:columns>
 </mx:AdvancedDataGrid>
 <mx:TextArea id="myTA"/>
</mx:Application>

运行示例

分层和分组数据显示

AdvancedDataGrid支持分级和分组数据的显示，为了支持这样的显示，AdvancedDataGrid在第一列显示一个导航树以让您分级浏览数据。

分层数据（Hierarchical data）是一种以父子项目结构分层的数据，分组数据（Grouped data）是一开始就为平面的而无内在层次关系的数据。在将该数据传递给AdvancedDataGrid前，您可以指定一个或更多的数据字段将一组数据归组为同一层次。

以下文件中的代码演示分级数据示例：

//SimpleHierarchicalData.as:
 
[Bindable]
private var dpHierarchy:ArrayCollection = new ArrayCollection([
 {Region:"Southwest", children: [
  {Region:"Arizona", children: [
   {Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
   {Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},
  {Region:"Central California", children: [
   {Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},
  {Region:"Nevada", children: [
   {Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},
  {Region:"Northern California", children: [
   {Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
   {Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},
  {Region:"Southern California", children: [
   {Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
   {Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
 ]}
]);

注意该数据的顶层数据包含一个Region字段和多个第二层子对象，每个第二层子对象也包含一个Region字段和多个其他的子对象，以下示例演示AdvancedDataGrid控件对该数据的显示效果：

该示例的代码在“控制导航树”章节中。

要显示扁平数据，在将其传递给AdvancedDataGrid前您首先要对数据进行归组。以下代码包含的是前面示例中分层数据的变异版本，其将数据组织为以平面结构：

[Bindable]
private var dpFlat:ArrayCollection = new ArrayCollection([
 {Region:"Southwest", Territory:"Arizona",
  Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
 {Region:"Southwest", Territory:"Arizona",
  Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},
 {Region:"Southwest", Territory:"Central California",
  Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},
 {Region:"Southwest", Territory:"Nevada",
  Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},
 {Region:"Southwest", Territory:"Northern California",
  Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
 {Region:"Southwest", Territory:"Northern California",
  Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},
 {Region:"Southwest", Territory:"Southern California",
  Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
 {Region:"Southwest", Territory:"Southern California",
  Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
]);

在该示例中，数据只包含一个层面没有内在的层次的单独纪录,要归组该数据，您可以指定一个或更多的数据字段将该数据归组为同一层次。以下示例演示AdvancedDataGrid控件对平面数据通过Region字段进行的分组。

该示例代码在“显示分组数据“章节中