Flex开发小结（1）如何使用AdvancedDataGrid

1、AdvancedDataGrid扩展了普通DataGrid的功能，AdvancedDataGrid控件提供了另外一些特性，并在数据显示、数据聚合和数据格式化方面有着强大的控制力。

这里我主要说一下AdvancedDataGrid中数据的分层、分组显示以及导航树功能。

2、如果要配置AdvancedDataGrid显示分层数据和导航树，需要把AdvancedDataGrid数据源dataProvider属性设置为HierarchicalData类或者GroupingCollection类的实例。

数据分层显示：使用HierarchicalDatal类。

数据分组显示：使用GroupingCollection类，作为配置一个GroupingCollection类的实例的一部分，您需要指定一个或更多的字段来将平面数据组织为同一层次。

注意：您可以从任意数据创建一个HierarchicalData类或GroupingCollection类的实例来作为数据源。但是，AdvancedDataGrid控件按如下修改它为内部的数据表示：

一个数组实例在AdvancedDataGrid控件内部使用一个ArrayCollection类实例表示。
一个ArrayCollection在AdvancedDataGrid控件内部使用一个ArrayCollection类实例表示。
一个包含正确XML文本的字符串在AdvancedDataGrid控件内部使用一个XMLListCollection类实例表示。
一个XMLNode实例在AdvancedDataGrid控件内部使用一个XMLListCollection类实例表示。
一个XMLList实例在AdvancedDataGrid控件内部使用一个XMLListCollection类实例表示。
任何实现ICollectionView接口的对象在AdvancedDataGrid控件内部使用一个ICollectionView实例表示。
一个其他任意类型的对象被作为唯一的条目包裹在一个的数组示例中。

例如，如果您使用一个数组来创建HierarchicalData类的一个实例，并将该HierarchicalData实例传递给AdvancedDataGrid.dataProvider属性，然后又从AdvancedDataGrid.dataProvider属性将其读回；您读回的数据将是一个ArrayCollection实例。

3、导航树：

AdvancedDataGrid控件中可以将数据显示为树形结构，也因为该控件的第一列使用一个可缩放数来选择行的显示而被称作tree datagrid，唯一要记住的规则是该树总是显示在有列的最左边。

尽管在AdvancedDataGrid控件您可以所任意组织列而不管数据是如何组织的。并且您可以通过拖动列来对AdvancedDataGrid控件上的列进行重新定位，但是导航树总是出现在列的最左边。

数据表格的第一列通常与该控件的数据源的某一字段关联。该数据字段用于为树节点标签命名。

4、显示分层数据：

分层数据是数据被分层组织的结构化数据。要在AdvancedDataGrid控件中显示分层数据，您需要将控件的数据源设置为Hierarchica。数据源中的lData类的实例数据结构定义了AdvancedDataGrid控件对数据的如何显示。

在下面的示例中展示了AdvancedDataGrid控件的分层数据显示。

该数据的顶层数据包含一个Region字段和多个第二层子对象，每个第二层子对象也包含一个Region字段和多个其他的子对象。

该示例中的AdvancedDataGrid控件定义了四列来显示数据：Region、Territory Rep、 Actual和Estimate。

（1）使用ArrayCollection定义分层数据：使用ArrayCollection是创建分层数据的常用方式。

下面为本示例代码：

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

			   xmlns:s="library://ns.adobe.com/flex/spark"

			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

	<fx:Declarations>

		<!-- 将非可视元素（例如服务、值对象）放在此处 -->

	</fx:Declarations>

	<fx:Script>

		<![CDATA[

			import mx.collections.ArrayCollection;

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

				]}

			]);

		]]>

	</fx:Script>

	<mx:AdvancedDataGrid width="50%" height="50%">

		<mx:dataProvider>

			<mx:HierarchicalData source="{dpHierarchy}"/>

		</mx:dataProvider>

		<mx:columns>

			<mx:AdvancedDataGridColumn dataField="Region"/>

			<mx:AdvancedDataGridColumn dataField="Territory_Rep"

									   headerText="Territory Rep"/>

			<mx:AdvancedDataGridColumn dataField="Actual"/>

			<mx:AdvancedDataGridColumn dataField="Estimate"/>

		</mx:columns>

	</mx:AdvancedDataGrid>    

</s:Application>

以下图片为上述示例创建的AdvancedDataGrid控件。该控件使用文件夹图标表示数据分支节点，使用文件图标代表叶子节点。控件的第一列和数据源的Region相关联。所以标签显示的是Region字段的值。

注意：

该示例在ArrayCollection定义中使用children关键字来定义数据的层次。children关键字是HierarchicalData类用来定义层次的缺省关键字。

您也可以使用使用其他的关键字来定义层次。以下示例，其使用的是categories关键字来定义数据的层次：只需要

在指定HierarchicalData类的childrenField属性为categories即可。

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

			   xmlns:s="library://ns.adobe.com/flex/spark"

			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

	<fx:Declarations>

		<!-- 将非可视元素（例如服务、值对象）放在此处 -->

	</fx:Declarations>

	<fx:Script>

		<![CDATA[

			import mx.collections.ArrayCollection;

			[Bindable]

			private var dpHierarchy:ArrayCollection = new ArrayCollection([

				{Region:"Southwest", categories: [

					{Region:"Arizona", categories: [

						{Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},

						{Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},

					{Region:"Central California", categories: [

						{Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},

					{Region:"Nevada", categories: [

						{Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},

					{Region:"Northern California", categories: [

						{Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},

						{Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},

					{Region:"Southern California", categories: [

						{Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},

						{Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}

				]}

			]);

		]]>

	</fx:Script>

	<mx:AdvancedDataGrid width="50%" height="50%">

		<mx:dataProvider>

			<mx:HierarchicalData source="{dpHierarchy}"

								 childrenField="categories"/>

		</mx:dataProvider>

		<mx:columns>

			<mx:AdvancedDataGridColumn dataField="Region"/>

			<mx:AdvancedDataGridColumn dataField="Territory_Rep"

									   headerText="Territory Rep"/>

			<mx:AdvancedDataGridColumn dataField="Actual"/>

			<mx:AdvancedDataGridColumn dataField="Estimate"/>

		</mx:columns>

	</mx:AdvancedDataGrid>    

</s:Application>

结果如下图所示：

（2）使用XML定义分层数据

当然也可以使用XML作为AdvancedDataGrid的数据源：同样要通过实例化HierarchicalData类来进行。

如下示例：

<?xml version="1.0"?>

<!-- dpcontrols/adg/SimpleHierarchicalADGXML.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

	<mx:Script>

		<![CDATA[

			import mx.collections.HierarchicalData;

			import mx.collections.XMLListCollection;

		]]>

	</mx:Script>

	<mx:XMLList id="dpHierarchyXML" >

		<Region Region="Southwest">

			<Region Region="Arizona">

				<Territory_Rep Territory_Rep="Barbara Jennings"

							   Actual="38865" Estimate="40000"/>

				<Territory_Rep Territory_Rep="Dana Binn"

							   Actual="29885" Estimate="30000"/>

			</Region>

			<Region Region="Central California">

				<Territory_Rep Territory_Rep="Joe Smith"

							   Actual="29134" Estimate="30000"/>

			</Region>

			<Region Region="Nevada">

				<Territory_Rep Territory_Rep="Bethany Pittman"

							   Actual="52888" Estimate="45000"/>

			</Region>

			<Region Region="Northern California">

				<Territory_Rep Territory_Rep="Lauren Ipsum"

							   Actual="38805" Estimate="40000"/>

				<Territory_Rep Territory_Rep="T.R. Smith"

							   Actual="55498" Estimate="40000"/>

			</Region>

			<Region Region="Southern California">

				<Territory_Rep Territory_Rep="Alice Treu"

							   Actual="44985" Estimate="45000"/>

				<Territory_Rep Territory_Rep="Jane Grove"

							   Actual="44913" Estimate="45000"/>

			</Region>

		</Region>

	</mx:XMLList>

	<mx:AdvancedDataGrid width="50%" height="50%"

						 dataProvider="{new HierarchicalData(dpHierarchyXML)}">

		<mx:columns>

			<mx:AdvancedDataGridColumn dataField="@Region"

									   headerText="Region"/>

			<mx:AdvancedDataGridColumn dataField="@Territory_Rep"

									   headerText="Territory Rep"/>

			<mx:AdvancedDataGridColumn dataField="@Actual"

									   headerText="Actual"/>

			<mx:AdvancedDataGridColumn dataField="@Estimate"

									   headerText="Estimate"/>

		</mx:columns>

	</mx:AdvancedDataGrid>

</mx:Application>

结果如下图：

5、显示分组数据：

要想显示分组数据，必须传递给AdvancedDataGrid控件的dataprovider属性以GroupingCollection类的实例，如下：

<mx:dataProvider>

			<mx:GroupingCollection id="gc" source="{dpFlat}">

				<mx:grouping>

					<mx:Grouping>

						<mx:GroupingField name="Region"/>

						<mx:GroupingField name="Territory"/>

					</mx:Grouping>

				</mx:grouping>

			</mx:GroupingCollection>

		</mx:dataProvider>

GroupingCollection的source属性必须为前面定义的数据源，同时使用GroupingField指定分组字段，可以指定一个或者多个分组字段。

注意：必须在AdvancedDataGrid控件的initialize方法中调用GroupingCollection类的refresh方法。

如下示例：

<?xml version="1.0"?>

<!-- dpcontrols/adg/SimpleHierarchicalADGXML.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

	<mx:Script>

		<![CDATA[

			import mx.collections.ArrayCollection;

			import mx.collections.HierarchicalData;

			import mx.collections.XMLListCollection;

			[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}

			]);

		]]>

	</mx:Script>

	<mx:AdvancedDataGrid id="myADG"

						 width="100%" height="100%"

						 initialize="gc.refresh();">

		<mx:dataProvider>

			<mx:GroupingCollection id="gc" source="{dpFlat}">

				<mx:grouping>

					<mx:Grouping>

						<mx:GroupingField name="Region"/>

						<mx:GroupingField name="Territory"/>

					</mx:Grouping>

				</mx:grouping>

			</mx:GroupingCollection>

		</mx:dataProvider>        

		<mx:columns>

			<mx:AdvancedDataGridColumn dataField="Region"/>

			<mx:AdvancedDataGridColumn dataField="Territory"/>

			<mx:AdvancedDataGridColumn dataField="Territory_Rep"

									   headerText="Territory Rep"/>

			<mx:AdvancedDataGridColumn dataField="Actual"/>

			<mx:AdvancedDataGridColumn dataField="Estimate"/>

		</mx:columns>

	</mx:AdvancedDataGrid>

</mx:Application>

示例结果如下图：

6、设置导航树图标和标签

导航树可以让您控制分支和叶子节点的图标和标签。您可显示一个有标签无图标的树、一个只有分支图标的树、一个所有都没有标签的树或者一个不与任何数据字段相关的自由列数。

以下表描述了AdvancedDataGrid控件用于设置树图标的样式属性：

样式属性描述：

defaultLeafIcon指定叶子节点图标

disclosureClosedIcon指定显示在封闭的分支节点前面的图标，缺省是一个黑三角形。

disclosureOpenIcon指定显示在展开的分支节点前面的图标，缺省是一个黑三角形。

folderClosedIcon为分支节点指定一个文件夹关闭图标

folderOpenIcon为分支节点指定一个文件夹打开图标

Flex开发小结（1）如何使用AdvancedDataGrid的更多相关文章

基于ArcGIS Viewer for Flex开发的一款跨平台的应用程序
特点: 1.基于ArcGIS Viewer for Flex开发的一款跨平台的应用程序: -(IBAction) showTOC:(id)sender { if (_tocViewController ...
Eclipse配置Flex开发环境（转）
Eclipse配置Flex开发环境开发环境:Eclipse3.2.Flex Builder31.下载安装Flex Builder3,下载地址:http://subject.csdn.net/adob ...
flex开发小技巧集锦
关于flex开发网上有非常多的相关信息介绍,因此我们要想学习关于flex开发的知识信息技能是一件非常简单和方便的事情.而针对于flex开发小编要告诉大家的是一些flex开发小技巧.利用这些小技巧能够有 ...
vue开发小结(下)
前言继前几天总结了vue开发小结(上)后,发现还有很多的点没有能列举出来,于是还是打算新建一个下篇,再补充一些vue开发中需要注意的细节,确实还是都是细节的问题,我只是在这里强调下,希望对大家有帮助 ...
arcgis api for flex 开发入门（一）环境搭建
http://www.cnblogs.com/wenjl520/archive/2009/06/02/1494514.html arcgis api for flex 开发入门(一)环境搭建arcgi ...
pdfjs viewer 开发小结
此文已由作者吴家联授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 1. pdfjs库简介 PDF.js 是由Mozilla 主导推出的可以将PDF文件转换为H5页面进行展示的 ...
Android 即时通讯开发小结（二）
<Android 即时通讯开发小结>基于IM Andriod 开发的各种常见问题,结合网易云信即时通讯技术的实践,对IM 开发做一个全面的总结. 相关推荐阅读:. Android 即时通讯 ...
Android 即时通讯开发小结（一）
<Android 即时通讯开发小结>基于IM Andriod 开发的各种常见问题,结合网易云信即时通讯技术的实践,对IM 开发做一个全面的总结. 相关推荐阅读:. Android 即时通讯 ...
5Spring动态代理开发小结
5Spring动态代理开发小结 1.为什么要有动态代理? 好处 1.利于程序维护 2.利于原始类功能的增强 3.得益于JDK或者CGlib等动态代理技术使得程序扩展性很强为什么说使得程序扩展性很强? ...

随机推荐

基于u-boot源码的简单shell软件实现
一.概述 1.shell概念 Shell(命令解析器),它用于接收用户输入的命令,进行解析,然后调用相应的应用程序,为使用者提供了使用软件的界面. shell是操作系统最外面的一层.shell管理你与 ...
CocoaPods简单使用
CocoaPods的原理 CocoaPods的原理是将所有的依赖库都放到另一个名为Pods的项目中,然后让主项目依赖Pods项目,这样,源码管理工作都从主项目移到了Pods项目中.Pods项目最终会编 ...
android SurfaceView绘制重新学习--切图clipRect详解
解释都在代码注释中: public class SampleView extends View { private Paint mPaint; private Path mPath; public S ...
C++默认参数值函数
1.默认参数值的函数 C++语言允许在定义函数时给其中或某些形式参数(形参)指定默认值,方法就是在相应的形参后面写上“=默认值”,如果省略了对应位置上的实参的值,则在执行被调函数时以该形参的默认值进行 ...
MySQL安装(以程序的方式启动)zip版
电脑环境 win10 64位企业版 1.解压zip文件到某路径下. 2.复制目录下的my-default.ini 改名字(my.ini) 3.打开my.ini [mysqld]下面加上charact ...
【转】.Net程序员玩转Android系列之三~快速上手
原文:http://www.cnblogs.com/HouZhiHouJueBlogs/p/3962122.html 快速环境搭建和Hello World 第一步:JAVA SDK(JDK)的安装: ...
【2011 Greater New York Regional 】Problem B The Rascal Triangle
一个简单的规律题,每一列都是一个等差数列: 代码: #include<cstdio> #define ll long long using namespace std; int main( ...
centos网络安装中的注意点
转自centos网络安装中的注意点 centos网络安装的教程网上很多,这里仅仅记录一下安装过程中网上别处提及很少的注意点. 1.centos默认会安装selinux,并且默认阻止ftp服务,所以要禁 ...
用PYTHON + PYWIN32 + WMI获取WINDOWS系统基本信息
网上原码,去了DECODE编码的问题. PyScripter这个PYTHON的IDE工具在WIN下表现不错哟. 感觉比SPYDER,ERIC,SUBLEME TEXT3之类的好用呀.. #!/usr/ ...
[wikioi]最优布线问题
http://wikioi.com/problem/1231/ Kruskal+并查集.comp函数里面如果用const引用的话,可以减少copy.并查集find的时候是递归找父亲的根.无他. #in ...

Flex开发小结（1）如何使用AdvancedDataGrid

Flex开发小结（1）如何使用AdvancedDataGrid的更多相关文章

随机推荐

热门专题