Comment intégrer jQuery UI Sortable à une base de données pour maintenir l'ordre ?

jQuery UI Sortable et intégration de bases de données

Avec jQuery UI Sortable, vous pouvez permettre aux utilisateurs de réorganiser les éléments et de maintenir un ordre spécifique. Pour intégrer cette fonctionnalité à votre base de données, vous pouvez exploiter la méthode de sérialisation en conjonction avec AJAX ou la soumission de formulaire.

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

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

En utilisant une structure HTML telle que :

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

La sérialisation La méthode générera une chaîne de requête telle que : item[]=1&item[]=2, où chaque valeur représente l'ID de l'élément réorganisé.

En supposant que les ID de votre base de données correspondent aux ID d'élément, vous pouvez ensuite parcourir le Données POSTées et mise à jour des enregistrements de base de données correspondants avec leurs nouvelles positions.

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

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

L'intégration de jQuery UI Sortable à une base de données vous permet de maintenir dynamiquement l'ordre des objets, fournissant une interface conviviale pour la commande et la persistance.

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!