Comment la méthode « serialize » de jQuery UI Sortable peut-elle être utilisée pour les mises à jour de bases de données ?

Comment utiliser jQuery UI Sortable pour gérer les mises à jour des commandes et de la base de données

Avec la capacité triable de jQuery UI, les utilisateurs peuvent établir et modifier l'ordre des éléments. Cela a soulevé la question de savoir comment traduire ces modifications en mises à jour de la base de données.

Solution :

jQuery UI fournit la méthode de sérialisation inestimable à cet effet. Il génère sans effort un tableau d'éléments, chacun représenté par son ID.

Voici un exemple complet qui distribue des données à une URL désignée lors du réarrangement des éléments :

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

        // Communicate with the server using $.post or $.ajax
        $.ajax({
            data: data,
            type: 'POST',
            url: '/your/url/here'
        });
    }
});

Ce code établit un triable list, déclenche un événement de mise à jour lorsque la position d'un élément change et rassemble les ID triés dans un tableau.

En général, les éléments ont leur base de données ID intégrés dans leurs attributs. La fonction de sérialisation produit une chaîne de requête POST ressemblant à item[]=1&item[]=2, en utilisant ces identifiants pour coder la commande.

Dans le domaine PHP, une simple boucle peut parcourir ce tableau reçu et effectuer des mises à jour de la base de données. en conséquence :

$i = 0;

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

Pour visualiser ce processus en action, explorez l'exemple sur jsFiddle.

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!