web-dev-qa-db-fra.com

jQuery UI Sortable, puis écriture de l'ordre dans une base de données

Je souhaite utiliser la fonction jQuery UI sortable pour permettre aux utilisateurs de définir un ordre, de le modifier, de l'écrire dans la base de données et de le mettre à jour. Quelqu'un peut-il écrire un exemple sur la façon dont cela serait fait?

phpjquerymysqljquery-uijquery-ui-sortable
119
Harry

L'interface utilisateur de jQuery sortable inclut une serialize méthode pour le 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 a changé 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 habituellement quelque chose comme ça:

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

Lorsque vous utilisez l'option serialize, il crée une chaîne de requête POST comme ceci: item[]=1&item[]=2 etc. Ainsi, si vous utilisez, par exemple, vos ID de base de données dans l'attribut id, Il suffit de parcourir le tableau POSTed et de 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.

212
Knelis

Je pensais que cela pourrait aussi aider. A) il a été conçu pour minimiser les charges utiles lors du renvoi au serveur, après chaque tri. (au lieu d'envoyer tous les éléments à chaque fois ou d'effectuer une itération parmi de nombreux éléments que le serveur pourrait jeter) B) Je devais 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 l'élément trié et l'identifiant de base de l'élément à côté duquel il a été supprimé. 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>
9
Kalpesh Popat

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

Lorsque vous souhaitez enregistrer la commande, appelez simplement la méthode JavaScript saveOrder(). Il fera une demande AJAX POST à saveorder.php, mais vous pourrez bien sûr toujours le poster comme un formulaire normal.

<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; Gardez à l'esprit 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>';
}     
?>
8
Hugo Delsing

Ceci est mon exemple.

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

Vous devez intercepter 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});
    }
});
6
luisnicg

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 vous le parcourez avec une boucle for.

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

0
TomoMiha

Je peux changer les lignes en suivant la réponse acceptée et l'exemple associé sur jsFiddle. Mais pour des raisons inconnues, je ne pouvais pas obtenir les identifiants après des actions "arrêter ou modifier". Mais l'exemple posté dans la page de l'interface utilisateur de JQuery fonctionne bien pour moi. Vous pouvez vérifiez ce lien ici.

0
Web_Developer