Comment puis-je utiliser jQuery UI Sortable pour mettre à jour l'ordre de la base de données par glisser-déposer ?

Intégration de base de données avec jQuery UI Sortable

La fonction triable de jQuery UI permet aux utilisateurs de manipuler l'ordre des éléments, et la question se pose de savoir comment enregistrer ces changements dans un base de données.

Solution

jQuery UI Sortable inclut une méthode Serialize() intégrée qui rationalise ce processus. L'exemple suivant montre comment écrire l'ordre mis à jour dans une base de données lors du changement de position de l'élément :

$('#sortable').sortable({
  axis: 'y',
  update: function (event, ui) {
    var data = $(this).sortable('serialize');

    $.ajax({
      data: data,
      type: 'POST',
      url: '/your/url/here'
    });
  }
});

Méthode Serialize

La méthode Serialize() crée un tableau de les éléments triables, en utilisant leur attribut id. Ce tableau est ensuite transmis au backend à l'aide des fonctions $.post() ou $.ajax(), qui envoient une requête POST à ​​l'URL spécifiée.

Traitement backend

Sur le backend, la chaîne de requête POST peut être traitée pour extraire la nouvelle commande. Chaque identifiant d'élément correspond généralement à un identifiant de base de données, ce qui permet des mises à jour pratiques de la base de données.

Exemple de mise à jour de base de données en PHP :

$i = 0;

foreach ($_POST['item'] as $value) {
  // Execute statement:
  // UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value
  $i++;
}

En combinant la sérialisation de jQuery UI Sortable ( ) avec le traitement backend, vous pouvez facilement mettre en œuvre une manipulation dynamique des commandes et une synchronisation de la base de données, améliorant ainsi les interactions des utilisateurs avec vos applications basées sur une base de données.

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!