2017-09-27 15 views
0

J'utilise angularjs et j'ai une liste de cases à cocher dont j'ai besoin pour filtrer mon ag-grid.Est-ce que ag-grid a une API pour filtrer plusieurs valeurs de checkbox?

Cela fonctionne très bien en utilisant des boutons radio et en appelant api.setQuickFilter avec la valeur individuelle. Cependant, je ne vois pas de moyen de permettre plusieurs 'filtres' (c'est-à-dire les valeurs de cases à cocher stockées dans un tableau) pour fonctionner avec setQuickFilter. Y a-t-il une autre méthode que je devrais utiliser pour accomplir ceci?

Exemple:
[case] Pomme
[case] Bee
[checkbox] Cheerios

cochant la case Apple et Cheerios en même temps doit retourner une grille filtrée pour que les lignes montrent que contiennent le mot "Apple" OU "Cheerios".

Répondre

1

Par support d'aggrille, ceci n'est pas possible hors de la boîte - ce qui contredit certains des exemples (quoique non fonctionnels) trouvés sur la page de documentation d'ag-grid (voir https://www.ag-grid.com/javascript-grid-filtering/#.) Ils ont suggéré d'écrire une coutume fonction pour accomplir cela. Cependant, j'ai été capable de le faire fonctionner à travers une autre méthode.

Solution: J'ai pu filtrer les sélections en écrivant une fonction dans le contrôleur (qui recherche dans le tableau de grille et compare les éléments) pour recréer les données de la grille. Puis appelle setRowData avec le nouveau tableau filtré. J'ai fait les cases à cocher appeler cette fonction pour ajouter/supprimer les lignes affichées.

Voici ce que le code ressemble à:

HTML

<div class="checkboxFilter" ng-repeat="filterItemName in filterItem"> 
    <input type="checkbox" name="selectedCap[]" value="{{filterItemName}}" ng-checked="selection.indexOf(filterItemName) > -1" ng-click="$ctrl.chartData(filterItemName)" /> {{filterItemName}} 
</div> 

js

//defined elsewhere (i.e. $onLoad): 
this.$scope.filterItem = gridFilterArray; //(checkbox items) 
this.$scope.selection = []; 


chartData(value){ 

//****this portion from https://stackoverflow.com/questions/14514461/how-do-i-bind-to-list-of-checkbox-values-with-angularjs?rq=1 ***** 
    let idx = this.$scope.selection.indexOf(value); 

    // Is currently selected 
    if (idx > -1) { 
    this.$scope.selection.splice(idx, 1); 
    } 

    // Is newly selected 
    else { 
    this.$scope.selection.push(value); 
    } 
//******end 

    let filteredArray = []; 

    //create new array of data to display based on filtered checkboxes 
    for(let x = 0; x < this.arrayData.length; x++) { 
    for(let y = 0; y < this.$scope.selection.length; y++) { 
     if (this.$scope.selection[y] === this.arrayData[x].fieldToCheck) 
     filteredArray.push(this.arrayData[x]); 
    } 
    } 

    if(this.$scope.selection.length === 0) 
    this.$scope.gridOptions.api.setRowData(this.arrayData); 
    else 
    this.$scope.gridOptions.api.setRowData(filteredArray); 
}