快捷導(dǎo)航

Flex中如何動(dòng)態(tài)生成DataGrid以及動(dòng)態(tài)生成表頭

更新時(shí)間：2013年10月29日 15:29:02 作者：

因某些需要，DataGrid及其表頭需要?jiǎng)討B(tài)生成，網(wǎng)上的解決方案打多籠統(tǒng)，下面有個(gè)不錯(cuò)的解決方法，感興趣的朋友可以參考下

在Flex中動(dòng)態(tài)生成表格，并且表格的表頭也是動(dòng)態(tài)生成

1、源碼

 
<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
creationComplete="initHandler()" 
width="100%" height="100%"> 
<mx:Script> 
<![CDATA[ 
import mx.events.FlexEvent; 
import mx.events.ListEvent; 
import mx.controls.ComboBox; 
import mx.controls.DataGrid; 
import mx.collections.ArrayCollection; 
import mx.controls.dataGridClasses.DataGridColumn; 

[Bindable] 
//自定義數(shù)據(jù)源 
private var grid:Array = [ 
{age:'25', sex: "男",name: "張三"}, 
{age:'22', sex: "女",name: "李四"}, 
{age:'23', sex: "男",name: "王五"}, 
{age:'21', sex: "女",name: "趙六"}, 
{age:'24', sex: "男",name: "錢七"}, 
{age:'20', sex: "女",name: "魏八"} 
]; 

/*初始化函數(shù)*/ 
private function initHandler():void 
{ 
var gridArray:ArrayCollection = new ArrayCollection(grid); 

gridArray.filterFunction; 
//自定義DataGrid控件 
var dataGrid:DataGrid = new DataGrid(); 
//X軸坐標(biāo) 
dataGrid.x = 20; 
//Y軸坐標(biāo) 
dataGrid.y = 20; 
//數(shù)據(jù)項(xiàng)是否能編輯 
dataGrid.editable = false; 
//控件寬度 
dataGrid.width = 1300; 
//控件高度 
//dataGrid.height = 600; 
//設(shè)置表格行數(shù) 
dataGrid.rowCount = gridArray.length + 1; 
//設(shè)置控件內(nèi)容字體大小 
dataGrid.setStyle("fontSize", 20); 
//設(shè)置表頭顏色 
dataGrid.setStyle("headerColors",[0xB0C4DE,0xB0C4DE]); 
//設(shè)置字體位置 
dataGrid.setStyle("textAlign","center"); 
//設(shè)置樣式名 
dataGrid.styleName; 
// 設(shè)置數(shù)據(jù)源 
dataGrid.dataProvider = gridArray; 
// 添加監(jiān)聽事件類型與觸發(fā)函數(shù) 
dataGrid.addEventListener(ListEvent.ITEM_CLICK, itemClickHandler); 
// 添加dataGrid控件 
addChild(dataGrid); 
//聲明一個(gè)數(shù)組 
var columns:Array = new Array(); 
var column:DataGridColumn; 
for ( var i:* in grid[0] ) { 
column = new DataGridColumn(i); 
columns.push(column); 
} 
dataGrid.columns = columns; 

} 

/*事件*/ 
private function itemClickHandler(event:ListEvent):void 
{ 
trace(event.target); 
} 

]]> 
</mx:Script> 

</mx:Application> 