AdvancedDataGrid使用:设置分层数据的数据源

设置分层数据的数据源

要配置AdvancedDataGrid显示分级数据和导航树,您传递给dataProvider属性以HierarchicalData类或者GroupingCollection类的实例,当您的数据以层次组织时使用HierarchicalData类。更多信息请查看“显示分层数据”。

当您的数据以平面结构组织时使用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实例。

控制导航树

AdvancedDataGrid控件有时候因为该控件的第一列使用一个可缩放数来选择行的显示而被称作tree datagrid,唯一要记住的规则是该树总是显示在所有列的最左边。尽管在AdvancedDataGrid控件您可以任意组织列而不管数据是如何组织的。并且您可以通过拖动列来对AdvancedDataGrid控件上的列进行重新定位,但是导航树总是出现在列的最左边。

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

在以下示例中,想您展示了“分层和分组数据显示”章节提到的AdvancedDataGrid控件分层结构数据的显示。该数据的顶层数据包含一个Region字段和多个第二层子对象,每个第二层子对象也包含一个Region字段和多个其他的子对象。

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   include "SimpleHierarchicalData.as";
  ]]>
 </mx:Script>
 <mx:AdvancedDataGrid width="100%" height="100%">
  <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>
</mx:Application>


运行示例

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

注意树的叶子图标没有显示标签。这是因为每个territory都没包含Region字段。下一章我们将描述怎样控制导航树的图标显示。

设置导航树图标和标签

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

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

样式属性 描述
defaultLeafIcon 指定叶子节点图标
disclosureClosedIcon 指定显示在封闭的分支节点前面的图标,缺省是一个黑三角形。
disclosureOpenIcon 指定显示在展开的分支节点前面的图标,缺省是一个黑三角形。
folderClosedIcon 为分支节点指定一个文件夹关闭图标
folderOpenIcon 为分支节点指定一个文件夹打开图标

以下示例设置缺省叶子图标为null以隐藏它,并且使用自定义的文件夹打开和关闭图标:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   include "SimpleHierarchicalData.as";
  ]]>
 </mx:Script>
 <mx:AdvancedDataGrid width="100%" height="100%"
  defaultLeafIcon="{null}"
  folderOpenIcon="@Embed(source='assets/folderOpenIcon.jpg')"
  folderClosedIcon="@Embed(source='assets/folderClosedIcon.jpg')">
  <mx:dataProvider>
   <mx:HierarchicalData source="{myHCollAC}"/>
  </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>
</mx:Application>


您也可以使用setStyle()方法和<mx:Style>标签指定样式。如下所示:

<mx:Style>
  AdvancedDataGrid {
    defaultLeafIcon:ClassReference(null);
    folderOpenIcon:Embed(source='assets/folderOpenIcon.jpg');
    folderClosedIcon:Embed(source='assets/folderClosedIcon.jpg');
  }
</mx:Style>


为导航树创建单独的列

在“分层和分组数据显示”章节的示例中,第一列同时显示数据的Region字段值。因此,当年展开导航树节点时,每个树节点标签与对应数据行中的Region字段值一致。对于树的叶子节点,数据源没有包含Region字段值。所有叶子节点标签为空。

您可以将导航树独自放置在单独的列中,该列不和任意数据字段对应。如下所示:

该示例没有任何数据字段与将包含数列对应,所有树图标显示为无标签。该示例同时设置folderClosedIcon、folderOpenIcon、和defaultLeafIcon属性为null,但是disclosure图标被显示以使得用户可以打开或关闭树节点。

以下代码实现该示例:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   include "SimpleHierarchicalData.as";
  ]]>
 </mx:Script>
 <mx:AdvancedDataGrid width="100%" height="100%"
  folderClosedIcon="{null}"
  folderOpenIcon="{null}"
  defaultLeafIcon="{null}">
  <mx:dataProvider>
   <mx:HierarchicalData source="{dpHierarchy}"/>
  </mx:dataProvider>
  <mx:columns>
   <mx:AdvancedDataGridColumn headerText="" width="50"/>
   <mx:AdvancedDataGridColumn dataField="Region"/>
   <mx:AdvancedDataGridColumn dataField="Territory_Rep"
    headerText="Territory Rep"/>
   <mx:AdvancedDataGridColumn dataField="Actual"/>
   <mx:AdvancedDataGridColumn dataField="Estimate"/>
  </mx:columns>
 </mx:AdvancedDataGrid>
</mx:Application>


显示分层数据

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

使用ArrayCollection定义分层数据

正如下面示例中SimpleHierarchicalData.as文件显示的,使用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}]}
 ]}
]);


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

您也可以使用使用其他的关键字来定义层次。以下示例显示HierarchicalDataCategories.as文件内容,其使用的是categories关键字:

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


如下所示,使用HierarchicalData.childrenField属性来指定定义层级的字段名:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   include "HierarchicalDataCategories.as";
  ]]>
 </mx:Script>
 <mx:AdvancedDataGrid width="100%" height="100%">
  <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>
</mx:Application>


运行示例

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页