Comment conserver les modifications apportées avec jQuery UI triables dans une base de données ?

JQuery UI Sortable : conserver les modifications d'ordre dans une base de données

Lorsque vous utilisez la fonction triable de jQuery UI pour permettre aux utilisateurs de réorganiser des éléments, il est souvent Il est souhaitable de sauvegarder la nouvelle commande dans une base de données. Voici comment y parvenir :

La fonctionnalité triable de jQuery UI fournit une méthode de sérialisation à cet effet. Il crée un tableau d'éléments en utilisant leurs identifiants. Par exemple, une liste comme celle-ci :

<code class="html"><ul id="sortable">
  <li id="item-1"></li>
  <li id="item-2"></li>
  ...
</ul></code>

Lorsque la méthode Serialize est déclenchée, elle produit une chaîne de requête POST comme celle-ci :

item[]=1&item[]=2

En supposant que l'ID de chaque élément correspond à la base de données ID, vous pouvez parcourir le tableau POST et mettre à jour les positions des éléments dans la base de données.

Voici un exemple en PHP :

<code class="php">$i = 0;

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

Pour lancer la sérialisation et la mise à jour de la commande en cas de changement, utilisez ce code jQuery :

<code class="javascript">$('#element').sortable({
  axis: 'y',
  update: function (event, ui) {
    var data = $(this).sortable('serialize');

    // POST to server using $.post or $.ajax
    $.ajax({
      data: data,
      type: 'POST',
      url: '/your/url/here'
    });
  }
});</code>

Ce code crée une requête POST avec la commande mise à jour et l'envoie à l'URL spécifiée.

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!