AS3 DataGrid Learning

One, depending on a value of the row, change the row color

1. Create a new project, add the code layer, the code in the Code layer is as follows:

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 = [{name: ' Zhang San ', January: 200, February: 300, March: +, Rowcolor: ' Red '},
{name: ' John Doe ', January: 300, February: 400, March: $, Rowcolor: ' Green '},
{name: ' Harry ', January: 400, February: 500, March: Rowcolor: ' Yellow '}];

Datagrid.dataprovider = new Dataprovider (d);
Datagrid.columns = [' name ', ' January ', ' February ', ' March '];

Datagrid.setstyle ("Cellrenderer", CellStyle1);

2. Create a style 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";
Other attributes are set by themselves;
SetStyle ("TextFormat", format);
Break
Case "Red":
format.color=0xff0000;
format.size=12;
format.align = "center";
Other attributes are set by themselves;
SetStyle ("TextFormat", format);
Break
Case "Yellow":
format.color=0xffff00;
format.size=12;
format.align = "center";
SetStyle ("TextFormat", format);
Break
Default:
Break
}

Super.drawbackground ();
}
}
}

Two, directly in the code synchronization to set the display style

Import Fl.data.DataProvider;
Import Fl.controls.dataGridClasses.DataGridColumn;

var d:array = new Array ();
D = [{name: ' Zhang San ', January: 200, February: 300, March: 400},
{name: ' John Doe ', January: 300, February: 400, March: 500},
{name: ' Harry ', January: 400, February: 500, March: Rowcolor: ' Red '}];

Datagrid.dataprovider = new Dataprovider (d);
Datagrid.columns = [' name ', ' January ', ' February ', ' March '];

var tf1:textformat = new TextFormat ();
Tf1.size = 12;
Tf1.color = 0x000000;
Tf1.align = "right";
Other attributes of their own tune;

var tf2:textformat = new TextFormat ();
Tf2.size = 13;
Tf2.color = 0xff0000;
Tf2.bold = true;
Other attributes of their own tune;


Here are the applications:
Datagrid.setrendererstyle ("TextFormat", TF1); This is the formatting of the cell text on the header;
Datagrid.setstyle ("Headertextformat", TF2); This is the text style that is set on the cells in the table;
Datagrid.getcolumnat (1). Cellrenderer = CellStyle1; Based on a custom style, apply only to this column

Note: The last line of code in this section uses the custom style of the previous part

Third, set column properties

Method One:
var col1:datagridcolumn = new DataGridColumn ("Statecode");
Col1.headertext = ' status code ';
Col1.width = 48;
var col2:datagridcolumn = new DataGridColumn (' ResponseTime ');
Col2.headertext = ' response time ';
Col2.width = 60;
Datagrid.columns = [Col1,col2];
DataGrid.dataProvider.addItem (
{statecode: ' 200 ',
RESPONSETIME:300,
}
);

Method Two:
var d:array = new Array ();
D = [{name: ' Zhang San ', January: 200, February: 300, March: 400},
{name: ' John Doe ', January: 300, February: 400, March: 500},
{name: ' Harry ', January: 400, February: 500, March: 600}];

Datagrid.dataprovider = new Dataprovider (d);
Datagrid.columns = [' name ', ' January ', ' February ', ' March '];
Datagrid.getcolumnat (0). width = 80;
Datagrid.getcolumnat (1). width = 80;
Datagrid.getcolumnat (2). width = 120;

Iv. Some of the other small settings

1. Scroll bar display last (system default does not show the last one according to the content increment)

Datagrid.scrolltoindex (dataGrid.dataProvider.length);

2. If the data exceeds 500, delete

Only the specified record is displayed in the result bar
if (datagrid.dataprovider.length>500) {
DataGrid.dataProvider.removeAll ();
}

3. Add a column

(1) Direct increase in the back

var column4:datagridcolumn = new DataGridColumn (' April ');
Column4.headertext = "April";
Datagrid.columns = DataGrid.columns.concat (COLUMN4);

[Simple usage: Datagrid.addcolumn (COLUMN4)]

(2) Increase in the specified position

var column4:datagridcolumn = new DataGridColumn (' April ');
Column4.headertext = "April";
var a:array = Datagrid.columns;
A.splice (1,0,COLUMN4); Add this column to the location of section "1"
Datagrid.columns = A;

[Simple usage: Datagrid.addcolumnat (COLUMN4, 1)]

Description: Datagrid.columns gets a deep copy of an array, so it cannot be modified directly and must be fully re-assigned