Chargement de défilement infini avec réact et grille AG

Cet article expliquera comment utiliser la grille AG dans un projet React pour obtenir des données de chargement de défilement infinies. En configurant la source de données du serveur d'Ag Grid, nous pouvons obtenir dynamiquement des données de l'API et les ajoutons aux données existantes lorsque l'utilisateur défile vers le bas du tableau, réalisant le chargement virtualisé et améliorant les performances de rendu des grands ensembles de données. L'article fournira des exemples de code détaillés pour aider les développeurs à démarrer rapidement et à fournir des considérations pour assurer le chargement des données et l'expérience utilisateur en douceur.

AG Grid est un puissant composant de fiche technique JavaScript qui prend en charge une variété de cadres, y compris React. Le défilement infini est une caractéristique importante fournie par AG Grid, ce qui nous permet de traiter efficacement de grandes quantités de données sans charger toutes les données au client à la fois.

Configurer la source de données du serveur d'Ag Grid

Pour atteindre le défilement infini, nous devons configurer la source de données du serveur de la grille AG. Cela implique la configuration de la source de données dans l'événement Gridready et la définition d'une fonction Getrows pour gérer l'acquisition de données.

Tout d'abord, dans la configuration de la grille AG, ajoutez le gestionnaire d'événements Gridready:

 <aggridget autres de configuration ongridready="{OnGridReady}"></aggridget>

Ensuite, définissez la fonction OnGridReady et définissez la source de données du serveur dans cette fonction:

 const OnGridReady = (params) => {
  const api = params.api;
  const getrows = (params) => {
    // Appelez votre API ici pour obtenir des données GetData (params)
      .Then (({data}) => {
        Params.SucCessCallback (Data, Data.Lastrow);
      })
      .Catch (() => params.failCallback ());
  };

  api.SetServerSideDataSource ({getrows});
};

Dans le code ci-dessus, API.SetServerSideDataSource ({Getrows}) connecte la grille AG à la source de données du serveur. La fonction Getrows est la clé, qui est responsable de l'appel de l'API lorsque la grille AG a besoin de plus de données.

Implémentez la fonction Getrows

La fonction Getrows reçoit un objet Params contenant des informations qui nous sont transmis par la grille AG, tels que les critères de tri et de filtrage, et la plage de données demandée. Nous devons utiliser ces informations pour appeler l'API et passer les données renvoyées à params.successCallback ou params.failCallback.

Voici un exemple de fonction Getrows:

 const getData = (params) => {
  // Simuler l'appel de l'API renvoie une nouvelle promesse ((résoudre, rejeter) => {
    setTimeout (() => {
      const startrow = params.request.startrow;
      const endrow = params.request.endRow;

      // Obtenez des données à partir de la base de données ou de l'API basée sur StarTrow et Endrow const data = génératedata (StarTrow, Endrow);

      // Supposons qu'il y ait 1000 enregistrements dans le const total lastrow = 1000;

      résolve ({data, lastrow});
    }, 500);
  });
};

const génératedata = (startrow, endrow) => {
    const data = [];
    pour (soit i = startrow; i <endrow i data.push nom: retourner les donn><p> Dans l'exemple ci-dessus, la fonction GetData simule un appel API qui génère des données basées sur les paramètres Startrow et Endrow. La variable Lastrow représente le nombre total de données.</p>
<p> Params.SuccessCallback (Data, Data.Lastrow) est utilisé pour informer AG que les données ont été récupérées avec succès. Les données sont le tableau de données récupéré et Data.Lastrow est le nombre total de lignes de données. Si l'appel API échoue, params.failCallback () est appelé.</p>
<h2> Choses à noter</h2>
<ul>
<li> <strong>Trier et filtrer:</strong> si votre grille AG est configurée avec le tri ou le filtrage, vous devez vous assurer que la fonction Getrows peut gérer ces conditions et les transmettre à l'API.</li>
<li> <strong>Gestion des erreurs:</strong> Dans la fonction Getrows, vous devez gérer correctement les erreurs qui peuvent se produire dans l'appel de l'API et l'appel Params.failCallback ().</li>
<li> <strong>Optimisation des performances:</strong> assurez-vous que l'API peut gérer efficacement les demandes de pagination et éviter les goulots d'étranglement des performances.</li>
<li> <strong>Cohérence des données:</strong> Dans un environnement multi-utilisateurs, les problèmes de cohérence des données doivent être pris en compte pour s'assurer que les données observées par les utilisateurs sont à jour.</li>
</ul>
<h2> Résumer</h2>
<p> En configurant la source de données du serveur d'Ag Grid, nous pouvons facilement implémenter le chargement de défilement infini des données, améliorant ainsi les performances de rendu sur de grands ensembles de données. Il est important de noter que vous devez vous assurer que la fonction Getrows peut gérer correctement le tri, le filtrage et les erreurs et optimiser les performances de l'API. J'espère que cet article vous aidera à mieux comprendre et utiliser la fonction de défilement infinie de la grille AG.</p></endrow>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!