jQuery UI triable, puis écrire l'ordre dans une base de données

Je souhaite utiliser la sortablefonction jQuery UI pour permettre aux utilisateurs de définir une commande puis, en cas de modification, de l'écrire dans la base de données et de la mettre à jour. Quelqu'un peut-il écrire un exemple sur la façon dont cela serait fait?

La fonctionnalité jQuery UI sortableinclut une serializeméthode pour ce faire. C'est assez simple, vraiment. Voici un exemple rapide qui envoie les données à l'URL spécifiée dès qu'un élément change de position.

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

Cela crée un tableau des éléments en utilisant les éléments id. Donc, je fais généralement quelque chose comme ça:

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

Lorsque vous utilisez l' serializeoption, cela créera une chaîne de requête POST comme celle-ci: item[]=1&item[]=2etc. Donc, si vous utilisez - par exemple - vos ID de base de données dans l' idattribut, vous pouvez alors simplement parcourir le tableau POSTed et mettre à jour les positions des éléments en conséquence .

Par exemple, en PHP:

$i = 0;

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

Exemple sur jsFiddle.

J'ai pensé que cela pourrait également aider. A) il a été conçu pour maintenir la charge utile à son minimum lors du renvoi au serveur, après chaque tri. (au lieu d'envoyer tous les éléments à chaque fois ou d'itérer à travers de nombreux éléments que le serveur pourrait rejeter) B) J'avais besoin de renvoyer un identifiant personnalisé sans compromettre l'identifiant / le nom de l'élément. Ce code obtiendra la liste du serveur asp.net, puis lors du tri, seules 2 valeurs seront renvoyées: l'id de base de données de l'élément trié et l'id de base de données de l'élément à côté duquel il a été déposé. Sur la base de ces 2 valeurs, le serveur peut facilement identifier la nouvelle position.

<div id="planlist" style="width:1000px">
    <ul style="width:1000px">
       <li plid="listId1"><a href="#pl-1">List 1</a></li>
       <li plid="listId2"><a href="#pl-2">List 1</a></li>
       <li plid="listId3"><a href="#pl-3">List 1</a></li>
       <li plid="listId4"><a href="#pl-4">List 1</a></li>
    </ul>
    <div id="pl-1"></div>
    <div id="pl-2"></div>
    <div id="pl-3"></div>
    <div id="pl-4"></div>
</div>
<script type="text/javascript" language="javascript">
    $(function () {
        var tabs = $("#planlist").tabs();
        tabs.find(".ui-tabs-nav").sortable({
            axis: "x",
            stop: function () {
                tabs.tabs("refresh");
            },
            update: function (event, ui) {
                //db id of the item sorted
                alert(ui.item.attr('plid'));
                //db id of the item next to which the dragged item was dropped
                alert(ui.item.prev().attr('plid'));

                //make ajax call
            }
        });
    });
</script>

Vous avez de la chance, j'utilise la chose exacte dans mon CMS

Lorsque vous souhaitez stocker la commande, appelez simplement la méthode JavaScript saveOrder(). Il fera une POSTrequête AJAX à saveorder.php, mais bien sûr, vous pouvez toujours le poster sous forme régulière.

<script type="text/javascript">
function saveOrder() {
    var articleorder="";
    $("#sortable li").each(function(i) {
        if (articleorder=='')
            articleorder = $(this).attr('data-article-id');
        else
            articleorder += "," + $(this).attr('data-article-id');
    });
            //articleorder now contains a comma separated list of the ID's of the articles in the correct order.
    $.post('/saveorder.php', { order: articleorder })
        .success(function(data) {
            alert('saved');
        })
        .error(function(data) { 
            alert('Error: ' + data); 
        }); 
}
</script>
<ul id="sortable">
<?php
//my way to get all the articles, but you should of course use your own method.
$articles = Page::Articles();
foreach($articles as $article) {
    ?>
    <li data-article-id='<?=$article->Id()?>'><?=$article->Title()?></li>
    <?
}               
?>   
</ul>
   <input type='button' value='Save order' onclick='saveOrder();'/>

Dans saveorder.php; N'oubliez pas que j'ai supprimé toutes les vérifications et vérifications.

<?php
$orderlist = explode(',', $_POST['order']);
foreach ($orderlist as $k=>$order) {
  echo 'Id for position ' . $k . ' = ' . $order . '<br>';
}     
?>

Ceci est mon exemple.

https://github.com/luisnicg/jQuery-Sortable-and-PHP

Vous devez attraper la commande dans l'événement de mise à jour

    $( "#sortable" ).sortable({
    placeholder: "ui-state-highlight",
    update: function( event, ui ) {
        var sorted = $( "#sortable" ).sortable( "serialize", { key: "sort" } );
        $.post( "form/order.php",{ 'choices[]': sorted});
    }
});

Je peux changer les lignes en suivant la réponse acceptée et l'exemple associé sur jsFiddle. Mais pour des raisons inconnues, je n'ai pas pu obtenir les identifiants après les actions "arrêter ou modifier". Mais l'exemple publié dans la page JQuery UI fonctionne très bien pour moi. Vous pouvez vérifier ce lien ici.

Essayez avec cette solution: http://phppot.com/php/sorting-mysql-row-order-using-jquery/ où la nouvelle commande est enregistrée dans un élément HMTL. Ensuite, vous soumettez le formulaire avec ces données à un script PHP, et le parcourez avec la boucle for.

Remarque: j'ai dû ajouter un autre champ db de type INT (11) qui est mis à jour (horodaté) à chaque itération - il sert au script de savoir quelle ligne est récemment mise à jour, sinon vous vous retrouvez avec des résultats brouillés.