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


125

Voglio utilizzare la sortablefunzione jQuery UI per consentire agli utenti di impostare un ordine e quindi, in caso di modifica, scriverlo nel database e aggiornarlo. Qualcuno può scrivere un esempio su come sarebbe stato fatto?


4
toArraydarebbe una stringa di ID ordinati, penso che potrebbe essere utile. api.jqueryui.com/sortable/#method-toArray
MahanGM

1
Hai risolto il tuo problema?
Knelis


In un certo senso, domande come questa sono le migliori su SO. Tuttavia, questa domanda sarebbe stata risolta nel 2020.
Parapluie

Risposte:


223

La funzione jQuery UI sortableinclude un serializemetodo per farlo. È abbastanza semplice, davvero. Ecco un rapido esempio che invia i dati all'URL specificato non appena un elemento cambia posizione.

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

Ciò che fa è che crea un array di elementi utilizzando gli elementi id. Quindi, di solito faccio qualcosa del genere:

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

Quando si utilizza l' serializeopzione, verrà creata una stringa di query POST come questa: item[]=1&item[]=2ecc. Quindi, se si utilizzano, ad esempio, gli ID del database idnell'attributo, è possibile scorrere semplicemente l'array POST e aggiornare di conseguenza le posizioni degli elementi .

Ad esempio, in PHP:

$i = 0;

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

Esempio su jsFiddle.


7
Per generare automaticamente gli ID è possibile utilizzare$("#element").children().uniqueId().end().sortable({...
Taylan

12
la documentazione dice che per l'utilizzo dell'opzione serialize è necessario definire id come formato name_number .
parisssss

5
È inoltre possibile utilizzare questi altri caratteri per la documentazione: È possibile utilizzare un trattino basso, un segno di uguale o un trattino per separare il set e il numero. Ad esempio "foo = 1", "foo-1" e "foo_1" serializzano tutti in "foo [] = 1".
lhoess

2
Non riesco a farlo funzionare se sto passando più variabili di dati.
PBwebD


11

Ho pensato che anche questo potrebbe aiutare. A) è stato progettato per mantenere il carico utile al minimo durante l'invio al server, dopo ogni ordinamento. (invece di inviare tutti gli elementi ogni volta o di iterare attraverso molti elementi che il server potrebbe buttare fuori) B) Avevo bisogno di inviare indietro l'ID personalizzato senza compromettere l'id / nome dell'elemento. Questo codice otterrà l'elenco dal server asp.net e quindi, dopo l'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>

4
I tag ASP possono creare confusione per coloro che non li conoscono e questo è puramente un problema di jQuery / HTML.
ggdx

1
Due anni dopo! Sei stato occupato?
ggdx

Cosa succede se l'elemento spostato viene rilasciato come primo elemento dell'elenco?
Edson Horacio Junior

1
se un elemento viene rilasciato, allora il "prossimo a" id = 0, action = del e plid = id dell'elemento su cui si sta agendo, altrimenti action = sort e ci sono 2 parametri, l'elemento in fase di ordinamento e accanto al quale viene rilasciato . queste sono le informazioni minime che il server può utilizzare per eseguire il resto delle operazioni. è provato e test pattern. Ho persino aggiunto e inserito usando lo stesso schema: solo il gioco dell'azione e gli altri 2 parametri.
Kalpesh Popat

9

Sei fortunato, io uso la cosa esatta nel mio CMS

Quando si desidera memorizzare l'ordine, è sufficiente chiamare il metodo JavaScript saveOrder(). Farà una POSTrichiesta AJAX a saveorder.php, ma ovviamente puoi sempre pubblicarlo come un modulo normale.

<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>';
}     
?>

7

Questo è il mio esempio.

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

Devi catturare l'ordine nell'evento di aggiornamento

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

0

Posso cambiare le righe seguendo la risposta accettata e l'esempio associato su jsFiddle. Ma a causa di alcuni motivi sconosciuti, non sono riuscito a ottenere gli ID dopo le azioni "interrompi o modifica". Ma l'esempio pubblicato nella pagina dell'interfaccia utente di JQuery funziona bene per me. Puoi controllare quel link qui.


0

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 si invia il modulo con questi dati a uno script PHP e lo si itera con il ciclo for.

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.