Flex Advanceddatagrid Advanced Form Introduction Tutorial

The Advanceddatagrid control extends the functionality of the standard DataGrid control, adding data visualization capabilities to Adobe Flex applications. With these features, you have greater control over data display, data aggregation, and data format settings. The Advanceddatagrid control is similar to a List control, but it can display multiple columns of data, thus displaying objects with multiple properties.
The Advanceddatagrid control provides the following features:
Columns can have different widths or the same fixed width. The user can resize the column at run time. The columns that the user can reorder at run time. You can choose to customize the column headings. The ability to use a custom item renderer for any column to display data (not text).                  Supports sorting data by clicking on a column. The Advanceddatagrid control is designed to view data, not as a layout tool similar to an HTML table

Official Document Http://help.adobe.com/zh_CN/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7be0.html
Http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/mx/controls/AdvancedDataGrid.html



multiple sets of data can be displayed in a cell


table header across cells

Where the data source is "simpleflatdata.as" specific please see http://help.adobe.com/zh_CN/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7bf4.html
Copy Code <?xml version= "1.0"?> <!--dpcontrols/adg/columngroupadg.mxml to <s:application xmlns:fx= "http:/ /ns.adobe.com/mxml/2009 "    xmlns:mx=" library://ns.adobe.com/flex/mx "    xmlns:s=" Library://ns.adobe.com/flex/spark ">     <fx:Script>          <! [cdata[            import mx.collections.ArrayCollection;                               //Import The data used by the Advanceddatagrid control.             include "simpleflatdata.as";        ]]>     </fx:Script>     <mx: Advanceddatagrid id= "MYADG"         dataprovider= "{Dpflat}"        width=" 100% "height=" 100% ">          <mx:groupedColumns>             <mx: Advanceddatagridcolumn datafield= "Region"/>              <mx:advanceddatagridcolumn datafield= "Territory"/>              <mx:advanceddatagridcolumn datafield= "Territory_rep"                  headertext= "Territory Rep"/>              <mx:advanceddatagridcolumngroup headertext= "revenues" >                     <mx: Advanceddatagridcolumn datafield= "Actual"/>                  <mx:advanceddatagridcolumn datafield= "Estimate"/>              </mx:AdvancedDataGridColumnGroup>             </mx:groupedColumns>    </mx:AdvancedDataGrid> </s:application >
Click Play Flash


Sort by multiple criteria (multiple headers)
Click on the position of the right arrow like the head of the chart to sort by multiple criteria if you click on the left part of the header to reorder the first condition at this time the Sortexpertmode property is False
If you set the Sortexpertmode property to True, you need to hold down the CTRL key to click on the table header to implement multi-criteria ordering
If you want to disable sorting, set the Advanceddatagrid.sortablecolumns property to False

See the example of setting the Sortexpertmode property to True when you need to hold down the CTRL key to click on the table header to implement multi-conditional sorting
Copy Code <?xml version= "1.0"?> <!--dpcontrols/adg/simpleadg.mxml--<s:application xmlns:fx= "/http ns.adobe.com/mxml/2009 "    xmlns:mx=" library://ns.adobe.com/flex/mx "    xmlns:s=" Library://ns.adobe.com/flex/spark ">     <fx:Script>       <! [cdata[         import mx.collections.ArrayCollection;                              [Bindable]          private var DPADG: ArrayCollection = new ArrayCollection ([           {Artist: ') Pavement ', Album: ' Slanted and Enchanted ', price:11.99},             {Artist: ' Pavement ', Album: ' Brighten the corners ', price:11.99}, &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&Nbsp;   {Artist: ' saner ', Album: ' A child Once ', price:11.99},             {Artist: ' saner ', Album: ' Helium Wings ', price:12.99},             {Artist: ' The Doors ', Album: ' The Doors ', price:10.99},             {Artist: ' The Doors ', Album: ' Morrison Hotel ', price:12.99},             {Artist: ' Grateful Dead ', Album: ' American Beauty ', price:11.99},             {Artist: ' Grateful Dead ', Album: ' In the Dark ', price:11.99},             {Artist: ' Grateful Dead ', Album: ' Shakedown Street ', price:11.99},             {Artist: ' The Doors ', Album: ' Strange days ', price:12.99},            {Artist: ' The Doors ', Album: ' The Best of the Doors ', price:10.99}         ]);                         ]] >     </fx:Script>     <mx:advanceddatagrid          width= "100%" height= "100%"         sortexpertmode= "true"         dataprovider= "{DPADG}" >         <mx:columns>             <mx: Advanceddatagridcolumn datafield= "Artist"/>              <mx:advanceddatagridcolumn datafield= "Album"/>              <mx:advanceddatagridcolumn datafield= "Price"/>          </mx:columns>    </mx:AdvancedDataGrid>        </s:application >
Click Play Flash

Relative to the DataGrid component, Advanceddatagrid mainly has the following high-level: Multi-column Sort: Control-click the header of a column to achieve multi-column sorting. Custom row and column styles: by setting the row and column stylefunction point to a function to style the rows and columns to display hierarchical data: Displays a scalable number of navigation in the first column of the component to control the display of table rows. Create a multi-column grouping: Aggregates multiple columns under the same list header. Use the Unit renderer (renderers): Use the same renderer across multiple columns or use multiple renderers in one column.

multi-column sorting

By default, Advanceddatagrid displays data in the order in which the data is added to its dataprovider, and, like the DataGrid component, Advanceddatagrid allows you to sort the data after the data is displayed. The difference is that the DataGrid can only be sorted based on a single column, whereas Advanceddatagrid supports sorting based on multiple columns.

The following is an example of a multi-column sort:

<?xml version= "1.0"?> <mx:application xmlns:mx= "Http://www.adobe.com/2006/mxml" > <mx:Script> <!
                  
         [cdata[import mx.collections.ArrayCollection; [Bindable] private var dpadg:arraycollection = new ArrayCollection ([{Artist: ' Pavement ', Album: ' Slante D and Enchanted ', price:12.99}, {Artist: ' Pavement ', Album: ' Brighten the corners ', price:13.99}, {Art
           IST: ' Saner ', Album: ' A child Once ', price:14.99}, {Artist: ' saner ', Album: ' Helium Wings ', price:12.99}, {Artist: ' The Doors ', Album: ' The Doors ', price:10.99}, {Artist: ' The Doors ', Album: ' Morrison Hotel ', price:12.9 9}, {Artist: ' Grateful Dead ', Album: ' American Beauty ', price:11.99}, {Artist: ' Grateful Dead ', Album: ' In the Dark ', price:17.99}, {Artist: ' Grateful Dead ', Album: ' Shakedown Street ', price:13.99}, {Artist
      : ' The Doors ', Album: ' Strange days ', price:12.99},     {Artist: ' The Doors ', Album: ' The best of the Doors ', price:10.99}]);
        ]]> </mx:Script> <mx:advanceddatagrid width= "100%" height= "100%" dataprovider= "{DPADG}" > <mx:columns> <mx:advanceddatagridcolumn datafield= "Artist"/> <mx:advancedd Atagridcolumn datafield= "Album"/> <mx:advanceddatagridcolumn datafield= "Price"/> </mx:co Lumns> </mx:AdvancedDataGrid> </mx:Application>

Run the sample

To run the above example, sort by clicking any of the list headers of the Advanceddatagrid component to sort any column, such as clicking the list header of the artist column artist the column to sort in ascending order, and clicking again will sort by descending. Control-click any other column header, such as clicking the Price column header, to sort the price column in ascending order if the artist column is kept in descending order. Now you can find an artist's cheapest album. Click the Price column header again, and the price column will be sorted in descending order by pressing the control key and clicking any other column to add it to the sort criteria.

Custom row and column styles

To control the style of a row by using the callback (callback) function of the Advanceddatagrid component to customize the style of the table rows, To customize the style of a column using the Advanceddatagrid.stylefunction property, use the Advanceddatagridcolumn.stylefunction property to advanceddatagrid.stylefunction the specified return The function specified by the Advanceddatagridcolumn.stylefunction property is executed before the function is executed.

The callback function must have the following declaration:

Public Function Mystylefunction (data:object,column:superdatagridcolumn): Object

The function returns a complete object that contains the Stylename:value pairs used to represent the style settings, or null. StyleName is the name of the style property, such as color, while value is the value of the style property, such as 0x00ff00.

Advanceddatagrid calls the callback function when the display is updated, such as when the component is first drawn when the app starts, or when you call Invalidatelist () to refresh the display of all the rows of the component.

The example in this section uses a callback function to define the style of the Advanceddatagrid, and all the examples in this section use the data from the following styledata.as files:

[Bindable]
 private var dpadg:arraycollection = new ArrayCollection ([
   {Artist: ' Pavement ', Album: ' Slanted and Enchanted ', price : 12.99},
   {Artist: ' Pavement ', Album: ' Brighten the corners ', price:13.99},
   {Artist: ' saner ', Album: ' A child Once ', price:14.99},
   {Artist: ' saner ', Album: ' Helium Wings ', price:12.99},
   {Artist: ' The Doors ', Album: ' The Doors ', price:10.99},
   {Artist: ' The Doors ', Album: ' Morrison Hotel ', price:12.99},
   {Artist: ' Grateful Dead ', Album: ' American Beauty ', price:11.99},
   {Artist: ' Grateful Dead ', Album: ' In the Dark ', price:17.99},
   {Artist: ' Grateful Dead ', Album: ' Shakedown Street ', price:13.99},
   {Artist: ' The Doors ', Album: ' Strange days ', price:12.99},< C11/>{artist: ' The Doors ', Album: ' The best of the Doors ', price:10.99}
 ]);

Defining Row Styles

The following example uses the Advanceddatagrid.stylefunction property to specify a callback function to define the table row style. In this example, you can use the button control to select Artist in Advanceddatagrid.stylefunction, and then the callback function will highlight all selected rows in red.

<?xml version= "1.0"?> <mx:application xmlns:mx= "Http://www.adobe.com/2006/mxml" > <mx:Script> < !
   [cdata[import mx.collections.ArrayCollection;
   Import Mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
   Include the data for the Advanceddatagrid control.
   Include "styledata.as"//Artist name to highlight.
   protected Var artistname:string;
   Event handler to set the selected artist's name//based on the selected Button control.
    Public Function Setartistname (event:event): void {Artistname=button (event.currenttarget). label;
    Refresh row display.
   Myadg.invalidatelist ();
   }//Callback function that hightlights in red//All rows for the selected artist. 
    Public Function Mystylefunc (Data:object, Col:advanceddatagridcolumn): Object {if (data["Artist"] = = Artistname)
    return {color:0xff0000};
    Return NULL if the Artist name does not match.
   return null; }]]> &LT;/MX:SCRIPT&GT <mx:advanceddatagrid id= "MYADG" width= "100%" height= "100%" dataprovider= "{DPADG}" stylefunction= "MyStyleFunc" > <mx:columns> <mx:advanceddatagridcolumn datafield= "Artist"/> <mx:advanceddatagridcolumn Datafi eld= "Album"/> <mx:advanceddatagridcolumn datafield= "price"/> </mx:columns> </mx:advanceddatagrid > <mx:HBox> <mx:button label= "Pavement" click= "Setartistname (event);" /> <mx:button label= "saner" click= "Setartistname" (event); /> <mx:button label= "The Doors" click= "Setartistname" (event); /> </mx:HBox> </mx:Application>

Run the sample

Defining column Styles

The following example modifies the example of the previous section to define the row and column styles for Advanceddatagrid. In this example, all cells with a price less than $11.00 will be shown in green.

<?xml version= "1.0"?> <mx:application xmlns:mx= "Http://www.adobe.com/2006/mxml" > <mx:Script> < !
   [cdata[import mx.collections.ArrayCollection;
   Import Mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
   Include the data for the Advanceddatagrid control.
   Include "styledata.as"//Artist name to highlight.
   protected Var artistname:string;
   Event handler to set the selected artist's name//based on the selected Button control.
    Public Function Setartistname (event:event): void {Artistname=button (event.currenttarget). label;
    Refresh row display.
   Myadg.invalidatelist ();
   }//Callback function that hightlights in red//All rows for the selected artist. 
    Public Function Mystylefunc (Data:object, Col:advanceddatagridcolumn): Object {if (data["Artist"] = = Artistname)
    return {color:0xff0000};
    Return NULL if the Artist name does not match.
   return null; }//Callback function thAt hightlights in green//all entries in the Price column//with a value of less than $11.00.
     Public Function Mycolstylefunc (Data:object, Col:advanceddatagridcolumn): Object {if (data["price"] <= 11.00)
    return {COLOR:0X00FF00};
   return null;
  }]]> </mx:Script> <mx:advanceddatagrid id= "MYADG" width= "100%" height= "100%" dataprovider= "{DPADG}" stylefunction= "Mystylefunc" > <mx:columns> <mx:advanceddatagridcolumn datafield= "Artist"/> <mx:a Dvanceddatagridcolumn datafield= "Album"/> <mx:advanceddatagridcolumn datafield= "Price" styleFunction= "MyColS Tylefunc "/> </mx:columns> </mx:AdvancedDataGrid> <mx:HBox> <mx:button label=" Pavement "click = "Setartistname (event);" /> <mx:button label= "saner" click= "Setartistname" (event); /> <mx:button label= "The Doors" click= "Setartistname" (event); /> </mx:HBox> </mx:Application>

Run the sample

using a data formatter in a column (formatter)

Advanceddatagridcolumn has a formatter property that allows you to pass a formatter class to the column, or an instance of the formatter subclass. The formatter class can convert the data into a custom string. For example, you can use the Currencyformatter class to prefix the value of the price column with the dollar symbol ($).

The formatter class can be used with the callback function set by the Labelfunction property or the Stylefunction property, and if you specify a callback function, Flex calls the formatter class after the callback function value returns.

The following example modifies the example of a custom row style section in the Price column by adding a currency formatter to display the $ prefix before the prices:

<?xml version= "1.0"?> <mx:application xmlns:mx= "Http://www.adobe.com/2006/mxml" > <mx:Script> <!
   [cdata[import mx.collections.ArrayCollection;
   Import Mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
   Include the data for the Advanceddatagrid control.
   Include "styledata.as"//Artist name to highlight.
   protected Var artistname:string;
   Event handler to set the selected artist's name//based on the selected Button control.
    Public Function Setartistname (event:event): void {Artistname=button (event.currenttarget). label;
    Refresh row display.
   Myadg.invalidatelist ();
   }//Callback function that hightlights in red//All rows for the selected artist. 
    Public Function Mystylefunc (Data:object, Col:advanceddatagridcolumn): Object {if (data["Artist"] = = Artistname)
    return {color:0xff0000};
    Return NULL if the Artist name does not match.