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.

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

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

En utilisant une structure HTML telle que :

   

   

   ...

La méthode de sérialisation 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 votre base de données Les ID correspondent aux ID d'élément, vous pouvez ensuite parcourir les données POST et mettre à jour les enregistrements de base de données correspondants avec leurs nouvelles positions.

$i = 0;

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

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