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





jqueryui css (6)


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>

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.




Questo è il mio esempio

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

Devi prendere 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});
    }
});



La funzionalità sortable dell'interfaccia jQuery include un metodo serialize per fare ciò. È abbastanza semplice, davvero. Ecco un rapido esempio che invia i dati all'URL specificato non appena un elemento ha cambiato 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'
        });
    }
});

Quello che fa è che crea una matrice di elementi usando l' id degli elementi. 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'opzione serialize , verrà creata una stringa di query POST come questa: item[]=1&item[]=2 ecc. Quindi se si utilizzano, ad esempio, gli ID del database nell'attributo id , è possibile semplicemente eseguire iterazioni attraverso l'array POSTed e aggiorna le posizioni degli elementi di conseguenza.

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.




Operatore Null Coalesce "??" (Aggiunto in PHP 7)

Non è il nome più simpatico per un operatore, ma PHP 7 introduce la coalesce null molto utile quindi ho pensato di condividere un esempio.

In PHP 5, abbiamo già un operatore ternario, che verifica un valore e quindi restituisce il secondo elemento se restituisce true e il terzo se non lo fa:

echo $count ? $count : 10; // outputs 10

C'è anche una scorciatoia per ciò che ti permette di saltare il secondo elemento se è lo stesso del primo: echo $ count?: 10; // produce anche 10

In PHP 7 otteniamo anche il ?? L'operatore che invece di indicare una confusione estrema, ovvero il modo in cui userei solitamente due punti interrogativi, ci consente invece di mettere insieme una serie di valori. Leggendo da sinistra a destra, il primo valore che esiste e non è nullo è il valore che verrà restituito.

// $a is not set
$b = 16;

echo $a ?? 2; // outputs 2
echo $a ?? $b ?? 7; // outputs 16

Questo costrutto è utile per dare la priorità a uno o più valori provenienti forse dall'input dell'utente o dalla configurazione esistente e in modo sicuro ricadendo su un dato valore predefinito se tale configurazione è mancante. È una specie di piccola funzionalità, ma è una che so che userò non appena le mie applicazioni passeranno a PHP 7.





php jquery mysql jquery-ui jquery-ui-sortable