Chinaunix首页 | 论坛 | 博客
  • 博客访问: 30480330
  • 博文数量: 708
  • 博客积分: 12163
  • 博客等级: 上将
  • 技术积分: 8240
  • 用 户 组: 普通用户
  • 注册时间: 2007-12-04 20:59
文章分类

全部博文(708)

分类: 系统运维

2008-08-27 18:22:18

继续第一部分,我们继续来讲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中去。

"1.0"?>
"">

[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);
}
}
]]>

"100%" height="100%"
dataProvider="{dpADG}"
selectionMode="multipleCells"
allowMultipleSelection="true"
keyUp="myKeyUpHandler(event);">

"Artist"/>
"Album"/>
"Price"/>


TextArea id="myTA"/>

分层和分组数据显示

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字段进行的分组。

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

阅读(2829) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~