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>