Flex之DataGrid控件[转]

http://blog.bossma.cn/archives/2008/08/128

大部分翻译自官方帮助文档。
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控件

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

1. <?xml version="1.0"?>
2. <!-- dpcontrols/DataGridSimple.mxml -->
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
4.    <mx:DataGrid>
5.       <mx:ArrayCollection>
6.          <mx:Object>
7.             <mx:Artist>Pavement</mx:Artist>
8.             <mx:Price>11.99</mx:Price>
9.             <mx:Album>Slanted and Enchanted</mx:Album>
10.          </mx:Object>
11.          <mx:Object>
12.             <mx:Artist>Pavement</mx:Artist>
13.             <mx:Album>Brighten the Corners</mx:Album>
14.             <mx:Price>11.99</mx:Price>
15.          </mx:Object>
16.       </mx:ArrayCollection>
17.    </mx:DataGrid>
18. </mx:Application>

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

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

1. <?xml version="1.0"?>
2. <!-- dpcontrols/DataGridSpecifyColumns.mxml -->
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
4.    <mx:DataGrid>
5.       <mx:ArrayCollection>
6.          <mx:Object Artist="Pavement" Price="11.99"
7.             Album="Slanted and Enchanted" />
8.          <mx:Object Artist="Pavement"
9.             Album="Brighten the Corners" Price="11.99" />
10.       </mx:ArrayCollection>
11.       <mx:columns>
12.          <mx:DataGridColumn dataField="Album" />
13.          <mx:DataGridColumn dataField="Price" />
14.       </mx:columns>
15.    </mx:DataGrid>
16. </mx:Application>

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

1. <mx:columns>
2. <mx:DataGridColumn dataField="Album" />
3. <mx:DataGridColumn dataField="Price" />
4. </mx:columns>

就会显示本来的三列了。

还可以自定义列的标题：headerText

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

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

1. <?xml version="1.0"?>
2. <!-- dpcontrols/DataGridVisibleColumn.mxml -->
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
4.    <mx:DataGrid id="myDG" width="350">
5.       <mx:dataProvider>
6.          <mx:ArrayCollection>
7.             <mx:source>
8.                <mx:Object Artist="Pavement" Price="11.99"
9.                   Album="Slanted and Enchanted" />
10.                <mx:Object Artist="Pavement"
11.                   Album="Brighten the Corners" Price="11.99" />
12.             </mx:source>
13.          </mx:ArrayCollection>
14.       </mx:dataProvider>
15.       <mx:columns>
16.          <mx:DataGridColumn dataField="Artist" />
17.          <mx:DataGridColumn dataField="Album" />
18.          <mx:DataGridColumn id="price" dataField="Price" visible="false"/>
19.       </mx:columns>
20.    </mx:DataGrid>
21.  
22.    <!-- The column id property specifies the column to show.-->
23.    <mx:Button label="Toggle Price Column"
24.       click="price.visible = !price.visible;" />
25. </mx:Application>

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

1. <?xml version="1.0"?>
2. <!-- dpcontrols/DataGridPassData.mxml -->
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
4.    initialize="initData()">
5.    <mx:Script>
6.    <![CDATA[
7.       import mx.collections.*;
8.       private var DGArray:Array = [
9.          {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
10.          {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99}];
11.         
12.       [Bindable]
13.       public var initDG:ArrayCollection;
14.       //从数组Array初始化initDG ArrayCollection.
15.       //你可以转化HTTPService, WebService, or RemoteObject的结果为ArrayCollection.
16.       public function initData():void {
17.          initDG=new ArrayCollection(DGArray);
18.       }
19.    ]]>
20.    </mx:Script>
21.  
22.    <mx:DataGrid id="myGrid" width="350" height="200"
23.       dataProvider="{initDG}" >
24.       <mx:columns>
25.          <mx:DataGridColumn dataField="Album" />
26.          <mx:DataGridColumn dataField="Price" />
27.       </mx:columns>
28.    </mx:DataGrid>
29. </mx:Application>

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