Flex 3 AdvancedDataGrid的使用(二)
2009-09-26 16:08
495 查看
续第一部分,我们继续来讲AdvancedDataGrid的使用。
选择多个单元格及多行
所有基于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属性的值,如下表所示:
以下示例设置selectionMode属性为multipleCells使得您可以选择表格中的多个单元。该应用使用KeyUp事件处理器来识别Control-C组合键,如果监听到,将选择的多个单元格从AdvancedDataGrid控件复制到系统剪贴板中。
在拷贝单元格后,您可以将这些单元格粘贴到Flex应用的其他位置中,或者将它们粘贴到其他应用如微软Excel。您可以将它们粘贴到应用底部的TextArea中去。
运行示例
![](http://blog.eshangrao.com/images/flex/moxie/mulSel.jpg)
分层和分组数据显示
AdvancedDataGrid支持分级和分组数据的显示,为了支持这样的显示,AdvancedDataGrid在第一列显示一个导航树以让您分级浏览数据。
分层数据(Hierarchical data)是一种以父子项目结构分层的数据,分组数据(Grouped data)是一开始就为平面的而无内在层次关系的数据。在将该数据传递给AdvancedDataGrid前,您可以指定一个或更多的数据字段将一组数据归组为同一层次。
以下文件中的代码演示分级数据示例:
注意该数据的顶层数据包含一个Region字段和多个第二层子对象,每个第二层子对象也包含一个Region字段和多个其他的子对象,以下示例演示AdvancedDataGrid控件对该数据的显示效果:
![](http://blog.eshangrao.com/images/flex/moxie/simpleHierarchicalADG.jpg)
该示例的代码在“控制导航树”章节中。
要显示扁平数据,在将其传递给AdvancedDataGrid前您首先要对数据进行归组。以下代码包含的是前面示例中分层数据的变异版本,其将数据组织为以平面结构:
在该示例中,数据只包含一个层面没有内在的层次的单独纪录,要归组该数据,您可以指定一个或更多的数据字段将该数据归组为同一层次。以下示例演示AdvancedDataGrid控件对平面数据通过Region字段进行的分组。
![](http://blog.eshangrao.com/images/flex/moxie/SimpleGroupADGMXML.jpg)
该示例代码在“显示分组数据“章节中
选择多个单元格及多行
所有基于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属性的值,如下表所示:
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} ] |
在拷贝单元格后,您可以将这些单元格粘贴到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>
运行示例
![](http://blog.eshangrao.com/images/flex/moxie/mulSel.jpg)
分层和分组数据显示
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控件对该数据的显示效果:
![](http://blog.eshangrao.com/images/flex/moxie/simpleHierarchicalADG.jpg)
该示例的代码在“控制导航树”章节中。
要显示扁平数据,在将其传递给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字段进行的分组。
![](http://blog.eshangrao.com/images/flex/moxie/SimpleGroupADGMXML.jpg)
该示例代码在“显示分组数据“章节中
相关文章推荐
- flex 使用AdvancedDataGrid进行表头列合并,设置每列背景颜色(2)
- Flex 3 发现之旅:AdvancedDataGrid的使用(第三部分)续2
- Flex 3 AdvancedDataGrid的使用(六)
- Flex4 AdvancedDataGrid 控件的介绍和使用
- Flex 3 AdvancedDataGrid的使用(四)
- Flex 3 AdvancedDataGrid的使用(六)
- Flex 3 发现之旅:AdvancedDataGrid的使用
- Flex 3 发现之旅:AdvancedDataGrid的使用(第二部分)
- Flex 3 发现之旅:AdvancedDataGrid的使用(第二部分)续1
- Flex 3 AdvancedDataGrid的使用(七)
- Flex 3 体验:AdvancedDataGrid的使用(第二部分)
- flex AdvancedDataGrid的使用
- Flex 3 AdvancedDataGrid的使用(七)
- Flex 3 发现之旅:AdvancedDataGrid的使用(第一部分)
- Flex 3 发现之旅:AdvancedDataGrid的使用(第二部分)续2
- Flex 3 advancedDataGrid的使用(一)
- Flex 3 AdvancedDataGrid的使用(八)
- flex AdvancedDataGrid使用心得
- Flex开发小结(1)如何使用AdvancedDataGrid
- Flex 3 AdvancedDataGrid的使用(五)