加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Flex 3 AdvancedDataGrid的使用(二)

发布时间:2020-12-15 01:13:22 所属栏目:百科 来源:网络整理
导读:续第一部分,我们继续来讲AdvancedDataGrid的使用。 选择多个单元格及多行 所有基于List的控件都支持allowMultipleSelection属性。将allowMultipleSelection属性设置为True可以使得您在控件中一次选择不止一个条目。例如,DataGrid控件可以让您选择多行这样
续第一部分,我们继续来讲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,
...
{rowIndex: selectedRowIndexN,102)">}
]
singleCell 点击任意单元来选择该单元格。
在选择后,selectedCells包含一个单独对象:
[{rowIndex: selectedRowIndex,columnIndex:selectedColIndex}]
multipleCells 点击任意单元来选择该单元格。
对于非邻近单元,按下Control键时,点击任意单元格来选择多个非连续的单元格。
对于邻近单元,按下Shfit键时,点击任意单元格来选择多个连续的单元格。
选择后,每行在selectedCells保存为一个对象:
]

以下示例设置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:"";
// 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.selectedCells[i];
// Get the row for the selected cell.
var data:Object =
event.dataProvider[cell.rowIndex// Get the name of the field for the selected cell.
var dataField:String =
event.columnscolumnIndex].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: "Arizona",102)">{Territory_Rep:"Barbara Jennings",Actual:38865,Estimate:40000"Dana Binn",204)">29885,204)">30000}"Central California",0)">"Joe Smith",204)">29134,0)">"Nevada",0)">"Bethany Pittman",204)">52888,204)">45000"Northern California",0)">"Lauren Ipsum",204)">38805,0)">"T.R. Smith",204)">55498,0)">"Southern California",0)">"Alice Treu",204)">44985,0)">"Jane Grove",204)">44913,102)">);

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

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

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

private var dpFlat:ArrayCollection =   Territory_Rep:);

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

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读