Flex之DataGrid控件

DataGrid控件是一个可以展示多列数据的列表控件。它是一个格式化的数据表格，可以设置可编辑的单元格，是许多数据驱动应用的基础。

下边的几个主题介绍了关于DataGrid的几个高级应用, see:

怎么格式化单元格的数据，以及怎样控制用户的输入。see Using Item Renderers and Item Editors.
怎样拖拽对象到或出DataGrid。see Using Drag and Drop.

关于DataGrid控件
DataGrid控件可以提供以下功能：
1、可调尺寸、排序、自定义列（包括隐藏列）
2、设置自定义列和标题行（包括设置标题行文本换行）
3、在运行时用户可以resize and reorder
4、触发选中事件
5、可以在任一列使用自定义项目输出(custom item renderer)
6、支持分页
7、锁定行和列，不显示滚动条

创建一个DataGrid控件

使用标签<mx:DataGrid> 在MXML中定义一个DataGrid控件，一般来说每个控件都需要一个id.
DataGrid控件使用一个基于列表的数据对象，绑定到dataProvider属性。
你可以不使用<mx:dataProvider> 标签，因为它是DataGrid的默认属性。你还可以不使用<mx:source> 标签在<mx:ArrayCollection> 标签中，因为它是ArrayCollection 类的默认属性。
举了例子:

查看源代码

打印 ?

<?xml version="1.0"?>

<!-- dpcontrols/DataGridSimple.mxml -->

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

<mx:DataGrid>

<mx:ArrayCollection>

<mx:Object>

<mx:Artist>Pavement</mx:Artist>

<mx:Price>11.99</mx:Price>

<mx:Album>Slanted and Enchanted</mx:Album>

</mx:Object>

<mx:Object>

<mx:Artist>Pavement</mx:Artist>

<mx:Album>Brighten the Corners</mx:Album>

<mx:Price>11.99</mx:Price>

</mx:Object>

</mx:ArrayCollection>

</mx:DataGrid>

</mx:Application>

默认的，列的顺序按照属性名字的字母顺序排列。

使用mx:DataGridColumn明确有哪些列：

查看源代码

打印 ?

<?xml version="1.0"?>

<!-- dpcontrols/DataGridSpecifyColumns.mxml -->

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

<mx:DataGrid>

<mx:ArrayCollection>

<mx:Object Artist="Pavement" Price="11.99"

Album="Slanted and Enchanted" />

<mx:Object Artist="Pavement"

Album="Brighten the Corners" Price="11.99" />

</mx:ArrayCollection>

<mx:columns>

<mx:DataGridColumn dataField="Album" />

<mx:DataGridColumn dataField="Price" />

</mx:columns>

</mx:DataGrid>

</mx:Application>

在这个例子中，显示两列:Album和Price,如果我们去掉

查看源代码

打印 ?

<mx:columns>

<mx:DataGridColumn dataField="Album" />

<mx:DataGridColumn dataField="Price" />

</mx:columns>

就会显示本来的三列了。 还可以自定义列的标题：headerText

查看源代码

打印 ?

<mx:DataGridColumn dataField="Price" headerText="List Price" />

隐藏和显示列
你可能有时需要显示或隐藏某一列，可以使用列的visible属性,在这个例子中，使用一个按钮来控制列的显示。

查看源代码

打印 ?

<?xml version="1.0"?>

<!-- dpcontrols/DataGridVisibleColumn.mxml -->

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

<mx:DataGrid id="myDG" width="350">

<mx:dataProvider>

<mx:ArrayCollection>

<mx:source>

<mx:Object Artist="Pavement" Price="11.99"

Album="Slanted and Enchanted" />

<mx:Object Artist="Pavement"

Album="Brighten the Corners" Price="11.99" />

</mx:source>

</mx:ArrayCollection>

</mx:dataProvider>

<mx:columns>

<mx:DataGridColumn dataField="Artist" />

<mx:DataGridColumn dataField="Album" />

<mx:DataGridColumn id="price" dataField="Price" visible="false"/>

</mx:columns>

</mx:DataGrid>

<!-- The column id property specifies the column to show.-->

<mx:Button label="Toggle Price Column"

click="price.visible = !price.visible;" />

</mx:Application>

通过ActionScript绑定数据
数据变化时，我们不需要重新绑定

查看源代码

打印 ?

<?xml version="1.0"?>

<!-- dpcontrols/DataGridPassData.mxml -->

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

initialize="initData()">

<mx:Script>

<![CDATA[

import mx.collections.*;

private var DGArray:Array = [

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

{Artist:'Pavement', Album:'Brighten the Corners', Price:11.99}];

[Bindable]

public var initDG:ArrayCollection;

//从数组Array初始化initDG ArrayCollection.

//你可以转化HTTPService, WebService, or RemoteObject的结果为ArrayCollection.

public function initData():void {

initDG=new ArrayCollection(DGArray);

}

]]>

</mx:Script>

<mx:DataGrid id="myGrid" width="350" height="200"

dataProvider="{initDG}" >

<mx:columns>

<mx:DataGridColumn dataField="Album" />

<mx:DataGridColumn dataField="Price" />

</mx:columns>

</mx:DataGrid>

</mx:Application>

OK，还有许多内容没有涉及，慢慢来！

转载于:https://blog.51cto.com/2771253/524222