Flex 3 advancedDataGrid的使用(一)

[转载：原创保留一切权力http://hi.baidu.com/lz0830/blog/item/b17dcc3433170d325bb5f589.html]

Flex3 已经开始公测，其带来了诸多变化，所以由今天开始，我们将陆续和大家一起来学习其中的新特性，进行我们的Flex 3发现之旅。

今天我们要说的是官方文档中用了整章介绍的AdvancedDataGrid，AdvancedDataGrid是DataGrid的高级版本，Flex 3 SDK并不包含它，其和Charting Enhancements一起构成了Flex Data Visualization package，TNND，也就是说这是收费组件，ADOBE的生财机器。所以官方提供的SDK中并没有这个组件，不过FlexBuilder 3 Beta1内置的SDK包含了Flex Data Visualization package，这个我已经将FlexBuilder
3 Beta1内置的SDK剥离出来了，需要的朋友可以从这里下载。

相对DataGrid组件，AdvancedDataGrid主要有以下几个高级之处：

多列排序：按住Control键在点击某一列的表头来实现多列排序。

自定义行和列样式：通过设置行和列的styleFunction指向一个函数来样式化行列

显示分层数据：在组件的第一列显示一个可缩放的导航数来控制表格行的显示。

创建多列分组：将多列汇聚到同一列表头下。

使用单元渲染器（renderers）：跨越多栏使用同一渲染器或者一列使用多个渲染器。

多列排序

缺省的情况下，AdvancedDataGrid是按数据添加到它的DataProvider的顺序显示数据，和DataGrid组件一样，AdvancedDataGrid也允许您在数据显示后对数据进行排序。不同的是DataGrid只能基于单列排序，而AdvancedDataGrid支持基于多列的排序。

以下是多列排序的示例：

<?xml version="1.0"?>

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

<mx:Script>

< ![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

private var dpADG:ArrayCollection = new ArrayCollection([

{Artist:'Pavement', Album:'Slanted and Enchanted', Price:12.99},

{Artist:'Pavement', Album:'Brighten the Corners', Price:13.99},

{Artist:'Saner', Album:'A Child Once', Price:14.99},

{Artist:'Saner', Album:'Helium Wings', Price:12.99},

{Artist:'The Doors', Album:'The Doors', Price:10.99},

{Artist:'The Doors', Album:'Morrison Hotel', Price:12.99},

{Artist:'Grateful Dead', Album:'American Beauty', Price:11.99},

{Artist:'Grateful Dead', Album:'In the Dark', Price:17.99},

{Artist:'Grateful Dead', Album:'Shakedown Street', Price:13.99},

{Artist:'The Doors', Album:'Strange Days', Price:12.99},

{Artist:'The Doors', Album:'The Best of the Doors', Price:10.99}

]);

]]>

< /mx:Script>

<mx:AdvancedDataGrid width="100%" height="100%" dataProvider="{dpADG}">

<mx:columns>

< mx:AdvancedDataGridColumn dataField="Artist" />

< mx:AdvancedDataGridColumn dataField="Album" />

< mx:AdvancedDataGridColumn dataField="Price" />

</mx:columns>

< /mx:AdvancedDataGrid>

< /mx:Application>

运行示例

运行以上示例，如下进行排序：

点击AdvancedDataGrid组件的任意列表头对任意列进行排序，例如点击Artist列的列表头Artist列将升序进行排序，再次点击的话将按降序排序。

按住Control键，点击其他任意的列头，例如点击Price列头，将在保持Artist列降序排列的情况下，将Price列按升序排列。现在你可以从中发现某一艺术家最便宜的专辑。

再次点击Price列头，Price列将按降序排列

按住Control键，点击任意其他列，将其加入排序条件中。