Flex2 ：动态创建DataGrid列

动态添加 DataGrid 的列
大家都知道在Flex中基本上每一个MXML 标签都对应着一个AS类。所以你既可以用MXML声明组件，也可以使用ActionScript创建，而后一种方法尤为灵活。今天我就遇到了一个需要动态创建DataGrid的程序，经过数次实验之后，终于成功。

1.首先，需要动态创建一个DataGrid。
程序代码
var dg:DataGrid = new DataGrid();
dg.id = “myDG”; // 设定id
dg.width = 400; // 设定宽度
………… // 其它属性
这些写好之后要将其添加到程序的 DisplayList中，这里假设我有一个 id 为 “vb” 的 VBOX 容器，可以这么写：
程序代码
vb.addChild(dg);
写完这些先看看效果吧：
效果如图所示，就这么一个类似面板的东西，里面没有我们通常见到的列表。为什么呢？因为你创建 DataGrid 的时候那些列不是自带的，而是需要另外创建的。那些列是 mx.controls.dataGridClasses.DataGridColumn 的实例，需要另外创建。接下来我们就来创建
2. 创建DataGridColumn。
一般来说，你需要几列就创建几个DataGridColumn。比如：
程序代码
var column1:DataGridColumn = new DataGridColumn();
column1.headerText = “column1″;
……………… // 其它属性的设定
var column2:DataGridColumn = new DataGridColumn();
column2.headerText = “column2″;
……………… // 其它属性的设定
3.将创建的DataGridColumn添加到DataGrid中。
DataGrid有一个属性columns，是一个数组，它包含了DataGrid中所有column实例。
我直接这样添加列：
程序代码
dg.columns.concat(column1);
dg.columns.concat(column2);
然后运行，发现运行结果和没有添加一样！！ 怎么会这样呢？语法没有错误啊。再仔细看了帮助中关于DataGrid 的 columns属性介绍，发现这么一段话：
引用内容
If you want to change the set of columns, you must get this array, make modifications to the columns and order of columns in the array, and then assign the new array to the columns property. This is because the DataGrid control returned a new copy of the array of columns and therefore did not notice the changes.
原来你引用这个columns属性的时候并不是引用它本身，而是获得了它的一个新的拷贝，之后你做的所有操作都是在这个拷贝上做得，自然无法影响原来的属性值。改写一下刚才的代码：
程序代码
dg.columns = dg.columns.concat(column1);
dg.columns = dg.columns.concat(column2);
本文来源于 冰山上的播客 , 原文地址：/index.php/archives/1626

 

Flex2中，DataGrid如果我们没有指定columns熟悉的话，DataGrid会自动根据dataProvider的各行数据的属性名隐式自动地创建列，例如如下代码：

  layout="vertical" creationComplete="loadDgView()">
 
        [Bindable]
     public var works:Array= [
         { id: 1, name: ’feiy’, sex: ’male’},
         { id: 2, name: ’wenj’, sex: ’fmale’}];
     private var worksColumns:Array= [
       { columnName: "id",headerText: "work’s id",width: 100},
       { columnName: "name",headerText: "work’s name",width: 200},
       { columnName: "sex",headerText: "work’s sex",width: 100}];
     [Bindable]
     public var departments:Array=[
       { id: 1, name: ’tech dept.’},
       { id: 2, name: ’service dept.’}];
     private var departmentsColumns:Array= [
       { columnName: "id",headerText: "department’s id",width: 200},
       { columnName: "name",headerText: "department’s name",width:200}];
     private function loadDgView(){
       if(type_cb.selectedIndex==0){          
         view_dg.dataProvider=works;
       }else{
         view_dg.dataProvider=departments;
       }
     }
   ]]>
 
    
   
     
       
         
         
       
     
       
 
 

　　查看示例

　　当我们选择works时，DataGrid自动根据dataProvider：works数组中的数据生成三列的DataGridColumn；而选择departments时，又相应的变更为两列，非常的方便。
DataGrid组件的这一功能是Flex1.5中所不具有的，是Flex2中的一大改进。
但是如果我们DataGrid的表头与列名不一致的时候，或者我们并不需要显示每行所有的数据，这时候DataGrid的隐式自动创建列的方法就不再适用了，这时候，我们就需要自己手动来创建列。
DataGrid使用columns属性来标识列信息，column属性是一个mx.controls.gridclasses.DataGridColumn数组，所以要动态创建表格列，只需要创建一个DataGridColumn数组，然后将其赋值给DataGrid的columns属性就可以了。前面示例的代码，我们改进如下：

  layout="vertical" creationComplete="loadDgView()">
 
        import mx.controls.gridclasses.DataGridColumn;
     
     [Bindable]
     public var works:Array= [
         { id: 1, name: ’feiy’, sex: ’male’},
         { id: 2, name: ’wenj’, sex: ’fmale’}];
     private var worksColumns:Array= [
       { columnName: "id",headerText: "work’s id",width: 100},
       { columnName: "name",headerText: "work’s name",width: 200},
       { columnName: "sex",headerText: "work’s sex",width: 100}];
     [Bindable]
     public var departments:Array=[
       { id: 1, name: ’tech dept.’},
       { id: 2, name: ’service dept.’}];
     private var departmentsColumns:Array= [
       { columnName: "id",headerText: "department’s id",width: 200},
       { columnName: "name",headerText: "department’s name",width:200}];
     private function loadDgView(){
       if(type_cb.selectedIndex==0){
         var columns:Array=new Array();
         for(var i:int;i           var item:Object=worksColumns[i];
           var dgColumn:DataGridColumn=new DataGridColumn();
           dgColumn.columnName=item.columnName;
           dgColumn.headerText=item.headerText;
           dgColumn.width=item.width;
           columns.push(dgColumn);
         }
         view_dg.columns=columns;
         view_dg.dataProvider=works;
       }else{ 
      var columns:Array=new Array();
         for(var i:int;i           var item:Object=departmentsColumns[i];
           var dgColumn:DataGridColumn=new DataGridColumn();
           dgColumn.columnName=item.columnName;
           dgColumn.headerText=item.headerText;
           dgColumn.width=item.width;
           columns.push(dgColumn);
         }
         view_dg.columns=columns;         
         view_dg.dataProvider=departments;
       }
     }
   ]]>