现在的位置: 首页 > 综合 > 正文

FLEX实践:动态显示DataGrid的列和内容

2013年08月31日 ⁄ 综合 ⁄ 共 1794字 ⁄ 字号 评论关闭

 

LovColumn.as

package Class
{
    public class CarVO
    {
        public var name:String;
        public var available:Boolean;
       
        public function CarVO()
        {
        }

    }
}

 

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
    import Class.CarVO;
    import Class.LovColumn;
    import mx.collections.ArrayCollection;
    import mx.controls.dataGridClasses.DataGridColumn;
   

    //定义动态设置列的数组,内容为LovColumn类
    public var columnArray:ArrayCollection=new ArrayCollection();

    //定义数据源数组
    public var sourceArray:ArrayCollection=new ArrayCollection();


  private function init():void{

      //初始化表格列数的数据源
      var lovColumn:LovColumn=new LovColumn();
      lovColumn.columnName="Car Name";
      lovColumn.dataField="name";
      var lovColumn2:LovColumn=new LovColumn();
      lovColumn2.columnName="Aviliable";
      lovColumn2.dataField="available";
      columnArray.addItem(lovColumn);
      columnArray.addItem(lovColumn2);
     

      //初始化表格的数据源
      var car:CarVO=new CarVO();
      car.name="Ford";
      car.available=true;
      var car1:CarVO=new CarVO();
      car1.name="Nissa";
      car1.available=true;
      var car2:CarVO=new CarVO();
      car2.name="BUICK";
      car2.available=false;
      sourceArray.addItem(car);
      sourceArray.addItem(car1);
      sourceArray.addItem(car2);
     

      for(var i:Number=0;i<columnArray.length;i++){
          var column:DataGridColumn= new DataGridColumn();
          column.headerText = columnArray[i].columnName;
          column.dataField  =columnArray[i].dataField;


          //此处一定要这样添加列,否则显示会不正常,具体原因请参考:

         //http://q.sohu.com/forum/5/topic/2275790
          dg.columns=dg.columns.concat(column);
      }
    dg.dataProvider=sourceArray;
  }
]]>
</mx:Script>
    <mx:DataGrid x="344" y="125" id="dg">
       
    </mx:DataGrid>
   
</mx:Application>


下一个目标是把它做成一个通用的组件,呵呵

抱歉!评论已关闭.