Trier les numéros d'article avec point sur la collection de tableaux en flex

Question

J'ai besoin de commander un tableau d'articles par leurs numéros d'article sur une grille de données dans Flex 3.5.

Je n'ai pas vraiment besoin de le ré-ordonner une fois qu'il est dans la grille de données, j'ai juste besoin qu'il soit déjà trié sur la collection de tableaux avant de l'envoyer au fournisseur de données.

Mon problème est que le proprety « item_number » que je dois trier c'est une chaîne et il est construit avec le numéro de lot et un point, comme celui-ci:

1.1, 1.2, 1.3, 2.1 , 2.2, 3.1 , 3.2, 3.3, 3.4 , 3.5, 3.6, 3.7, 3.8, 3.9, 3.10, 3.11

J'ai besoin qu'il soit commandé comme ça.

Si j'essaie de les trier par numéro, 3.2 est plus grand que 3.11, donc ça ne marcherait pas. J'ai besoin de les ordonner d'abord par l'entier avant le point et seulement après, par l'entier après le point, avant de passer à l'entier suivant avant le point

J'ai aussi un autre problème. L'attribut item_number se trouve dans un objet situé dans un autre objet de ma collection de tableaux.

Pour arriver à ce que je dois:

array_collection.item.item_number

Donc, pour résumer, je dois énumérer un ensemble ordonné par un attribut qui est dans un autre objet de la arrayitem et il est un nombre sur une chaîne séparée par un point.

Ceci est une version simplifiée de mon code:

<mx:Script> 
<![CDATA[  
    public function print_data_grid(array_collection):void 
    { 
     my_data_grid.dataProvider = array_collection 
    } 
]]> 
</mx:Script> 

<mx:DataGrid id="my_data_grid"> 
<mx:columns> 
    <mx:DataGridColumn headerText="# Item"> 
     <mx:itemRenderer> 
      <mx:Component> 
       <mx:Label toolTip="{this.text}" text="{data.product.item_number}"/> 
      </mx:Component> 
     </mx:itemRenderer> 
    </mx:DataGridColumn> 

    <mx:DataGridColumn headerText="Item Name"> 
     <mx:itemRenderer> 
      <mx:Component> 
       <mx:Label toolTip="{this.text}" text="{data.product.name}"/> 
      </mx:Component> 
     </mx:itemRenderer> 
    </mx:DataGridColumn> 
</mx:columns> 
</mx:DataGrid> 

Answer 1

Vous pouvez écrire une fonction de tri personnalisé. Voici un exemple. S'il vous plaît vérifier si cela répond à vos besoins.

<?xml version="1.0"?> 
<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"> 
<fx:Script> 
<![CDATA[ 
    import mx.collections.ArrayCollection; 
    import mx.collections.Sort; 
    import mx.utils.ObjectUtil; 

    private var myArrayCollection:ArrayCollection = new ArrayCollection([ 
     {product: {item_number: "1.1", name: "A"}}, 
     {product: {item_number: "10.2", name: "Lottery"}}, 
     {product: {item_number: "10.11", name: "Book"}}, 
     {product: {item_number: "1.13", name: "DVD"}}, 
     {product: {item_number: "1.221", name: "Car"}}, 
     {product: {item_number: "1.211", name: "Mobile"}}, 
     {product: {item_number: "10.1111", name: "Laptop"}}, 
     {product: {item_number: "11.1", name: "Camera"}}, 
     {product: {item_number: "12.1", name: "Desktop"}}, 
     {product: {item_number: "144.41", name: "iPad"}}, 
     {product: {item_number: "14.21", name: "Tablet"}}, 
     {product: {item_number: "14.111", name: "Android phone"}}, 
     {product: {item_number: "10.1", name: "TV"}}, 
     {product: {item_number: "10.100", name: "Bulb"}}]); 

    private function createCopyOfArrayCollection():ArrayCollection 
    { 
     var copyOfArrayCollection:ArrayCollection = new ArrayCollection(); 
     for(var i = 0; i < myArrayCollection.length; i++) 
     { 
      copyOfArrayCollection.addItem(mx.utils.ObjectUtil.copy(myArrayCollection[i])); 
     } 
     return copyOfArrayCollection; 
    } 

    private function onButtonClick():void { 
     var copyOfArrayCollection:ArrayCollection = createCopyOfArrayCollection(); 
     var sort:Sort = new Sort(); 
     sort.compareFunction = sortFunction; 
     copyOfArrayCollection.sort = sort; 
     copyOfArrayCollection.refresh(); 
     print_data_grid(copyOfArrayCollection); 
    } 

    private function sortFunction(a:Object, b:Object, array:Array = null):int { 
     //assuming all item_number contains one decimal 
     var itemNumberA:String = a.product.item_number; 
     var itemNumberASplitArray:Array = itemNumberA.split(".", 2); 
     var itemNumberB:String = b.product.item_number; 
     var itemNumberBSplitArray:Array = itemNumberB.split(".", 2); 

     if (Number(itemNumberASplitArray[0]) == Number(itemNumberBSplitArray[0])) { 
      if (Number(itemNumberASplitArray[1]) == Number(itemNumberBSplitArray[1])) { 
       return 0; 
      } 
      else if (Number(itemNumberASplitArray[1]) > Number(itemNumberBSplitArray[1])) { 
       return 1; 
      } 
      else { 
       return -1; 
      } 
     } 
     else if (Number(itemNumberASplitArray[0]) > Number(itemNumberBSplitArray[0])) { 
      return 1; 
     } 
     else { 
      return -1; 
     } 
    } 

    public function print_data_grid(array_collection):void { 
     my_data_grid2.dataProvider = array_collection 
    } 
    ]]> 
</fx:Script> 
<mx:HBox verticalCenter="0" horizontalCenter="0"> 
    <mx:Panel title="Unsorted Data"> 
     <mx:DataGrid id="my_data_grid" dataProvider="{myArrayCollection}" height="400"> 
      <mx:columns> 
       <mx:DataGridColumn headerText="# Item"> 
        <mx:itemRenderer> 
         <fx:Component> 
          <mx:Label toolTip="{this.text}" text="{data.product.item_number}"/> 
         </fx:Component> 
        </mx:itemRenderer> 
       </mx:DataGridColumn> 

       <mx:DataGridColumn headerText="Item Name"> 
        <mx:itemRenderer> 
         <fx:Component> 
          <mx:Label toolTip="{this.text}" text="{data.product.name}"/> 
         </fx:Component> 
        </mx:itemRenderer> 
       </mx:DataGridColumn> 
      </mx:columns> 
     </mx:DataGrid> 
    </mx:Panel> 

    <mx:VBox height="100%"> 
     <mx:Spacer percentHeight="50"/> 
     <mx:Button label=">>- Show sorted data ->>" click="{onButtonClick()}"/> 
     <mx:Spacer percentHeight="50"/> 
    </mx:VBox> 
    <mx:Panel title="Sorted Data"> 
     <mx:DataGrid id="my_data_grid2" height="400"> 
      <mx:columns> 
       <mx:DataGridColumn headerText="# Item"> 
        <mx:itemRenderer> 
         <fx:Component> 
          <mx:Label toolTip="{this.text}" text="{data.product.item_number}"/> 
         </fx:Component> 
        </mx:itemRenderer> 
       </mx:DataGridColumn> 

       <mx:DataGridColumn headerText="Item Name"> 
        <mx:itemRenderer> 
         <fx:Component> 
          <mx:Label toolTip="{this.text}" text="{data.product.name}"/> 
         </fx:Component> 
        </mx:itemRenderer> 
       </mx:DataGridColumn> 
      </mx:columns> 
     </mx:DataGrid> 
    </mx:Panel> 
</mx:HBox> 

</s:Application>