J'utilise AG Grid React. J'ai mille lignes de données. J'essaie de sélectionner une plage de lignes en fonction de leurs indices.
gridOptions.api.forEachNode(node => {
if (node.childIndex >= startIndex && node.childIndex < endIndex) {
node.setSelected(true)
}
});
Cela s'avère être très triste et prend généralement 30 secondes sur l'interface utilisateur. On dirait que setSelected déclenche plusieurs cycles de rendu. Quelle est la bonne façon de procéder?
3 Réponses :
Vous pouvez essayer d'utiliser la pagination pour charger le bloc de données qui contient toutes les données. Documents de pagination
La pagination peut ne pas aider car la taille de page minimale pourrait être d'environ 100 et ce problème est important même avec 20 à 30 lignes.
Assurez-vous que vous ne vous êtes pas abonné à des événements susceptibles de ralentir votre code, par exemple onRowSelected, onSelectionChanged. Ceux-ci sont déclenchés pour chaque
node.setSelected (vrai)
Si vous avez l'un de ces événements souscrits, une façon possible de résoudre ce problème est de vous désabonner avant la boucle, puis de vous réinscrire après la boucle.
De plus, selon votre cas d'utilisation, vous voudrez peut-être utiliser
forEachNodeAfterFilter (nœud)
pour ne boucler que sur les nœuds visibles au lieu de
forEachNode (nœud)
J'ai essayé forEachNodeAfterFilter - des résultats similaires. Je dois quelque chose avec les événements, c'est pourquoi il ne sert à rien de souscrire après la sélection.
Le problème est que - setSelected (newValue) distribue les événements. Lorsque nous le faisons dans une boucle pour mille éléments ( disons ) - il y a mille événements, mille demandes en file d'attente pour une mise à jour asynchrone dans React qui peut être expliquée tout le retard.
Je l'ai corrigé en utilisant une autre version de setSelected - setSelected (newValue, clearSelection, suppressFinishActions) . Malheureusement, cela n'est pas écrit dans la documentation officielle.
L'idée est d'utiliser cette version pour toutes les sélections sauf la dernière , afin que toutes les expéditions d'événements soient supprimées et d'utiliser la sélection normale que nous utilisons depuis toujours pour sélectionner le dernier élément afin qu'il déclenche également nécessaire événements pour que onRowSelected , onSelectionChanged , etc. pour fonctionner normalement.
this.api.forEachNodeAfterFilter(node => {
if (node.childIndex >= startIndex && node.childIndex < endIndex) {
selectedNodes.push(node);
}
});
if (selectedNodes.length > 0) {
// setSelected re-renders every time so use suppressFinishActions except last one
for (let i = 0; i < selectedNodes.length - 1; i++) {
selectedNodes[i].setSelected(true, false, true);
}
selectedNodes[selectedNodes.length - 1].setSelected(true);
}
@Dominic Est-ce utile dans votre cas?
Comment faire cela pour le modèle de ligne côté serveur?
AG est juste lent, votre code n'est pas faux. Assurez-vous de ne pas désactiver la virtualisation car cela semble lent, même pour AG. J'avais environ 700 articles et j'ai pris quelques secondes, ce qui semblait mauvais.