web-dev-qa-db-fra.com

Comment mettre à jour/actualiser la grille après la suppression d'une ligne?

J'ai une grille ag où j'essaie de supprimer une ligne ... Je suis en mesure de supprimer la ligne de la source de données en utilisant la technique "splice", après cela, je veux actualiser le tableau code que j'utilise pour supprimer une ligne

selectedvalue={} //this holds the selected row value
rowData=[]; //this holds all the row data
onRowSelected(event) {
  this.selectedvalue = event;
 }
deletebtn() {
    for (let i = 0; i < this.rowData.length; i++) {
        if (this.selectedvalue.node.data.make === this.rowData[i].make) {
            this.rowData.splice(i, 1);
            this.gridOptions.api.refreshView();
        }
    }
}

Cela montre erroe quelque chose comme ceci -> Impossible de lire la propriété 'refreshView' de non définie ... Comment peut-on voir les modifications apportées dans la table après la suppression d'une ligne?.

angularag-grid
10
Raja Reddy

Vous devez redéfinir les lignes dans la grille: Après votre épissure:

gridOptions.api.setRowData(gridOptions.rowData)

Peut-être que ce plunkr aide https://plnkr.co/0k4sYa

L'auteur de ag-grid explique cela dans le forum ag-grid

22
Moises Sacal

Pour de meilleures performances, utilisez les appels API de grille pour ajouter/supprimer des lignes.
Pour insérer une ligne au début, c’est la copie d’une ligne sélectionnée:

var rowData = JSON.parse(JSON.stringify(selectedNode.data));
gridOptions.api.insertItemsAtIndex(0, [rowData]);

Pour supprimer une ligne sélectionnée:

var selectedNodes = gridOptions.api.getSelectedNodes();
gridOptions.api.removeItems(selectedNodes);

Veuillez insérer une nouvelle ligne uniquement après une copie complète de la ligne d'origine.
Sinon, api continue de faire référence à la même ligne.
Ainsi, la suppression ultérieure de la nouvelle ligne supprimera la ligne d'origine de la grille.

Veuillez vous référer à la documentation pour plus de détails sur les API.
https://www.ag-grid.com/javascript-grid-insert-remove/

5
user3294566

Il existe un moyen plus efficace décrit dans la documentation: ag-Grid Updating Data .

Vous devez utiliser la méthode api.updateRowData après la suppression des lignes:

this.gridOptions.api.updateRowData({ remove: [array of rows you have deleted]});

Par exemple avec une seule ligne supprimée:

this.gridOptions.api.updateRowData({ remove: [this.rowData[i]]})

Avec cette méthode, la grille mettra simplement à jour les lignes dans les paramètres et conservera tous les autres états d'affichage (ordre, ...).

3
A.Baudouin