1
votes

Angulaire 5: Masquer les lignes de la grille en fonction de la condition

J'ai la réponse ci-dessous du service, chaque fois que le drapeau est vrai, je dois masquer la ligne entière (au total 20 colonnes que j'ai) sinon le montrer. Comment puis-je réaliser cela dans ag-grid?

this.filterOptions = {
  useExternalFilter: true
};

this.gridOptions = {
  filterOptions:  this.filterOptions
 };

J'ai essayé le useExternalFilter comme ci-dessous, puis je suis resté bloqué sur la façon d'utiliser ce useExternalFilter plus loin. Quelqu'un peut-il me guider.

data = {
    name: "A",
    flag: true
   },
   {
    name: "B",
    flag: false
   },
   {
    name: "C",
    flag: false
   }

angular ag-grid ag-grid-angular

0 commentaires

4 Réponses :

0
votes

Le moyen le plus simple de le faire est de filtrer d'abord vos données en fonction de la valeur de l'indicateur

this.gridOptions.setRowData(this.filteredData);

Ensuite, définissez ce filteredData comme données de grille

const filteredData = this.data.filter(item => !item.flag);

J'espère que cela fera le nécessaire

0 commentaires

0
votes

Même si nous pouvons utiliser api.setRowData (newData) pour mettre à jour / supprimer explicitement vos données, cette méthode réinitialise essentiellement votre grille entière. Selon la documentation , cela donne ce qui suit:

la grille supprime toutes les sélections et filtres précédents, et écrase les anciennes données par les nouvelles. C'était la première façon dont la grille a fonctionné et est le moyen le plus «brutal».

En tant que tel, je vous recommande d'utiliser plutôt transaction.remove . Selon la documentation , vous pouvez soit fournir rowNodeId pour supprimer les lignes, ou nous pouvons supprimer les lignes en utilisant les lignes basées sur la référence d'objet.

Cette méthode est préférée, comme

La grille conserve tout le tri, le regroupement et le filtrage actifs, y compris mise à jour pour refléter les changements dans les données en cas de tri, le regroupement ou le filtrage soit affecté.

Premièrement, nous pouvons obtenir la liste des objets qui doivent être supprimés. Ensuite, nous utilisons api.updateRowData (transaction) pour effectuer la transaction afin de mettre à jour les données de ligne de telle sorte que ces lignes soient supprimées.

const removeData = this.data.filter(item => item.flag);
this.gridApi.updateRowData({ remove: removeData });

J'ai créé une une démo fonctionnelle pour illustrer le comportement ci-dessus.

1 commentaires

@DilaniAlwis Votre réponse est correcte à 100% :) Je propose simplement une solution alternative.

3
votes

ce que vous voulez, c'est ceci:

this.gridOptions = {
  // is always present, so return true
  isExternalFilterPresent: function() { 
    return true; 
  },

  // return true if flag=true
  doesExternalFilterPass: function(rowNode) { 
    return rowNode.data.flag; 
  }
};

voir ag-Grid Docs pour plus de détails

0 commentaires

0
votes

Si vous souhaitez filtrer plus dynamiquement, vous pouvez utiliser la méthode de liaison

this.gridOptions = {
  // is always present, so return true
  isExternalFilterPresent: function() { 
    return true;
  }
}

ngOnInit() {
  this.gridOptions.doesExternalFilterPass = this.isVisible.bind(this)
}

isVisible(rowNode): boolean {
  // Write your logic. You can use rowNode and all component valiables.
}

0 commentaires