AS3 使用DataGrid組件 - 欄位文字變色(下)

範例檔下載

再加一個"是否大於0"的欄位,這個欄位的內容與顏色都會依照亂數值而改變。









1.先建立一支設定Style的as,檔名為CellRenderStyle2.as



package {
import fl.controls.listClasses.CellRenderer;

public class CellRenderStyle2 extends CellRenderer {
public function CellRenderStyle2() {
}
override protected function drawLayout():void {
//this.data["col2"]會取得與這個欄位同一Roll的值
//this.listData.label會取得目前這個欄位的值
//this.listData.column會取得目前是第幾個Column

if(parseInt(this.data["col2"])<0 && this.listData.column==1){
textField.textColor=0xFF0000;
}
if(parseInt(this.data["col2"])<0 && this.listData.column==2){
textField.textColor=0x00FF00;
}
super.drawLayout();
}
}
}



2.fla的主程式:

import fl.controls.DataGrid;
import fl.data.DataProvider;
import fl.controls.dataGridClasses.DataGridColumn;

//建立DataGrid(可把它想成大Table)
var dg:DataGrid = new DataGrid();
dg.width=500;
dg.height=300;
dg.x=20;
dg.y=30;
this.addChild(dg);
//建立Column
//第一個Column
var colA:DataGridColumn = new DataGridColumn("col1");
colA.headerText="序號";
dg.addColumn(colA);
//第二個Column
var colB:DataGridColumn = new DataGridColumn("col2");
colB.headerText="亂數";
//此格會變色,因此要設定cellRenderer
colB.cellRenderer = CellRenderStyle2;
dg.addColumn(colB);
//第三個Column
var colC:DataGridColumn = new DataGridColumn("col3");
colC.headerText="大於0?";
//此格會變色,因此要設定cellRenderer
colC.cellRenderer = CellRenderStyle2;
//此格的文字內容依Col2而變化,設定要出現的文字function
//labelFun會判斷col2的值大於0嗎,大於0顯示Y;小於0顯示n
colC.labelFunction=labelFun;
dg.addColumn(colC);

//建立DataProvider(Table的資料)
var dp:DataProvider = new DataProvider();
for (var i = 0; i < 20; i++) {
//col3的值依col2的值變化,可先不填
dp.addItem({col1:(i+1), col2:getRandomNumber()});
}
dg.dataProvider=dp;

function labelFun(item:Object):String {
trace(item["col2"]);
if(parseInt(item["col2"])>0){
return 'Y';
}else{
return 'N';
}
}

function getRandomNumber(){
return Math.floor(Math.random()*50)-25;
}

Category:

1 意見:

栗子王 提到...

大大您好,在下是滷肉腳XD
想請問下如果是要更改header裡面字體的顏色或字型,是可以的嗎?