Flex tips: Display matrix data in a DataGrid

Source: Internet
Author: User
Our system needs to implement this function, that is, to display the user permission allocation in the form of a matrix. The final display effect is as follows:

This function is not so easy to implement. Of course, it is easy to add columns to the DataGrid dynamically: you only need to know all the columns to be added, generate a bunch of datagridcolumns, and put them in an array. But the problem is that the datagridcolumn can only specify one itemrenderer. How does the itemrenderer know which column it should belong?

The answer is the type of the itemrenderer attribute. It is not a simple data, but an object that requires the implementation of the ifacloud interface. In Flex, the basic type for implementing the ifactory interface is classfactory, and classfactory has a special property properties. If it is set, it will be automatically appended to the corresponding property value in the new instance when the instance is created.

After understanding this, the problem will be solved. The complete implementation code is as follows:

Code
Package CPS. comps
{
Import CPS. VO .*;

Import MX. Collections .*;
Import MX. Controls .*;
Import MX. Controls. datagridclasses .*;
Import MX. Core. classfactory;

/**
* Display the grid of the check box
*/
Public class matrixgrid extends DataGrid
{
Public Function matrixgrid ()
{
Lockedcolumncount = 1;
}

/**
* When dataprovider is set, corresponding columns are manually generated based on the data content.
*/
Public override function set dataprovider (value: Object): void
{
VaR Cols: array = [];

VaR labelcol: Maid = new maid ();
Labelcol. datafield = 'label ';
Labelcol. headertext = '';
Cols. Push (labelcol );

For each (VAR Col: object in value. columns)
Cols. Push (createcolumn (COL ));
This. Columns = Cols;

Super. dataprovider = parse (value );
}

/**
* Create columns Based on Data
*/
Private function createcolumn (coldata: Object): datagridcolumn
{
VaR Col: Maid = new maid ();
Col. headertext = coldata. Name;
Col. datafield = string (coldata. ID );
VaR Cf: classfactory = new classfactory (matrixitemrenderer );
Cf. properties = {datafield: Col. datafield };
Col. itemrenderer = CF;
Return Col;
}

/**
* Convert the interface data to the data format requested from the server
*/
Public Function getresult (): Array
{
VaR result: array = [];
If (dataprovider! = NULL)
{
For each (VAR row: object in dataprovider)
{
VaR rowid: Int = int (row. rowid );
For (var key: object in row)
{
If (key! = 'Rowid' & Key! = 'Name ')
{
VaR colid: Int = int (key );
VaR value: Boolean = Boolean (row [Key]);
If (colid> 0 & value)
{
Result. Push ({rowid: rowid, colid: colid, value: Value });
}
}
}
}
}
Return result;
}

/**
* Parses the data returned by the server into the data displayed in the DataGrid.
*/
Private function parse (SRC: Object): arraycollection
{
VaR result: arraycollection = new arraycollection ();
For each (VAR row: object in SRC. Rows)
{
VaR item: Object = {rowid: Row. ID, label: Row. name };
For each (VAR Col: object in SRC. columns)
Item [col. ID] = getitemvalue (SRC, row. ID, col. ID );
Result. additem (item );
}
Return result;
}

Private function getitemvalue (SRC: object, rowid: int, colid: INT): Boolean
{
For each (VAR item: object in SRC. Items)
{
If (item. rowid = rowid & item. colid = colid & item. value)
Return true;
}
Return false;
}
}
}

Import flash. Events .*;
Import MX. containers .*;
Import MX. Controls .*;

Class matrixitemrenderer extends hbox
{
Public Function matrixitemrenderer ()
{
Setstyle ('borderstyle', 'None ');
Setstyle ('horizontalalign ', 'center ');
_ Chk = new checkbox ();
_ Chk. addeventlistener (event. Change, onchange );
Addchild (_ CHK );
}

Public override function set data (value: Object): void
{
Super. Data = value;
If (datafield! = NULL & datafield in value)
{
VaR fieldvalue: Boolean = Boolean (value [datafield]);
_ Chk. Selected = fieldvalue;
}
}

Private function onchange (Event: Event): void
{
If (datafield! = NULL & Data! = NULL)
Data [datafield] = _ chk. selected;
}

Private VaR _ chk: checkbox;

Public var datafield: string;
}

The code is long, but most of the code is simple data sorting. The most important thing is to dynamically generate classfactory:

VaR Cf: classfactory = new classfactory (matrixitemrenderer );
Cf. properties = {datafield: Col. datafield };
Col. itemrenderer = CF;

And get the corresponding column in itemrenderer:

Public override function set data (value: Object): void
{
Super. Data = value;
If (datafield! = NULL & datafield in value)
{
VaR fieldvalue: Boolean = Boolean (value [datafield]);
_ Chk. Selected = fieldvalue;
}
}

Public var datafield: string;

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.