一、根据行的某个值,改变行颜色
1.新建项目,增加代码层,代码层中的代码如下:
import fl.data.DataProvider;
var dataGrid:DataGrid = new DataGrid();
dataGrid.x = 100;
dataGrid.y = 100;
dataGrid.setSize(400,200)
addChild(dataGrid);
var d:Array = new Array();
d = [{姓名:'张三',一月:200,二月:300,三月:400, rowColor:'red'},
{姓名:'李四',一月:300,二月:400,三月:500, rowColor:'green'},
{姓名:'王五',一月:400,二月:500,三月:600, rowColor:'yellow'}];
dataGrid.dataProvider = new DataProvider(d);
dataGrid.columns = ['姓名','一月','二月' , '三月'];
dataGrid.setStyle("cellRenderer", CellStyle1);
2. 创建样式CellStyple1
package {
import fl.controls.listClasses.CellRenderer;
import fl.controls.listClasses.ICellRenderer;
import flash.text.TextFormat;
public class CellStyle1 extends CellRenderer implements ICellRenderer {
public function CellStyle1():void {
super();
}
override protected function drawBackground():void {
var format:TextFormat = new TextFormat();
switch (data.rowColor) {
case "green" :
format.color=0x00FF33;
format.size=24;
format.align = "center";
//其他属性自己设;
setStyle("textFormat",format);
break;
case "red" :
format.color=0xFF0000;
format.size=12;
format.align = "center";
//其他属性自己设;
setStyle("textFormat",format);
break;
case "yellow":
format.color=0xFFFF00;
format.size=12;
format.align = "center";
setStyle("textFormat",format);
break;
default :
break;
}
super.drawBackground();
}
}
}
二、直接在代码中同步设置显示样式
import fl.data.DataProvider;
//import fl.controls.dataGridClasses.DataGridColumn;
var d:Array = new Array();
d = [{姓名:'张三',一月:200,二月:300,三月:400},
{姓名:'李四',一月:300,二月:400,三月:500},
{姓名:'王五',一月:400,二月:500,三月:600, rowColor:'red'}];
dataGrid.dataProvider = new DataProvider(d);
dataGrid.columns = ['姓名','一月','二月' , '三月'];
var tf1:TextFormat = new TextFormat();
tf1.size = 12;
tf1.color = 0x000000;
tf1.align = "right";
//其他的属性自己调;
var tf2:TextFormat = new TextFormat();
tf2.size = 13;
tf2.color = 0xff0000;
tf2.bold = true;
//其他的属性自己调;
//下面是应用:
dataGrid.setRendererStyle("textFormat", tf1); //这是设置表头上的单元格文字格式;
dataGrid.setStyle("headerTextFormat", tf2); //这是设置表内单元格上的文字样式;
dataGrid.getColumnAt(1).cellRenderer = CellStyle1; //根据自定义的样式,只应用于本列
注意:本部分的最后一行代码用到了上一部分的自定义样式
三、设置列属性
方法一:
var col1:DataGridColumn = new DataGridColumn("stateCode");
col1.headerText = '状态码';
col1.width = 48;
var col2:DataGridColumn = new DataGridColumn('responseTime');
col2.headerText = '响应时间';
col2.width = 60;
dataGrid.columns = [col1,col2];
dataGrid.dataProvider.addItem(
{ stateCode : '200',
responseTime : 300,
}
);
方法二:
var d:Array = new Array();
d = [{姓名:'张三',一月:200,二月:300,三月:400},
{姓名:'李四',一月:300,二月:400,三月:500},
{姓名:'王五',一月:400,二月:500,三月:600}];
dataGrid.dataProvider = new DataProvider(d);
dataGrid.columns = ['姓名','一月','二月' , '三月'];
dataGrid.getColumnAt(0).width = 80;
dataGrid.getColumnAt(1).width = 80;
dataGrid.getColumnAt(2).width = 120;
四、其它的一些小设置
1.滚动条显示最后一个(系统默认不会根据内容的增加而去显示最后一条)
dataGrid.scrollToIndex(dataGrid.dataProvider.length);
2.数据超过500条,则删除
//结果栏中只显示指定条记录
if (dataGrid.dataProvider.length>500){
dataGrid.dataProvider.removeAll();
}
3.增加一列
(1)在后面直接增加
var column4:DataGridColumn = new DataGridColumn('四月');
column4.headerText = "四月";
dataGrid.columns = dataGrid.columns.concat(column4);
[简单用法: dataGrid.addColumn(column4) ]
(2)在指定位置增加
var column4:DataGridColumn = new DataGridColumn('四月');
column4.headerText = "四月";
var a:Array = dataGrid.columns;
a.splice(1,0,column4); //增加这一列到第"1"的位置
dataGrid.columns = a;
[简单用法: dataGrid.addColumnAt(column4, 1)]
说明: dataGrid.columns得到的是一个数组深拷贝,所以不能直接修改,必须完全重新赋值