Flex DataGrid 控件知识汇总，创建、全选、删除、分页、样式

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 类的默认属性。
举了例子:

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>
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}];
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>
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>

复制代码

再把版主的例子搬出来
介绍如何在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