看了一下Flex builder 2的帮助文件,原来建立DataGrid的方法非常灵活,大致有下面几种:

1.最简单的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<mx:DataGrid>
<mx:ArrayCollection>
<mx:Object>
<mx:姓名>zrong</mx:姓名>
<mx:邮箱>zrongzrong@gmail.com</mx:邮箱>
<mx:主页>www.zengrong.net</mx:主页>
</mx:Object>
<mx:Object>
<mx:姓名>orphen</mx:姓名>
<mx:邮箱>orphen123@gmail.com</mx:邮箱>
<mx:主页>www.orphen123.net</mx:主页>
</mx:Object>
</mx:ArrayCollection>
</mx:DataGrid>

在ArrayCollection中定义Object标签来实现数据的添加。每个Object标签代表一行,而Object中的每个子标签代表一列。

同样的,也可以使用Object标签的属性来设置行和列,就像下面这样:

1
2
3
4
5
6
<mx:DataGrid>
<mx:ArrayCollection>
<mx:Object 姓名="zrong" 邮箱="zrongzrong@gmail.com" 主页="www.zengrong.net"/>
<mx:Object 姓名="orphen" 邮箱="orphen123@gmail.com" 主页="www.orphen123.net"/>
</mx:ArrayCollection>
</mx:DataGrid>

至于两者的效果,自然是一样的。

1.最简单的方法

实际上,上面的两种写法都省略了两个标签:source和dataProvider。由于dataProvider是dataGrid的默认属性,因此在这里可以省略。同样的,由于source是ArrayCollection的默认属性,在这里也被省略掉了。如果加上这两个标签,就算是最复杂(但最完整)的写法了:

2.最复杂的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<mx:DataGrid>
<mx:dataProvider>
<mx:ArrayCollection>
<mx:source>
<mx:Object>
<mx:姓名>zrong</mx:姓名>
<mx:邮箱>zrongzrong@gmail.com</mx:邮箱>
<mx:主页>www.zengrong.net</mx:主页>
</mx:Object>
<mx:Object>
<mx:姓名>orphen</mx:姓名>
<mx:邮箱>orphen123@gmail.com</mx:邮箱>
<mx:主页>www.orphen123.net</mx:主页>
</mx:Object>
</mx:source>
</mx:ArrayCollection>
</mx:dataProvider>
</mx:DataGrid>
</pre>
<h3>3.使用ActionScript的写法</h3>
<pre lang="actionscript">
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" fontSize="12"
initialize="init();">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var DGArray:Array =[
{name:"zrong", email:"zrongzrong@gmamil.com", site:"www.zengrong.net"},
{name:"orphen", email:"orphen123@gmail.com", site:"www.orphen123.com"}];
[Bindable]
public var initDG:ArrayCollection;
public function init():void{
initDG = new ArrayCollection(DGArray);
}
]]>
</mx:Script>
<mx:DataGrid dataProvider="{initDG}"/>
</mx:Application>

3.使用ActionScript的写法

1
2
3
4
5
6
7
8
9
10
11
12
import mx.collections.ArrayCollection;
private var DGArray:Array =[
{name:"zrong", email:"zrongzrong@gmamil.com", site:"www.zengrong.net"},
{name:"orphen", email:"orphen123@gmail.com", site:"www.orphen123.com"}];
[Bindable]
public var initDG:ArrayCollection;
public function init():void{
initDG = new ArrayCollection(DGArray);
}

个人认为,这种方法上面两种要更加简单灵活一些。这个方法实现的关键是把Array转换成ArrayCollection类型。

4.控制列的显示

我们定义的数据一共有三列,在DataGrid中默认是全部显示的。要控制某列不显示,可以使用columns标签和DataGridColumn标签。在下面这个例子中,数据沿用上例。仅改变DataGrid的定义。

1
2
3
4
5
6
<mx:DataGrid dataProvider="{initDG}">
<mx:columns>
<mx:DataGridColumn headerText="姓名" dataField="name"/>
<mx:DataGridColumn headerText="邮箱" dataField="email" width="200"/>
</mx:columns>
</mx:DataGrid>

效果就是这样:

4.控制列的显示

当然,还可以为每一列定义id,从而互动性的控制某列的显示:

1
2
3
4
5
6
7
8
<mx:DataGrid dataProvider="{initDG}">
<mx:columns>
<mx:DataGridColumn headerText="姓名" dataField="name"/>
<mx:DataGridColumn headerText="邮箱" dataField="email" width="200"/>
<mx:DataGridColumn id="site" headerText="主页" dataField="site" width="150" visible="false"/>
</mx:columns>
</mx:DataGrid>
<mx:Button label="显示/隐藏{site.headerText}列" click="site.visible=!site.visible;"/>

查看效果:

您的浏览器不支持JavaScript,或者您禁用了JavaScript。

请启用浏览器的JavaScript支持。

如果您确认启用了JavaScript,请使用下面的链接升级Flash Player到最新版本:

安装最新的Flash Player插件

留言

2007-02-21
次访问