波斯马BOSSMA Information Technology

大部分翻译自官方帮助文档。
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，还有许多内容没有涉及，慢慢来！

关键字: DataGrid Flex