Filtrage de la grille de l'interface utilisateur unique + filtre de la cellule

Question

J'ai implémenté le filtre unique avec la grille ui comme indiqué dans doc. http://ui-grid.info/docs/#/tutorial/321_singleFilter

Mais j'ai un cellFilter et quand je filtre, il filtre les données, pas les données rendues avec le filtre. Ce qui est mauvais pour l'utilisateur final. Par exemple, sur ce plunker, j'aimerais filtrer les entrées «mâles» ou «femelles».

http://plnkr.co/edit/TNJSlc0QkBI8Tu2Jejam?p=preview

var app = angular.module('app', ['ngTouch', 'ui.grid']); 

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { 
    var today = new Date(); 
    $scope.gridOptions = { 
    enableFiltering: false, 
    onRegisterApi: function(gridApi){ 
     $scope.gridApi = gridApi; 
     $scope.gridApi.grid.registerRowsProcessor($scope.singleFilter, 200); 
    }, 
    columnDefs: [ 
     { field: 'name' }, 
     { field: 'gender', cellFilter: 'mapGender' }, 
     { field: 'company' }, 
     { field: 'email' }, 
     { field: 'phone' }, 
     { field: 'age' }, 
     { field: 'mixedDate' } 
    ] 
    }; 

    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json') 
    .success(function(data) { 
     $scope.gridOptions.data = data; 
     $scope.gridOptions.data[0].age = -5; 

     data.forEach(function addDates(row, index){ 
     row.mixedDate = new Date(); 
     row.mixedDate.setDate(today.getDate() + (index % 14)); 
     row.gender = row.gender==='male' ? '1' : '2'; 
     }); 
    }); 

    $scope.filter = function() { 
    $scope.gridApi.grid.refresh(); 
    }; 

    $scope.singleFilter = function(renderableRows){ 
    var matcher = new RegExp($scope.filterValue); 
    renderableRows.forEach(function(row) { 
     var match = false; 
     [ 'name', 'company', 'email', 'gender' ].forEach(function(field){ 
     //row.entity[field] for gender col is 1 or 2 instead of male or female 
     if (row.entity[field].match(matcher)){ 
      match = true; 
     } 
     }); 
     if (!match){ 
     row.visible = false; 
     } 
    }); 
    return renderableRows; 
    }; 
}]) 
.filter('mapGender', function() { 
    var genderHash = { 
    1: 'male', 
    2: 'female' 
    }; 

    return function(input) { 
    if (!input){ 
     return ''; 
    } else { 
     return genderHash[input]; 
    } 
    }; 
}); 

Answer 1

Il y a une option pour les cellules appelées filterCellFiltered, que vous pouvez appliquer à vos columnDefs:

{ field: 'gender', cellFilter: 'mapGender', filterCellFiltered: true }, 

uiGrid ensuite appliquer la cellFilter avant d'appliquer les filtres "recherche". Malheureusement, cette option ne fonctionne que pour columnFilters. Mais nous pouvons toujours l'utiliser dans notre code singleFilter pour vérifier si nous voulons correspondre à la valeur normale ou filtrée.

Je ne sais pas si cela est la meilleure façon de le faire, mais voici ma solution:

$scope.singleFilter = function(renderableRows){ 
    var matcher = new RegExp($scope.filterValue); 
    renderableRows.forEach(function(row) { 
     var match = false; 
     row.grid.columns.forEach(function(column){ 

     // get the filtered value, if filterCellFiltered option is set  
     var value; 
     if (column.filterCellFiltered){ 
      value = row.grid.getCellDisplayValue(row, column); 
     } else { 
      value = row.grid.getCellValue(row, column); 
     } 

     if (value.toString().match(matcher)){ 
      match = true; 
     } 
     }); 

     if (!match){ 
     row.visible = false; 
     } 
    }); 
    return renderableRows; 
    };