2011-09-08 4 views
6

J'ai un composant DataGrid spark avec plusieurs colonnes et je souhaite que mon application affiche par défaut l'ordre décroissant sur la première colonne du DataGrid. Je voudrais utiliser le tri par défaut intégré qui se produit lorsque vous cliquez une fois sur l'en-tête supérieur. Je n'ai pas besoin de trier l'ArrayCollection avec lequel je travaille ou de changer ce que sont les comparateurs.Définition du tri par défaut de la colonne Spark DataGrid sur creationComplete de l'application (Flex 4.5)

Je souhaite également un tri généré par l'utilisateur, par exemple en cliquant sur l'en-tête d'une colonne différente pour remplacer le tri par défaut.

Est-ce que quelqu'un a des idées sur la façon de s'y prendre? Merci.

+0

Avec le DataGrid MX, je fournirais un tri par défaut en appliquant un tri par défaut à l'ArrayCollection; qui utilise peut ensuite changer en cliquant sur les en-têtes. J'aurais supposé que le Spark Grid soutiendrait la même approche. – JeffryHouser

Répondre

10

Il suffit d'utiliser la méthode sortByColumn:

var columnIndexes:Vector.<int> = Vector.<int>([ 0 ]); 
dataGrid.sortByColumns(columnIndexes, true); 

Voici un exemple complet:

DataGridSort.mxml

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    creationComplete="sortDataGrid();"> 

    <fx:Script> 
    <![CDATA[ 
     import mx.collections.ArrayCollection; 
     import mx.collections.ArrayList; 

     [Bindable] 
     private var dataProvider:ArrayCollection = new ArrayCollection(
     [ 
      new Product("iPad", "Detroit", 599), 
      new Product("iPod", "Burbank", 49), 
      new Product("iPod Nano", "Burbank", 39), 
      new Product("Flash Drive", "Burbank", 59), 
      new Product("iPod", "Burbank", 49), 
      new Product("Galaxy Tab", "Coldbridge", 499), 
      new Product("HTC Hero", "Abidjan", 700) 
     ]); 

     private function sortDataGrid():void 
     { 
      // you can also use Vector.<int>([ 0, 1 ]); to sort by first 2 columns 
      var columnIndexes:Vector.<int> = Vector.<int>([ 0 ]); 

      // set 2nd argument to true to show sorting triangle 
      dataGrid.sortByColumns(columnIndexes, true); 
     } 

    ]]> 
    </fx:Script> 

    <s:DataGrid id="dataGrid" horizontalCenter="0" verticalCenter="0" width="200" 
     dataProvider="{dataProvider}"> 
     <s:columns> 
      <s:ArrayCollection> 
       <s:GridColumn dataField="name"/> 
       <s:GridColumn dataField="location"/> 
       <s:GridColumn dataField="price"/> 
      </s:ArrayCollection> 
     </s:columns> 
    </s:DataGrid> 

</s:Application> 

Product.as

package 
{ 
import flash.events.EventDispatcher; 

public class Product extends EventDispatcher 
{ 

    public function Product(name:String = null, location:String = null, price:Number = 0) 
    { 
     super(); 

     this.name = name; 
     this.location = location; 
     this.price = price; 
    } 

    public var name:String; 

    public var location:String; 

    public var price:Number; 

} 
} 
+0

Merci! Ceci est exactement ce que je cherchais. – buddyp450

+0

Avez-vous de l'expérience avec le tri par défaut dans un '' - J'ai besoin de ce composant pour activer le groupement – powerMicha

0

Alternativement, si vous ne voulez pas que la grille de données effectue réellement le tri, par exemple lorsque vous traitez avec un système de radiomessagerie avec des éléments déjà triés. Étendez le DataGrid étincelle et ajoutez la méthode suivante:

public function PlaceSortIndicator(columnIndex:uint, descending:Boolean):void 
{ 
    if(columnIndex >= 0 && columns != null && columns.length > columnIndex) 
    { 
     var column:GridColumn = columns.getItemAt(columnIndex) as GridColumn; 
     if(column != null) 
     { 
      column.sortDescending = descending; 
      if (columnHeaderGroup) 
       columnHeaderGroup.visibleSortIndicatorIndices = new <int>[columnIndex]; 
     } 
    } 
} 
Questions connexes