[php] jQuery UI Sortable, quindi scrivi l'ordine in un database


Answers

Ho pensato che questo potrebbe aiutare pure. A) è stato progettato per mantenere il carico utile al minimo mentre si invia al server, dopo ogni tipo. (invece di inviare tutti gli elementi ogni volta o iterando attraverso molti elementi che il server potrebbe sgridare) B) Avevo bisogno di rimandare id personalizzati senza compromettere l'id / nome dell'elemento. Questo codice otterrà l'elenco dal server asp.net e quindi all'ordinamento verranno restituiti solo 2 valori: l'id db dell'elemento ordinato e l'id db dell'elemento accanto al quale è stato rilasciato. Sulla base di questi 2 valori, il server può facilmente identificare la nuova posizione.

<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>
Question

Voglio utilizzare la funzione sortable dell'interfaccia jQuery per consentire agli utenti di impostare un ordine e quindi di cambiare, scriverlo nel database e aggiornarlo. Qualcuno può scrivere un esempio su come questo sarebbe stato fatto?




Sei fortunato, io uso la cosa esatta nel mio CMS

Quando si desidera memorizzare l'ordine, basta chiamare il metodo JavaScript saveOrder() . Farà una richiesta POST AJAX a saveorder.php, ma ovviamente potresti sempre postarla come forma regolare.

<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();'/>

In saveorder.php; Tieni presente che ho rimosso tutte le verifiche e i controlli.

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



Prova con questa soluzione: http://phppot.com/php/sorting-mysql-row-order-using-jquery/ dove il nuovo ordine viene salvato in qualche elemento HMTL. Quindi invii il modulo con questi dati ad alcuni script PHP, e iterate con esso per ciclo.

Nota: ho dovuto aggiungere un altro campo db di tipo INT (11) che viene aggiornato (timestamp) su ogni iterazione - serve per lo script per sapere quale riga è stata aggiornata di recente, altrimenti si finisce con risultati codificati.






Related