Comment utiliser la bibliothèque triable pour implémenter le tri glisser-déposer des colonnes de table sans modifier l'ordre des lignes?

Utilisez la bibliothèque triable pour implémenter la commande de glisser-déposer des colonnes de table, en gardant les lignes inchangées

Lorsque de nombreux développeurs utilisent la bibliothèque triable pour le tri-glisser-déposer, ils doivent implémenter la fonction du tri-glisser-glisser des colonnes tout en gardant les lignes inchangées. Cet article expliquera en détail comment utiliser la bibliothèque triable pour implémenter cette fonction.

Description du problème:

En supposant que les données de table sont stockées dans un tableau bidimensionnel, l'objectif est d'implémenter le tri glisser-déposer des colonnes, telles que le déplacement de la colonne "Value11" à la position de la colonne "Value22". L'effet final est que les deux colonnes sont échangées, mais les données de ligne restent inchangées. (L'exemple d'image est omis ici)

Solution:

L'idée principale consiste à utiliser la bibliothèque triable pour trier les index de colonne, puis à réintégrer les données tabulaires en fonction du nouvel ordre d'index. La bibliothèque triable fonctionne sur l'ordre des éléments du tableau. Nous ne fonctionnons pas directement sur des éléments de tableau de déplacement de peu, mais utilisons les résultats de tri index qu'il fournit pour réorganiser les données.

Supposons que votre structure de données soit la suivante:

 Laissez les données = [
  ['Value11', 'Value12', 'Value13'],
  ['Value21', 'Value22', 'Value23'],
  ['Value31', 'Value32', 'Value33']
]]

Après avoir utilisé la bibliothèque triable, supposons que vous obtenez la nouvelle commande d'index de colonne:

 Soit NewOrder = [1, 0, 2]; // la nouvelle commande renvoyée par triable signifie que la deuxième colonne est maintenant en premier lieu

Reconstruisez les données de la table selon newOrder :

 Laissez newData = data.map (row => row.map ((_, index) => row [newOrder [index]]));

newData contient désormais les données de colonne réorganisées, et vous pouvez réintégrer le tableau avec newData . N'oubliez pas que les index du tableau commencent à 0 et que une table peut être nécessaire d'être ajoutée à 1 lors de l'affichage. La bibliothèque triable n'est responsable que du tri des index et la réorganisation des données doit être effectuée manuellement en fonction de l'ordre d'index fourni par Triable.

De cette façon, vous pouvez utiliser la fonction de glisser-déposer de la bibliothèque triable pour réaliser le tri des colonnes de table tout en gardant l'ordre de ligne inchangé, atteignant ainsi les résultats attendus. La clé est de comprendre que la bibliothèque triable fonctionne sur les index, pas les données elle-même, et les développeurs doivent reconstruire des données en fonction de l'index.

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!