FLEX实践：动态显示DataGrid的列和内容

最新推荐文章于 2025-10-18 14:38:30 发布

最新推荐文章于 2025-10-18 14:38:30 发布 · 63 阅读

文章标签：

#Flex #Adobe #XML

本文介绍了一个使用Flex框架创建动态数据网格的例子。通过定义LovColumn类来配置列属性，并利用CarVO类作为数据源，实现了数据网格的动态加载与展示。此方法能够根据实际需求灵活调整列的内容。

LovColumn.as

package Class
{
public class CarVO
{
public var name:String;
public var available:Boolean;

public function CarVO()
{
}

}
}

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
import Class.CarVO;
import Class.LovColumn;
import mx.collections.ArrayCollection;
import mx.controls.dataGridClasses.DataGridColumn;

//定义动态设置列的数组，内容为LovColumn类
public var columnArray:ArrayCollection=new ArrayCollection();

//定义数据源数组
public var sourceArray:ArrayCollection=new ArrayCollection();

private function init():void{

//初始化表格列数的数据源
var lovColumn:LovColumn=new LovColumn();
lovColumn.columnName="Car Name";
lovColumn.dataField="name";
var lovColumn2:LovColumn=new LovColumn();
lovColumn2.columnName="Aviliable";
lovColumn2.dataField="available";
columnArray.addItem(lovColumn);
columnArray.addItem(lovColumn2);

//初始化表格的数据源
var car:CarVO=new CarVO();
car.name="Ford";
car.available=true;
var car1:CarVO=new CarVO();
car1.name="Nissa";
car1.available=true;
var car2:CarVO=new CarVO();
car2.name="BUICK";
car2.available=false;
sourceArray.addItem(car);
sourceArray.addItem(car1);
sourceArray.addItem(car2);

for(var i:Number=0;i<columnArray.length;i++){
var column:DataGridColumn= new DataGridColumn();
column.headerText = columnArray[i].columnName;
column.dataField =columnArray[i].dataField;

//此处一定要这样添加列，否则显示会不正常，具体原因请参考：

//http://q.sohu.com/forum/5/topic/2275790
dg.columns=dg.columns.concat(column);
}
dg.dataProvider=sourceArray;
}
]]>
</mx:Script>
<mx:DataGrid x="344" y="125" id="dg">

</mx:DataGrid>

</mx:Application>

下一个目标是把它做成一个通用的组件，呵呵