Guide du tri JavaScript : tableaux, tables et glisser‑déposer avec SortableJS

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction

La fonctionnalité de tri basée sur JavaScript est extrêmement utile pour gérer dynamiquement les données dans les tableaux et les listes.
Dans cet article, nous expliquons de manière exhaustive tout, des fonctionnalités de tri natives de JavaScript aux implémentations intuitives de glisser‑déposer.

En lisant cet article, vous serez capable de :

• Comprendre comment trier des tableaux en utilisant les fonctionnalités standard de JavaScript.
• Implémenter une fonctionnalité de tri pour les tableaux HTML et les listes.
• Mettre en place un tri par glisser‑déposer avec SortableJS.
• Acquérir des compétences pratiques applicables à des projets réels grâce à des exemples et des cas d’utilisation.

Nous parcourrons chaque sujet étape par étape, alors suivez bien le guide et essayez d’implémenter les exemples vous‑même.

2. Comprendre les fonctionnalités de tri natives de JavaScript

2.1 Méthodes de tri de base

En JavaScript, vous pouvez trier facilement les données d’un tableau grâce aux fonctions de tri intégrées.
Cette section explique tout, de l’utilisation de base aux exemples avancés, avec des extraits de code complets.

Exemple de tri de chaînes

const fruits = ["banana", "apple", "orange", "grape"];
fruits.sort();
console.log(fruits); 
// Output: ["apple", "banana", "grape", "orange"]

Exemple de tri numérique

const numbers = [40, 100, 1, 5, 25, 10];
numbers.sort((a, b) => a - b); // Ascending order
console.log(numbers); 
// Output: [1, 5, 10, 25, 40, 100]

Lors du tri de nombres, il est important d’utiliser une fonction de comparaison.
Sans cela, les valeurs sont triées lexicalement (comme des chaînes), ce qui peut entraîner des résultats inattendus.

2.2 Exemples avancés utilisant des fonctions de comparaison personnalisées

Lors du tri de tableaux d’objets, vous pouvez trier en fonction d’une propriété spécifique.

Exemple de tri d’un tableau d’objets

const users = [
  { name: "Yamada", age: 30 },
  { name: "Tanaka", age: 25 },
  { name: "Suzuki", age: 35 }
];

// Sort by age
users.sort((a, b) => a.age - b.age);
console.log(users);
/* Output:
[
  { name: "Tanaka", age: 25 },
  { name: "Yamada", age: 30 },
  { name: "Suzuki", age: 35 }
]
*/

Comme le montre l’exemple ci‑dessus, l’utilisation d’une fonction de comparaison vous permet de mettre en œuvre une logique de tri hautement personnalisée.

2.3 Conseils d’optimisation des performances

Lorsque vous travaillez avec de grands ensembles de données, prenez en compte les points suivants :

1. Optimiser les fonctions de comparaison * Évitez les calculs lourds à l’intérieur des fonctions de comparaison.

2. Réduire la quantité de données à trier * Filtrez les données inutiles avant d’effectuer le tri.

3. Utiliser les Web Workers * Exécutez les opérations de tri en arrière‑plan pour améliorer les performances globales.

3. Exemple d’implémentation : tri d’un tableau HTML

3.1 Fonctionnalité de tri de tableau de base

Ici, nous implémenterons une fonctionnalité en JavaScript qui trie les données d’un tableau HTML en cliquant sur l’en‑tête d’une colonne.

Code HTML

<table id="data-table">
  <thead>
    <tr>
      <th onclick="sortTable(0)">Name</th>
      <th onclick="sortTable(1)">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Yamada</td><td>30</td></tr>
    <tr><td>Tanaka</td><td>25</td></tr>
    <tr><td>Suzuki</td><td>35</td></tr>
  </tbody>
</table>

Code JavaScript

function sortTable(columnIndex) {
  const table = document.getElementById("data-table");
  const rows = Array.from(table.rows).slice(1); // Exclude the header row

  rows.sort((rowA, rowB) => {
    const cellA = rowA.cells[columnIndex].innerText;
    const cellB = rowB.cells[columnIndex].innerText;

    // Detect whether values are numeric or strings, then sort accordingly
    return isNaN(cellA) || isNaN(cellB)
      ? cellA.localeCompare(cellB)
      : cellA - cellB;
  });

  // Re-render after sorting
  rows.forEach(row => table.tBodies[0].appendChild(row));
}

Il s’agit d’une implémentation simple qui vous permet de trier chaque colonne simplement en cliquant.

3.2 Exemple avancé combiné avec le filtrage

En combinant le tri avec le filtrage, vous pouvez également trier les résultats de recherche en temps réel.

Exemple de code JavaScript

document.getElementById("filter-input").addEventListener("input", (e) => {
  const filter = e.target.value.toLowerCase();
  const rows = document.querySelectorAll("#data-table tbody tr");

  rows.forEach(row => {
    const text = row.innerText.toLowerCase();
    row.style.display = text.includes(filter) ? "" : "none";
  });
});

Cela active une fonctionnalité permettant aux utilisateurs de rechercher et de trier les données en même temps.

4. Tri par glisser-déposer avec SortableJS

4.1 Qu’est-ce que SortableJS ?

SortableJS est une bibliothèque JavaScript qui facilite la mise en œuvre du réordonnancement par glisser-déposer pour les éléments HTML.
Elle possède les fonctionnalités suivantes :

• Interactions intuitives par glisser-déposer .
• Très personnalisable , et peut être appliquée aux listes et aux tableaux.
• Adaptée aux mobiles , supportant les opérations basées sur le toucher.
• Légère sans dépendances , offrant d’excellentes performances.

4.2 Installation et configuration de base pour SortableJS

4.2.1 Étapes d’installation

Utilisation d’un CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>

Utilisation de npm (pour un environnement Node.js)

npm install sortablejs

4.2.2 Configuration de base

À l’aide du code HTML et JavaScript suivant, vous pouvez implémenter le tri par glisser-déposer.

Code HTML

<ul id="sortable-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Code JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const list = document.getElementById("sortable-list");
  new Sortable(list, {
    animation: 150, // Animation speed (milliseconds)
    ghostClass: "sortable-ghost" // Class applied to the element while dragging
  });
});

CSS (Optionnel)

.sortable-ghost {
  opacity: 0.5;
  background: #f0f0f0;
}

4.3 Exemple avancé : Glisser-déposer entre plusieurs listes

Code HTML

<div>
  <ul id="list1">
    <li>Item A</li>
    <li>Item B</li>
  </ul>
  <ul id="list2">
    <li>Item C</li>
    <li>Item D</li>
  </ul>
</div>

Code JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const list1 = document.getElementById("list1");
  const list2 = document.getElementById("list2");

  new Sortable(list1, {
    group: "shared", // Set the group name
    animation: 150
  });

  new Sortable(list2, {
    group: "shared", // Use the same group name
    animation: 150
  });
});

5. Tableau de comparaison : Bibliothèques tierces vs Implémentation native

5.1 Tableau de comparaison

5.2 Quand l’implémentation native est le meilleur choix

Avantages

1. Aucune dépendance , donc aucune bibliothèque externe n’est requise.
2. Rapide à implémenter avec un code court, idéal pour les fonctionnalités de tri simples .
3. Hautes performances , adaptées même pour de grands ensembles de données.

Inconvénients

• Pas de support pour le glisser-déposer , nécessitant un travail supplémentaire pour l’interaction visuelle.
• La personnalisation avancée ou le support multi-listes nécessite une implémentation supplémentaire ou des bibliothèques .

Cas d’utilisation

• Lorsque vous devez trier des tableaux HTML statiques ou des tableaux .
• Projets qui priorisent les performances et une fonctionnalité minimale.

5.3 Quand SortableJS est le meilleur choix

Avantages

1. Glisser-déposer intégré pour une interaction visuelle intuitive.
2. Supporte le mouvement multi-listes et la synchronisation serveur .
3. Prêt pour mobile par défaut , incluant le support tactile.
4. Très personnalisable et bien adapté aux environnements de production.

Inconvénients

• Nécessite l’ajout d’une bibliothèque , augmentant légèrement la taille du projet.
• La complexité du code peut augmenter, entraînant un coût d’apprentissage plus élevé .
• Problèmes potentiels de dépendances ou de configuration dans certains environnements.

Cas d’utilisation

• Lorsque vous avez besoin de listes dynamiques ou de fonctionnalité de glisser-déposer .
• Designs d’UI qui nécessitent déplacer des éléments entre plusieurs listes ou sauvegarder l’ordre en temps réel .

6. Conseils de mise en œuvre et dépannage

6.1 Optimisation des performances

1. Gestion de grands ensembles de données

Le tri de grands ensembles de données peut entraîner une dégradation des performances.

Solutions

• Utiliser le défilement virtuel

  const visibleItems = items.slice(startIndex, endIndex);
  renderItems(visibleItems);
  

• Exploiter le traitement asynchrone Exécuter la logique de tri dans des Web Workers pour garder l’interface réactive.

2. Minimiser les opérations DOM

Le tri implique souvent des manipulations fréquentes du DOM, il est donc crucial de réduire les reflows inutiles.

Solution

• Utiliser DocumentFragment

  const fragment = document.createDocumentFragment();
  rows.forEach(row => fragment.appendChild(row));
  table.appendChild(fragment);
  

6.2 Améliorer l’accessibilité et la convivialité

1. Support de la navigation au clavier

Fournir des alternatives au clavier pour les utilisateurs qui ne peuvent pas utiliser le glisser‑déposer.

Solution

document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowUp') {
    moveItemUp();
  } else if (e.key === 'ArrowDown') {
    moveItemDown();
  }
});

2. Améliorations du retour visuel

Ajouter des repères visuels pour indiquer clairement les actions de tri.

Exemple CSS

.sortable-ghost {
  opacity: 0.5;
  border: 2px dashed #007BFF;
}

6.3 Guide de gestion des erreurs et de débogage

1. Erreur : le tri ne fonctionne pas

Cause 1 : Sélecteur incorrect

const list = document.getElementById("sortable-list");
if (!list) {
  console.error("Element not found. Please check the ID.");
}

Cause 2 : Conflits d’événements

list.removeEventListener('click', handler);

6.4 Liste de contrôle de dépannage

1. Vérifier les erreurs JavaScript dans la console

• Utilisez l’onglet Console des outils de développement pour identifier les problèmes.

1. Vérifier les formats de données

• Validez les structures de données utilisées dans le tri et la communication avec le serveur. 1. Confirmer les versions des bibliothèques

• Assurez-vous que toutes les bibliothèques et dépendances sont à jour.

7. Questions fréquemment posées (FAQ)

Q1 : Pourquoi la fonction de tri du tableau ne fonctionne-t-elle pas ?

R1 : Veuillez vérifier les points suivants.

1. Sélecteur incorrect

   const table = document.getElementById("data-table");
   

2. Faire la distinction entre nombres et chaînes

   rows.sort((a, b) => Number(a) - Number(b));
   

3. Conflits d’événements D’autres scripts JavaScript ou plugins peuvent attacher des événements aux mêmes éléments.

Q2 : Le glisser‑déposer ne répond pas. Que faire ?

R2 : Vérifiez les éléments suivants.

1. Confirmer que SortableJS est chargé

   console.log(Sortable);
   

2. Vérifier la structure HTML

   <ul id="sortable-list">
     <li>Item 1</li>
   </ul>
   

3. Vérifier les paramètres de prise en charge mobile

   new Sortable(list, {
     touchStartThreshold: 5
   });
   

4. Configuration de groupe incorrecte

   group: "shared"
   

Q3 : Comment enregistrer l’ordre trié sur le serveur ?

R3 : La synchronisation avec le serveur peut être facilement implémentée à l’aide d’AJAX.

Exemple JavaScript

const list = document.getElementById("sortable-list");
new Sortable(list, {
  animation: 150,
  onEnd: function () {
    const items = Array.from(list.children).map(item => item.innerText);
    fetch("/save-order", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ order: items })
    })
    .then(response => response.json())
    .then(data => console.log("Saved successfully:", data))
    .catch(error => console.error("Error:", error));
  }
});

Q4 : Comment améliorer les performances ?

R4 : Envisagez les approches suivantes.

1. Utiliser le défilement virtuel

   const visibleItems = items.slice(startIndex, endIndex);
   renderItems(visibleItems);
   

2. Utiliser les Web Workers Traiter les données en arrière‑plan pour améliorer la réactivité de l’interface.
3. Optimiser la logique de tri

   rows.sort((a, b) => a - b);
   

Q5 : Le tri peut-il être combiné avec des fonctionnalités supplémentaires ?

A5 : Oui, cela peut être facilement étendu comme indiqué ci-dessous.

1. Combine with real-time filtering
   Combiner avec un filtrage en temps réel

   document.getElementById("search").addEventListener("input", (e) => {
     const value = e.target.value.toLowerCase();
     document.querySelectorAll("#sortable-list li").forEach(item => {
       item.style.display = item.innerText.toLowerCase().includes(value) ? "" : "none";
     });
   });
   

2. Add and remove items dynamically
   Ajouter et supprimer des éléments dynamiquement

   function addItem(text) {
     const list = document.getElementById("sortable-list");
     const li = document.createElement("li");
     li.textContent = text;
     list.appendChild(li);
   }
   
   function removeItem(index) {
     const list = document.getElementById("sortable-list");
     list.removeChild(list.children[index]);
   }
   

8. Conclusion

8.1 Récapitulatif de l’article

1. Tri natif JavaScript

• Appris les techniques de tri de base en utilisant Array.prototype.sort() .
• Couvert le tri de tableaux d’objets avec des fonctions de comparaison et des stratégies d’optimisation des performances.

2. Tri de tableau HTML

• Présenté des exemples pratiques pour trier les données d’un tableau par colonne.
• Exploré des cas d’utilisation avancés combinés avec la fonctionnalité de filtrage.

3. Glisser‑déposer avec SortableJS

• Implémenté un tri par glisser‑déposer intuitif en utilisant SortableJS.
• Appris des approches flexibles incluant le déplacement multi‑listes et la synchronisation serveur.

4. Comparaison Natifs vs SortableJS

• Comparé les points forts et les cas d’utilisation pour aider à choisir la meilleure approche pour chaque projet.

5. Dépannage et FAQ

• Fournies des solutions aux problèmes courants et des conseils pour améliorer les performances et la fiabilité.

8.2 Prochaines étapes pratiques

La fonctionnalité de tri est un élément clé pour améliorer les interfaces dynamiques et la gestion des données.
Gardez les points suivants à l’esprit à mesure que vous progressez.

1. Commencez par des implémentations simples, puis explorez des cas d’utilisation avancés
2. Expérimentez la personnalisation du code
3. Maîtrisez la gestion des erreurs et les techniques de débogage
4. Améliorez continuellement les performances et l’utilisabilité

8.3 Passez à l’action

1. Essayez de le mettre en œuvre vous-même !

• Appliquez les exemples de code de cet article à vos propres projets et testez‑les en pratique.
• Partager votre code source sur GitHub et échanger des retours avec d’autres développeurs est également recommandé.

2. Continuez à améliorer vos compétences !

• Si vous souhaitez en savoir plus sur les fonctionnalités de tri, consultez les ressources officielles suivantes :
• Documentation officielle de SortableJS
• MDN Web Docs – Array.sort()

3. Consultez les articles associés

• Nous recommandons également des articles sur « Implémentation du filtrage JavaScript » et « Fondamentaux de la manipulation du DOM ».

8.4 Réflexions finales

La fonctionnalité de tri est essentielle pour organiser les données et améliorer l’expérience utilisateur.
Utilisez les techniques présentées dans cet article pour améliorer vos projets.

Si vous avez des questions sur la mise en œuvre de nouvelles fonctionnalités ou l’extension de ces exemples,
n’hésitez pas à nous contacter via la section des commentaires ou le formulaire de contact.

La prochaine étape est entre vos mains — commencez à expérimenter le code dès aujourd’hui !