Flex中动态添加DataGrid表头和记录

要做多个统计表，表头/列名都是已知的，表的内容跟据查询结果得到。那么可以把表头信息放在XML中作为配置文件，在程序中读取。

TableColumn.xml:

<Data>
    <columns name="table1">
      <column>
        <dataField>col1</dataField>
        <headerText>项目分类</headerText>
        <width>100</width>
      </column>
      <column>
        <dataField>col2</dataField>
        <headerText>项目个数</headerText>
        <width>100</width>
      </column>
    </columns>
    
    <columns name="table2">
        <dataField>col1</dataField>
        <headerText>项目分类</headerText>
        <width>100</width>
      </column>
      <column>
        <dataField>col2</dataField>
        <headerText>项目个数</headerText>
        <width>100</width>
      </column>
        <dataField>col3</dataField>
        <headerText>比例(%)</headerText>
        <width>100</width>
      </column>
    </columns>
</Data>

initTable显示DataGrid时调用下面的initTable方法，参数用来指定<columns name="table1">中的name属性内容，如initTable("table1");
mxml代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
	       
<mx:XML id="TableColumn" source="TableColumn.xml"/>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection; 
import mx.controls.dataGridClasses.DataGridColumn; 

[Bindable]
public var tableData:ArrayCollection= new ArrayCollection();//表数据   

    public function initTable(name:String)
    {
    	this.initialize();
        
        //设置表头
        var xml:XML=this.TableColumn;
        var lstColumns:XMLList=xml.columns.(@name==name).column;
        setTableColumns(lstColumns);
        switch(name)
	{
            case "table1":
                tableData=new ArrayCollection([  //指定统计表的数据源
                  {col1:"type1",col2:"12"},
                  {col1:"tpye2",col2:"6"},
                  {col1:"type3",col2:"7"}
                  ]);
                break;
            case "table2":
                tableData=new ArrayCollection([  //指定统计表的数据源
                  {col1:"type1",col2:"3",col3:"25%"},
                  {col1:"tpye2",col2:"3",col3:"25%"},
                  {col1:"type3",col2:"3",col3:"25%"},
                  {col1:"type3",col2:"3",col3:"25%"}
                  ]);
                break;
            default:
                break;

        }

        //指定统计表的数据源
	tableData=data;
	   
    } 
    
    /*
        将XML转为Array，Array中的对象为DataGridColumn类型。
        用这个Array设置DataGrid的columns属性。
    */
    private function setTableColumns(lstcolumns:XMLList)
    {
    	var columns:Array=new Array();
        for each(var child:XML in lstcolumns)
        {lstcolumns.toLocaleString()
        	var obj:Object=new Object();
        	var column:DataGridColumn=new DataGridColumn();
        	for each(var ite:XML in child.children())
        	{
        		obj[ite.name().toString()]=ite.toString();
        	}
        	column.dataField=obj.dataField;
        	column.headerText=obj.headerText;
    		column.width=obj.width;
        	columns.push(column);
        }
    	myTable.columns=columns;
    }

]]>

</mx:Script>
<mx:Panel id="chartContainer" title="统计表" width="100%" height="100%">
     <mx:Label text="统计结果" left="20" top="10" fontSize="16"  fontWeight="bold"/>
     <mx:DataGrid id="myTable"  dataProvider= "{tableData}" enabled="false" top="50" horizontalCenter="0" /> 
</mx:Panel>
</mx:Canvas>