DataGrid动态添加列

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx"  width="650" height="379">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            //创建数据 添加特性[Bindable] 表示该对象可以作为数据绑定源
            [Bindable]
            private var data:ArrayCollection=new ArrayCollection([
                {userid:"a1",useridname:"张三",age:"20",phone:"13800",LogonName:"zhangsan",pwd:"123",isdelete:1,usertype:"VIP"},
                {userid:"a2", useridname:"李四", age:"21", phone:"138000", LogonName:"lsi", pwd:"1234",isdelete:0,usertype:"普通会员"},
                {userid:"a3", useridname:"王五", age:"22", phone:"1380000", LogonName:"wangwu", pwd:"12345",isdelete:1,usertype:"A级会员"},
                {userid:"a4", useridname:"马六", age:"23", phone:"13800000", LogonName:"maliu", pwd:"123456",isdelete:0,usertype:"黄金会员"},
                {userid:"a5", useridname:"路人甲", age:"24", phone:"138000000", LogonName:"lrj", pwd:"1234567",isdelete:1,usertype:"VIP"},
                {userid:"a6", useridname:"路人乙", age:"25", phone:"13800000000", LogonName:"lry", pwd:"12345678",isdelete:0,usertype:"VIP"}
            ]);
            
            //设置显示字段
            protected function Btn_ShowColumn_clickHandler(event:MouseEvent):void
            {
                var ColumName:String="";
                
                //查找 HBox 下面的 为CheckBox的子元素，
                for each(var checkbox:Object in hb_check.getChildren())
                {
                    if(checkbox is CheckBox)
                    {
                        var check:CheckBox= checkbox as CheckBox;
                        if(check.selected)
                        {
                            //利用字符串保存 id（添加的列绑定的数据源） label（添加的列的列名）
                            ColumName+=check.id+","+check.label;
                            ColumName+="|"
                        }
                    }
                }
                
                if(ColumName!="")
                {
                    
                    //排除最后一个 “|”的字符
                    var str:String =ColumName.substring(0,ColumName.length-1);
                    
                    //得到字符后 进行字符分割
                    var arrycolumName:Array = str.split("|");
                    
                    //先清空 DataGrid 的列
                    var arrys:Array=new Array();
                    this.dg_list.columns=arrys;
                    
                    //判断数组长度 获得需要添加的列及列名
                    for(var i:int;i<arrycolumName.length;i++)
                    {
                        
                        //动态添加列名 (添加要绑定数据 因为我CheckBox的ID 对应的是数据源的 字段 )
                        //先创建 DataGridColumn
                        var dataColumn:DataGridColumn =new DataGridColumn();
                        
                        //设置列的绑定字段
                        dataColumn.dataField=arrycolumName[i].toString().split(",")[0].toString();
                        
                        //设置列的标题
                        dataColumn.headerText=arrycolumName[i].toString().split(",")[1].toString();
                        
                        //这一步是最关键的把创建的列对象添加发到指定的DataGrid对象里面
                        this.dg_list.columns = this.dg_list.columns.concat(dataColumn);
                    }
                }
            }
            
        ]]>
    </fx:Script>
    
    <mx:HBox id="hb_check" x="5" y="76">
        <mx:CheckBox label="ID" id="userid" enabled="false" selected="true"/>
        <mx:CheckBox label="姓名" id="useridname" enabled="false" selected="true" x="519" y="5"/>
        <mx:CheckBox label="年龄" id="age" />
        <mx:CheckBox label="电话" id="phone" />
        <mx:CheckBox label="登录账号" id="LogonName" />
        <mx:CheckBox label="登陆密码" id="pwd" />
        <mx:CheckBox label="用户级别" id="usertype" enabled="false" selected="true"/>
        <mx:CheckBox label="是否启用" id="isdelete" enabled="false" selected="true"/>
        <s:Button label="设置显示字段" id="Btn_ShowColumn" click="Btn_ShowColumn_clickHandler(event)" x="342" y="4"/>
    </mx:HBox>
    
    <mx:DataGrid x="4" y="105" id="dg_list" dataProvider="{data}" width="600">
        <mx:columns>
            <mx:DataGridColumn  headerText="ID" dataField="userid" />   
            <mx:DataGridColumn  headerText="姓名" dataField="useridname"/>
            
        </mx:columns>
    </mx:DataGrid>
</s:Application>