Flex DataGrid paging component

<? XML version = "1.0" encoding = "UTF-8"?>
<Mx: vbox xmlns: MX = "http://www.adobe.com/2006/mxml" width = "400" Height = "300" xmlns: mydg = "*">
<Mx: SCRIPT>
<! [CDATA [
/**//*
Custom DataGrid Control Elements
Total number of pages
Current page number
Number of all records
Current record
No paging records

*/
Import MX. Collections. arraycollection;
[Bindable]
Private var mypagedata: arraycollection = new arraycollection (); // none of the currently displayed records
[Bindable]
Public var mygridcolumns: array;
Public var mydata: arraycollection; // all data
Public var pagecount: Int = 10; // indicates the number of records per page. The default value is 10, which can be customized by the user.
Public var curpage: int; // current page number
Public var totalpage: int; // total number of pages
Public var totalcount: int; // total number of records

Public Function initdata (value: arraycollection): void
{
Mydata = value; // assign all data to the mydata variable.
Mypagedata. removeall (); // remove all data records from the current page

If (mydata. length> 0 & null! = Mydata)
{
Totalcount = mydata. length;
Totalpage = (totalcount + pagecount-1)/pagecount;
Setpager (0 );
Inputpage. Minimum = 1;
Inputpage. Maximum = totalpage;
} Else {
Totalcount = 0;
Totalpage = 0;
Curpage = 0;
Inputpage. Minimum = 0;
Inputpage. Maximum = 0;
Pagedetail. Text = "0th pages/0 pages total 0 records ";
}
}
Public Function setpager (value: INT): void
{
If (value <0 | value> totalpage) return;
Curpage = value;
VaR curnum: Int = value * pagecount; // calculate the first record of the page type to jump.
Mypagedata. removeall (); // remove data from the variable to insert new data. The data in this variable is displayed on the page.
For (var I: Int = 0; curnum <mydata. Length & I <pagecount; I ++, curnum ++)
// The number of cycles must be smaller than the number of all records or the number of records displayed on each page. The value in the curnum variable must also be increased.
{
Mypagedata. additem (mydata. getitemat (curnum); // extracts records in sequence
}
VaR temp: Int = curpage + 1; // the first page in the page number is 0, that is, the actual displayed page number is the value after + 1
Pagedetail. Text = "no." + temp + "Page/total" + totalpage + "Page total" + totalcount + "record ";
}
]>
</MX: SCRIPT>

<Mx: DataGrid id = "cudg" dataprovider = "{mypagedata }"
Columns = "{mygridcolumns}" width = "100%" Height = "100%">
</MX: DataGrid>
<Mx: hbox width = "100%" horizontalalign = "Left" verticalalign = "Middle">
<! -- <Mx: linkbutton label = "select all"/>
<Mx: linkbutton label = "NONE"/> -->
<Mx: Spacer width = "100%" Height = "1"> </MX: Spacer>
<Mx: Label text = "Page 0th/Page 0 in total" id = "pagedetail"/>
<Mx: linkbutton label = "Homepage" Click = "setpager (0)"/>
<Mx: linkbutton label = "Previous Page" Click = "setpager (curpage-1)"/>
<Mx: linkbutton label = "next page" Click = "setpager (curpage + 1)"/>
<Mx: linkbutton label = "last page" Click = "setpager (totalpage-1)"/>
<Mx: numericstepper id = "inputpage" stepsize = "1" minimum = "0" Maximum = "0" cornerradius = "0"/>
<Mx: linkbutton label = "jump" Click = "setpager (inputpage. Value-1)"/>
</MX: hbox>
</MX: vbox>

 

<? XML version = "1.0" encoding = "UTF-8"?>
<Mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml" layout = "absolute" xmlns: NSL = "*" creationcomplete = "Init ()">
<Mx: SCRIPT>
<! [CDATA [
Import MX. Collections. arraycollection;
Public var items: arraycollection;
Private function Init (): void
{
Items = new arraycollection ();
For (var I: Int = 1; I <16; I ++)
{
VaR OBJ: Object = new object ();
OBJ. loginaccount = "Andy ";
OBJ. Name = "Andy ";
OBJ. loginaccount + = I;
OBJ. Name + = I;
Items. additem (OBJ );
}

Mydg. initdata (items );
}

]>
</MX: SCRIPT>
<Mx: Panel id = "Panel1" Title = "mydatagrid">
<NSL: customdatagrid width = "100%" Height = "100%" id = "mydg">
<NSL: mygridcolumns>
<Mx: datagridcolumn headertext = "Login Name" datafield = "loginaccount" width = "200"/>
<Mx: datagridcolumn headertext = "name" datafield = "name" width = "200"/>
</NSL: mygridcolumns>
</NSL: customdatagrid>
</MX: Panel>

</MX: Application>
//////////////////////////////////////// //////////////////////////////////////// ///////////////////////////////////

The DataGrid uses the columns attribute to identify column information. The column attribute is an MX. controls. gridclasses. to dynamically create table columns, you only need to create a datagridcolumn array and assign it to the columns attribute of the DataGrid. The code in the preceding example is improved as follows:

<? XML version = "1.0" encoding = "UTF-8"?>
<Mx: Application xmlns: MX = "http://www.macromedia.com/2005/mxml" xmlns = "*"
Layout = "vertical" creationcomplete = "loaddgview ()">
<Mx: SCRIPT>
<! [CDATA [
Import MX. Controls. gridclasses. datagridcolumn;

[Bindable]
Public var works: array = [
{ID: 1, name: 'feiy', sex: 'male '},
{ID: 2, name: 'wenj', sex: 'fmale'}];
Private var workscolumns: array = [
{Columnname: "ID", headertext: "Work's ID", width: 100 },
{Columnname: "name", headertext: "Work's name", width: 200 },
{Columnname: "sex", headertext: "Work's sex", width: 100}];
[Bindable]
Public var parameters: array = [
{ID: 1, name: 'tech Dept .'},
{ID: 2, name: 'service Dept. '}];
Private var departmentscolumns: array = [
{Columnname: "ID", headertext: "department's ID", width: 200 },
{Columnname: "name", headertext: "department's name", width: 200}];
Private function loaddgview (){
If (type_cb.selectedindex = 0 ){
VaR columns: array = new array ();
For (var I: int; I <workscolumns. length; I ++ ){
VaR item: Object = workscolumns [I];
VaR dgcolumn: Maid = new maid ();
Dgcolumn. columnname = item. columnname;
Dgcolumn. headertext = item. headertext;
Dgcolumn. width = item. width;
Columns. Push (dgcolumn );
}
View_dg.columns = columns;
View_dg.dataprovider = works;
} Else {
VaR columns: array = new array ();
For (var I: int; I <departmentscolumns. length; I ++ ){
VaR item: Object = departmentscolumns [I];
VaR dgcolumn: Maid = new maid ();
Dgcolumn. columnname = item. columnname;
Dgcolumn. headertext = item. headertext;
Dgcolumn. width = item. width;
Columns. Push (dgcolumn );
}
View_dg.columns = columns;
View_dg.dataprovider = parameters;
}
}
]>
</MX: SCRIPT>
<Mx: hbox>
<Mx: ComboBox id = "type_cb" change = "loaddgview ()">
<Mx: dataprovider>
<Mx: array>
<Mx: Object Label = "works"/>
<Mx: Object Label = "deployments"/>
</MX: array>
</MX: dataprovider>
</MX: ComboBox>
</MX: hbox>
<Mx: DataGrid id = "view_dg"/>
</MX: Application>

The red part is the added code. Compared with the previous code, we added two Arrays: workscolumns and departmentscolumns, which respectively store the datagridcolumn attribute of the corresponding data, and then in the loaddgview function, create a corresponding datagridcolumn Array Based on the corresponding column array, and assign it to view_db.columns.