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

王朝other·作者佚名  2008-05-19
窄屏简体版  字體: |||超大  

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()">

<mx:dataProvider>

<mx:Array>

<mx:Objectlabel="works"/>

<mx:Objectlabel="departments"/>

</mx:Array>

</mx:dataProvider>

</mx:ComboBox>

</mx:HBox>

<mx:DataGridid="view_dg"/>

</mx:Application>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航