首页 > > 网页制作 > Flash >

Flex2发现之旅：动态创建DataGrid列

2008-04-02 11:02:22来源：互联网阅读 ()

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

　　

<?xmlversion="1.0"encoding="utf-8"?>

　　<mx:Applicationxmlns:mx="http://www.macromedia.com/2005/mxml"xmlns="*"

　　layout="vertical"creationComplete="loadDgView()">

　　<mx:Script>

　　<![CDATA[

　　[Bindable]

　　publicvarworks:Array=[

　　{id:1,name:’feiy’,sex:’male’},

　　{id:2,name:’wenj’,sex:’fmale’}];

　　privatevarworksColumns:Array=[

　　{columnName:"id",headerText:"work’sid",width:100},

　　{columnName:"name",headerText:"work’sname",width:200},

　　{columnName:"sex",headerText:"work’ssex",width:100}];

　　[Bindable]

　　publicvardepartments:Array=[

　　{id:1,name:’techdept.’},

　　{id:2,name:’servicedept.’}];

　　privatevardepartmentsColumns:Array=[

　　{columnName:"id",headerText:"department’sid",width:200},

　　{columnName:"name",headerText:"department’sname",width:200}];

　　privatefunctionloadDgView(){

　　if(type_cb.selectedIndex==0){

　　view_dg.dataProvider=works;

　　}else{

　　view_dg.dataProvider=departments;

　　}

　　}

　　]]>

　　</mx:Script>

　　<mx:HBox>

　　<mx:ComboBoxid="type_cb"change="loadDgView()">

　　<mx:dataProvider>

　　<mx:Array>

　　<mx:Objectlabel="works"/>

　　<mx:Objectlabel="departments"/>

　　</mx:Array>

　　</mx:dataProvider>

　　</mx:ComboBox>

　　</mx:HBox>

　　<mx:DataGridid="view_dg"/>

　　</mx:Application>

　　查看示例

　　当我们选择works时，DataGrid自动根据dataProvider：works数组中的数据生成三列的DataGridColumn；而选择departments时，又相应的变更为两列，很的方便。

　　DataGrid组件的这一功能是Flex1.5中所不具备的，是Flex2中的一大改进。

　　但是假如我们DataGrid的表头和列明不一致的时候，或我们并无需显示每行任何的数据，这时候DataGrid的隐式自动创建列的方法就不再适用了，这时候，我们就需要自己手动来创建列。

　　DataGrid使用columns属性来标识列信息，column属性是个mx.controls.gridclasses.DataGridColumn数组，所以要动态创建表格列，只需要创建一个DataGridColumn数组，然后将其赋值给DataGrid的columns属性就能够了。前面示例的代码，我们改进如下：

　　

<?xmlversion="1.0"encoding="utf-8"?>

　　<mx:Applicationxmlns:mx="http://www.macromedia.com/2005/mxml"xmlns="*"

　　layout="vertical"creationComplete="loadDgView()">

　　<mx:Script>

　　<![CDATA[

　　importmx.controls.gridclasses.DataGridColumn;

　　[Bindable]

　　publicvarworks:Array=[

　　{id:1,name:’feiy’,sex:’male’},

　　{id:2,name:’wenj’,sex:’fmale’}];

　　privatevarworksColumns:Array=[

　　{columnName:"id",headerText:"work’sid",width:100},

　　{columnName:"name",headerText:"work’sname",width:200},

　　{columnName:"sex",headerText:"work’ssex",width:100}];

　　[Bindable]

　　publicvardepartments:Array=[

　　{id:1,name:’techdept.’},

　　{id:2,name:’servicedept.’}];

　　privatevardepartmentsColumns:Array=[

　　{columnName:"id",headerText:"department’sid",width:200},

　　{columnName:"name",headerText:"department’sname",width:200}];

　　privatefunctionloadDgView(){

　　if(type_cb.selectedIndex==0){

　　varcolumns:Array=newArray();

　　for(vari:int;i<worksColumns.length;i ){

　　varitem:Object=worksColumns[i];

　　vardgColumn:DataGridColumn=newDataGridColumn();

　　dgColumn.columnName=item.columnName;

　　dgColumn.headerText=item.headerText;

　　dgColumn.width=item.width;

　　columns.push(dgColumn);

　　}

　　view_dg.columns=columns;

　　view_dg.dataProvider=works;

　　}else{

　　varcolumns:Array=newArray();

　　for(vari:int;i<departmentsColumns.length;i ){

　　varitem:Object=departmentsColumns[i];

　　vardgColumn:DataGridColumn=newDataGridColumn();

　　dgColumn.columnName=item.columnName;

　　dgColumn.headerText=item.headerText;

　　dgColumn.width=item.width;

　　columns.push(dgColumn);

　　}

　　view_dg.columns=columns;

　　view_dg.dataProvider=departments;

　　}

　　}

　　]]>

　　</mx:Script>

　　<mx:HBox>

　　<mx:ComboBoxid="type_cb"change="loadDgView()">

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有