ag-grid-community: Modèle Infinite Row pour la pagination côté serveur, version gratuite pour la communauté agGrid -Ne fonctionne pas comme la pagination côté serveur
J'ai passé suffisamment de temps là-dessus pour comprendre et mettre en œuvre, mais il semble que la documentation n'est pas écrite très clairement ou que je ne comprends pas quelque chose de base.
En utilisant ag-grid-community 22.1.1, ne peut pas changer beaucoup de code backend, donc les suggestions de modifications sur le backend ne fonctionneraient pas. La meilleure option que j'ai pu voir est le modèle de lignes infinies, comme ils l'ont expliqué. documentation officielle d'ag-grid
Comme sur l'image ci-dessus, si mon API backend est lente et renvoie les données lentement, ce que je ne peux pas aider, car elle appelle à son tour une API externe en dehors de mon contrôle renvoie des réponses lentes.
- Grid appelle l'API backend qui renvoie 500 enregistrements en 200 secondes.
- L'utilisateur doit attendre plus de 3 minutes pour voir les données à l'écran.
- Sur la base du modèle de lignes infinies, je pensais qu'après la mise en œuvre, si la valeur
cacheBlockSizeétait de 50, je pourrais demander au serveur d'envoyer 50 enregistrements et la réponse pour voir les données sur la grille sera plus rapide et lorsque vous cliquerez ensuite dessus, elle récupérera les 50 prochaines et l'heure de chaque bloc être 20 secondes . - Mais cela ne fonctionne pas comme ça, l'appel HTTP backend attend que tous les enregistrements reviennent et ensuite seulement il commence le rendu de la grille et affiche tout résultat, il faut donc encore attendre 200 secondes pour voir les données. Alors, quel est l'intérêt d'appeler ce défilement infini côté serveur?
- De plus, mon implémentation est correcte car je pouvais voir le curseur se déplacer dans les outils de développement chrome de 0 à 50 pour la première fois, puis de 50 à 100
Réponses
Vous avez écrit que vous ne pouvez pas changer beaucoup de code backend, donc je ne suis pas sûr que vous puissiez faire quelque chose comme ça, mais vous devrez définir un datasourceobjet avec getRows()au moins un. Ce rappel sera appelé chaque fois que la grille essaiera de récupérer de nouvelles lignes du serveur, et il prend les paramètres vus ici .
Lorsque ce rappel se déclenche, vous devrez appeler votre Promisefonction qui récupère vos données avec le params.startRowparamètre, et le params.endRowou le cacheBlockSizequi vaut 50 comme vous le dites.
Si la récupération réussit, vous appelez alors successCallback(rowsRetrievedOnThisFetch, lastRow), où lastRowest l'index de la dernière ligne de vos données si toutes vos données sont dans la grille . Sinon toutes les données sont encore dans la grille, jeu lastRowégal à undefined, nullou -1.
Plus tard, lorsque les 500 lignes sont chargées, vous pouvez définir lastRow = 500et appeler successCallback(rowsRetrievedOnThisFetch, 500).
Cela fonctionne si vous pouvez récupérer les données par blocs plutôt que toutes en même temps. Chaque fois que vous appelez la fonction fetch, vous devrez spécifier la plage de lignes que vous souhaitez extraire de la base de données. Mais vous ne pouvez le faire que si votre API le prend en charge.
De plus, lors de l'utilisation du modèle de lignes infinies, la grille ne filtre ni ne trie les lignes seule. Vous devrez passer params.filterModelet params.sortModelrespectivement dans votre requête lors du getRows()déclenchement si vous souhaitez utiliser le filtrage et le tri côté serveur.
METTRE À JOUR
Jetez un œil à cet exemple: https://plnkr.co/edit/pqBAS1cnjKiBoqeQ. Il charge 500 lignes par lots de 50. Chaque fois que vous faites défiler vers le bas, les 50 lignes suivantes sont chargées jusqu'à ce que les 500 soient toutes dans la grille.