Flex DataGrid 控件知识汇总，创建、全选、删除、分页、样式-优快云博客

本文详细介绍了 Flex 中 DataGrid 控件的使用方法，包括创建控件、自定义列及标题、显示与隐藏列等功能，并提供了通过 ActionScript 绑定数据的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

下边的几个主题介绍了关于DataGrid的几个高级应用，怎么格式化单元格的数据，以及怎样控制用户的输入。

关于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"?>
<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"?>
<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"?>
<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>
<mx:Button label="Toggle Price Column"
click="price.visible = !price.visible;" />
</mx:Application>

复制代码

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

<?xml version="1.0"?>
<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>

复制代码

再把版主的例子搬出来
介绍如何在Flex DataGrid 删除和 Flex DataGrid 全选数据。

1. 点击check box选中item，或点击全选，选中所有项。
2. 点击删除选中项，选中项的 status将变成 Deleted.

内容详见这里： http://bbs.airia.cn/thread-3067-1-1.html

FLEX DataGrid分页

分页显示数据是网站浏览中必备的元素之一，在FLEX中通过数据分页的方法来获取当前显示数据，即能降低网络传的负担同时也能减少Flex的处理工作。

分页控件需要的功能有：首页，上一页，下一页，未页和页数跳转等。

内容详见这里：http://lib.airia.cn/2010/1119/1053.html

通过FLEX CSS的方式定义Flex DataGrid 滚动条的样式
http://bbs.airia.cn/forum-viewthread-tid-6451-page-1-authorid-6103.html