AS3 DataGrid Learning

1. Change the color of a row based on its value.

1. Create a project and add a 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', December January: 200, December February: 300, December March: 400, rowColor: 'red '},
{Name: 'lily', December January: 300, December February: 400, December March: 500, rowColor: 'green '},
{Name: 'wang 5', December January: 400, December February: 500, December March: 600, rowColor: 'yellow'}];

DataGrid. dataProvider = new DataProvider (d );
DataGrid. columns = ['name', 'August 11', 'August 11', 'August 11'];

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 ";
// Set other attributes;
SetStyle ("textFormat", format );
Break;
Case "red ":
Format. Color = 0xff0000;
Format. size = 12;
Format. align = "center ";
// Set other attributes;
Setstyle ("textformat", format );
Break;
Case "yellow ":
Format. Color = 0xffff00;
Format. size = 12;
Format. align = "center ";
Setstyle ("textformat", format );
Break;
Default:
Break;
}

Super. drawBackground ();
}
}
}

 

2. Set the display style directly in the code.

Import fl. data. DataProvider;
// Import fl. controls. dataGridClasses. DataGridColumn;

Var d: Array = new Array ();
D = [{Name: 'zhang san', December January: 200, December February: 300, December March: 400 },
{Name: 'lily', December January: 300, December February: 400, December March: 500 },
{Name: 'wang 5', December January: 400, December February: 500, December March: 600, rowColor: 'red'}];

DataGrid. dataProvider = new DataProvider (d );
DataGrid. columns = ['name', 'August 11', 'August 11', 'August 11'];

Var tf1: TextFormat = new TextFormat ();
Tf1.size = 12;
Tf1.color = 0x000000;
Tf1.align = "right ";
// Adjust other attributes by yourself;

Var tf2: TextFormat = new TextFormat ();
Tf2.size = 13;
Tf2.color = 0xff0000;
Tf2.bold = true;
// Adjust other attributes by yourself;

// The following is the application:
DataGrid. setRendererStyle ("textFormat", tf1); // This is to set the cell text format on the header;
DataGrid. setstyle ("headertextformat", TF2); // set the text style of cells in the table;
DataGrid. getcolumnat (1). cellrenderer = cellstyle1; // applies only to this column according to the custom style.

 

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

 

3. Set column attributes

Method 1:
VaR col1: Maid = new maid ("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: '20140901 ',
ResponseTime: 300,
}
);

Method 2:
Var d: Array = new Array ();
D = [{Name: 'zhang san', December January: 200, December February: 300, December March: 400 },
{Name: 'lily', December January: 300, December February: 400, December March: 500 },
{Name: 'wang 5', December January: 400, December February: 500, December March: 600}];

DataGrid. dataProvider = new DataProvider (d );
DataGrid. columns = ['name', 'August 11', 'August 11', 'August 11'];
DataGrid. getColumnAt (0). width = 80;
DataGrid. getColumnAt (1). width = 80;
DataGrid. getColumnAt (2). width = 120;

 

4. other small settings

1. display the last one in the scroll bar (the system will not display the last one based on the increase of content by default)

DataGrid. scrolltoindex (DataGrid. dataprovider. Length );

 

2. Delete if there are more than 500 data entries

// Only the specified record is displayed in the result column.
If (DataGrid. dataprovider. length> 500 ){
DataGrid. dataprovider. removeall ();
}

 

3. Add a column

(1) directly add

VaR column4: datagridcolumn = new datagridcolumn ('february 11 ');
Column4.headertext = "April ";
DataGrid. Columns = DataGrid. Columns. Concat (column4 );

[Simple usage: DataGrid. AddColumn (column4)]

 

(2) Add at the specified position

VaR column4: datagridcolumn = new datagridcolumn ('february 11 ');
Column4.headertext = "April ";
VaR A: array = DataGrid. columns;
A. splice (, column4); // Add this column to the position of "1"
DataGrid. Columns =;

[Simple usage: DataGrid. addcolumnat (column4, 1)]

 

Note: The dataGrid. columns returns an array with a deep copy. Therefore, it cannot be directly modified and must be completely re-assigned.