Flex中如何通过columns属性动态的增加DataGrid的一个列的例子

By Minidxer | April 29, 2009

接下来的例子演示了Flex中如何通过columns属性，动态的增加DataGrid的一个列。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.controls.dataGridClasses.DataGridColumn;
  10.  
  11.             private function addDataGridColumn(dataField:String):void {
  12.                 var dgc:DataGridColumn = new DataGridColumn(dataField);
  13.                 var cols:Array = dataGrid.columns;
  14.                 cols.push(dgc);
  15.                 dataGrid.columns = cols;
  16.             }
  17.  
  18.             private function init():void {
  19.                 addDataGridColumn("col4");
  20.             }
  21.         ]]>
  22.     </mx:Script>
  23.  
  24.     <mx:ArrayCollection id="arrColl">
  25.         <mx:source>
  26.             <mx:Array>
  27.                 <mx:Object col1="A.1" col2="A.2" col3="A.3" col4="A.4"/>
  28.                 <mx:Object col1="B.1" col2="B.2" col3="B.3" col4="B.4"/>
  29.                 <mx:Object col1="C.1" col2="C.2" col3="C.3" col4="C.4"/>
  30.                 <mx:Object col1="D.1" col2="D.2" col3="D.3" col4="D.4"/>
  31.                 <mx:Object col1="E.1" col2="E.2" col3="E.3" col4="E.4"/>
  32.                 <mx:Object col1="F.1" col2="F.2" col3="F.3" col4="F.4"/>
  33.             </mx:Array>
  34.         </mx:source>
  35.     </mx:ArrayCollection>
  36.  
  37.     <mx:ApplicationControlBar dock="true">
  38.         <mx:Button label="Add column" click="init();" />
  39.     </mx:ApplicationControlBar>
  40.  
  41.     <mx:DataGrid id="dataGrid"
  42.             dataProvider="{arrColl}"
  43.             width="400"
  44.             rowCount="6">
  45.         <mx:columns>
  46.             <mx:DataGridColumn dataField="col1" />
  47.             <mx:DataGridColumn dataField="col2" />
  48.             <mx:DataGridColumn dataField="col3" />
  49.         </mx:columns>
  50.     </mx:DataGrid>
  51.  
  52. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: DataGrid | 2 Comments » | Tags: ,

你可能还对下列文章感兴趣:

2 comments | Add One

  1. sweetbai - 04/29/2009 at 3:24 pm

    您的代码编辑插件是什么插件？眼上去很清楚。
    能告诉我吗？如可以发邮件给我吧。多谢了

  2. Minidxer - 04/30/2009 at 12:59 pm

    CoolCode
    CSS需要自己稍作修改

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll