Tri sur les données sous-jacentes dans ng-grille

Je souhaite afficher la valeur mise en forme dans un ng-cellule de la grille, mais en quelque sorte sur une valeur numérique ne s'affiche pas.

var myData1 = [{
 name: "Moroni",
  age: 50,
  ageWord: "Fifty"
}

À partir de l'exemple ci-dessus, je voudrais afficher le ageWord colonne, mais souhaitez faire le tri sur la colonne âge.

La docs pour le tri d'un ng-grille directive indiquent que je peux fournir une fonction personnalisée pour trier les données sous-jacentes:

sortFn

Définit la fonction de tri de la colonne. Utile lorsque vous avez des données qui est formaté d'une manière inhabituelle, ou si vous voulez de tri sur un sous-jacent type de données. Vérifiez le MDN sorte docs pour des exemples

la fonction de tri personnalisé reçoit l'affichage des valeurs de la colonne de tri est cliqué, mais je tiens à trier sur l'âge. Si j'avais la ligne disponible dans la fonction de tri j'ai pu trier sur le frère de la cellule, quelque chose comme ceci:

sortFn: function(a, b) {
    var ageA = a.getProperty('age');
    var ageB = b.getProperty('age');
    return ageA-ageB;
  }

Des suggestions comment je peux trier par " âge "lorsque le "ageWord' colonne est triée? Exemple sur plnkr.

InformationsquelleAutor Aaron Roller | 2013-12-20
  1. 13

    Vous devez définir votre colonne comme un objet et de définir votre cellTemplate. Ensuite, utilisez la propriété age dans votre sortFn (http://plnkr.co/edit/qmBsneZ3HmFRKSkjbBWU?p=preview):

    //main.js
var app = angular.module('myApp', ['ngGrid']);

app.controller('MyCtrl', function($scope) {
    //Notice age is now an object to be used with the cellTemplate
    var myData1 = [{name: "Moroni", age: {age: 50, ageWord: "Fifty"}},
                     {name: "Tiancum", age: {age: 43, ageWord: "Forty-Three"}},
                     {name: "Mildred", age: {age: 70, ageWord: "Seventy"}},
                     {name: "Jacob", age: {age: 27, ageWord: "Twenty-Seven"}}];


    $scope.gridOptions = { 
      data: 'gridData',
       columnDefs: [
        {field: 'name', displayName: 'Name'}, 
        {field:'age', 
         displayName:'Age',
         cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{COL_FIELD.ageWord}}</span></div>',
         sortFn: function (a, b) {
           //compare age property of the object
           if (a.age < b.age) {
             return -1;
           }
           else if (a.age > b.age) {
             return 1;
           }
           else {
             return 0;
           }
         }
       }]
    };

    $scope.gridData = myData1;

});

    Selon les docs, cellTemplate par défaut:

    <div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{COL_FIELD CUSTOM_FILTERS}}</span></div>

    Donc tout ce que vous devez faire est d'utiliser {{COL_FIELD.age}} et tous les filtres que vous pouvez (ou pas) ont.

    • A fonctionné à merveille et un changeur de jeu pour la façon dont j'ai été auparavant la préparation/l'affichage de mes données. Merci!
    InformationsquelleAutor Patrick
  2. 5

    Vous pouvez utiliser sortInfo dans votre gridOptions, comme ceci:

     $scope.gridOptions = { 
  data: 'gridData',
    columnDefs: [
      {field: 'name', displayName: 'Name'}, 
      {field:'ageWord', displayName: 'Age'}
    ],
    sortInfo: {
      fields: ['age'],
      directions: ['asc']
    }
};
    • sortInfo fournit le "premier" tri à première vue. "Définir un sortInfo objet pour spécifier un tri par défaut de l'état. "Il n'a pas d'incidence sur la colonne de tri, cliquez événement.
    InformationsquelleAutor Kabb5