在Flex中建立DataGrid的方法

  • 本站文章除注明转载外,均为本站原创或者翻译。
  • 本站文章欢迎各种形式的转载,但请18岁以上的转载者注明文章出处,尊重我的劳动,也尊重你的智商;
  • 本站部分原创和翻译文章提供markdown格式源码,欢迎使用文章源码进行转载;
  • 本博客采用 WPCMD 维护;
  • 本文标题:在Flex中建立DataGrid的方法
  • 本文链接:http://zengrong.net/post/321.htm

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

1.最简单的方法

<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标签的属性来设置行和列,就像下面这样:

<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.最复杂的方法

<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的写法

            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的定义。

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

效果就是这样:

4.控制列的显示

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

<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;"/>

查看效果: