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

Question

Je veux utiliser le jQuery UI sortable pour permettre aux utilisateurs de définir un ordre, puis, en cas de modification, de l'écrire dans la base de données et de le mettre à jour. Quelqu'un peut-il donner un exemple de la façon dont cela pourrait être fait ?

Answer 1

L'interface utilisateur de jQuery sortable La fonction comprend un serialize método pour faire ça. C'est assez simple, en fait. 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'
        });
    }
});

Ce que cela fait, c'est qu'il 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 le serialize il créera une chaîne de requête POST comme ceci : item[]=1&item[]=2 etc. Ainsi, si vous utilisez, par exemple, les identifiants de votre base de données dans l'onglet id vous pouvez alors simplement itérer dans le tableau POSTed et mettre à jour la position 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.

Answer 2

J'ai pensé que cela pourrait aider aussi. A) il a été conçu pour maintenir la charge utile à son minimum tout en renvoyant 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 et ensuite, lors du tri, seules 2 valeurs seront renvoyées : L'id db de l'élément trié et l'id db 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>

Answer 3

Vous avez de la chance, j'utilise exactement la même chose dans mon CMS.

Lorsque vous souhaitez enregistrer la commande, il suffit d'appeler la méthode JavaScript saveOrder() . Il fera un AJAX POST à saveorder.php, mais bien sûr, vous pouvez toujours l'afficher 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é toute vérification et tout contrôle.

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

Answer 4

Voici mon exemple.

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

Vous devez attraper l'ordre 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});
    }
});

Answer 5

Il y a une bonne tutoriel sur YouTube décrivant comment le faire.