Comment stocker l'ordre des éléments triables dans une base de données avec jQuery UI ?

JQuery UI Sortable : stockage de l'ordre dans une base de données

Lorsque vous travaillez avec des listes ordonnées ou d'autres éléments nécessitant une séquence réglable, l'interface utilisateur jQuery La fonctionnalité triable offre une solution simple mais efficace. Cette fonctionnalité permet aux utilisateurs de glisser-déposer des éléments pour déterminer leur ordre, et elle peut être intégrée à une base de données pour stocker de manière persistante ces modifications.

Pour implémenter cette fonctionnalité, jQuery UI propose la méthode de sérialisation dans les options Sortable. Voici un exemple qui envoie la commande mise à jour à une URL spécifiée :

$('#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'
        });
    }
});

Ce code exploite la méthode de sérialisation de Sortable pour créer un tableau d'éléments en utilisant leurs identifiants. La pratique courante consiste à attribuer des identifiants uniques à chaque élément triable :

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

Lorsque vous utilisez l'option de sérialisation, elle construit une chaîne de requête POST comme celle-ci : item[]=1&item[]=2 etc. En utilisant le ID en tant qu'ID de base de données, vous pouvez facilement parcourir le tableau POST et mettre à jour les positions des éléments en conséquence :

Par exemple, en utilisant PHP :

$i = 0;

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

Cette approche flexible de la gestion des commandes utilisant jQuery UI Sortable et l'intégration de la base de données permet aux utilisateurs d'ajuster et d'enregistrer dynamiquement les séquences souhaité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!