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

王朝other·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

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

<?xml version="1.0" encoding="utf-8"?>

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

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

<mx:Script>

<![CDATA[

[Bindable]

public var works:Array= [

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

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

private var worksColumns:Array= [

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

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

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

[Bindable]

public var departments:Array=[

{ id: 1, name: ’tech dept.’},

{ id: 2, name: ’service dept.’}];

private var departmentsColumns:Array= [

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

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

private function loadDgView(){

if(type_cb.selectedIndex==0){

view_dg.dataProvider=works;

}else{

view_dg.dataProvider=departments;

}

}

]]>

</mx:Script>

<mx:HBox>

<mx:ComboBox id="type_cb" change="loadDgView()">

<mx:dataProvider>

<mx:Array>

<mx:Object label="works"/>

<mx:Object label="departments"/>

</mx:Array>

</mx:dataProvider>

</mx:ComboBox>

</mx:HBox>

<mx:DataGrid id="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属性就可以了。前面示例的代码,我们改进如下:

<?xml version="1.0" encoding="utf-8"?>

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

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

<mx:Script>

<![CDATA[

import mx.controls.gridclasses.DataGridColumn;

[Bindable]

public var works:Array= [

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

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

private var worksColumns:Array= [

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

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

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

[Bindable]

public var departments:Array=[

{ id: 1, name: ’tech dept.’},

{ id: 2, name: ’service dept.’}];

private var departmentsColumns:Array= [

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

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

private function loadDgView(){

if(type_cb.selectedIndex==0){

var columns:Array=new Array();

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

var item:Object=worksColumns[i];

var dgColumn:DataGridColumn=new DataGridColumn();

dgColumn.columnName=item.columnName;

dgColumn.headerText=item.headerText;

dgColumn.width=item.width;

columns.push(dgColumn);

}

view_dg.columns=columns;

view_dg.dataProvider=works;

}else{

var columns:Array=new Array();

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

var item:Object=departmentsColumns[i];

var dgColumn:DataGridColumn=new DataGridColumn();

dgColumn.columnName=item.columnName;

dgColumn.headerText=item.headerText;

dgColumn.width=item.width;

columns.push(dgColumn);

}

 

[1] [2] 下一页

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