jQuery UI Sortierbar, dann Reihenfolge in eine Datenbank schreiben

Ich möchte die jQuery-UI- sortableFunktion verwenden, damit Benutzer eine Reihenfolge festlegen und diese dann bei Änderung in die Datenbank schreiben und aktualisieren können. Kann jemand ein Beispiel schreiben, wie dies gemacht werden würde?

Die jQuery-UI- sortableFunktion enthält eine serializeMethode , um dies zu tun. Es ist wirklich ganz einfach. Hier ist ein kurzes Beispiel, das die Daten an die angegebene URL sendet, sobald ein Element seine Position geändert hat.

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

Dies bedeutet, dass mithilfe der Elemente ein Array der Elemente erstellt wird id. Also mache ich normalerweise so etwas:

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

Wenn Sie die serializeOption verwenden, wird eine POST-Abfragezeichenfolge wie folgt erstellt: item[]=1&item[]=2usw. Wenn Sie beispielsweise Ihre Datenbank-IDs im idAttribut verwenden, können Sie einfach das POSTed-Array durchlaufen und die Positionen der Elemente entsprechend aktualisieren .

Zum Beispiel in PHP:

$i = 0;

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

Beispiel auf jsFiddle.

Dachte, das könnte auch helfen. A) Es wurde entwickelt, um die Nutzlast beim Zurücksenden an den Server nach jeder Sortierung auf ein Minimum zu beschränken. (Anstatt jedes Mal alle Elemente zu senden oder viele Elemente zu durchlaufen, die der Server möglicherweise ausspuckt.) B) Ich musste eine benutzerdefinierte ID zurücksenden, ohne die ID / den Namen des Elements zu beeinträchtigen. Dieser Code erhält die Liste vom asp.net-Server und beim Sortieren werden nur 2 Werte zurückgesendet: Die Datenbank-ID des sortierten Elements und die Datenbank-ID des Elements, neben dem es abgelegt wurde. Anhand dieser beiden Werte kann der Server die neue Position leicht identifizieren.

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

Sie haben Glück, ich verwende genau das in meinem CMS

Wenn Sie die Bestellung speichern möchten, rufen Sie einfach die JavaScript-Methode auf saveOrder(). Es wird eine AJAX- POSTAnfrage an saveorder.php gestellt, aber natürlich können Sie diese jederzeit als reguläres Formular veröffentlichen.

<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; Denken Sie daran, dass ich alle Überprüfungen und Überprüfungen entfernt habe.

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

Das ist mein Beispiel.

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

Sie müssen die Bestellung im Update-Ereignis abfangen

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

Ich kann die Zeilen ändern, indem ich der akzeptierten Antwort und dem zugehörigen Beispiel auf jsFiddle folge. Aus unbekannten Gründen konnte ich die IDs nach "Stop or Change" -Aktionen nicht erhalten. Das auf der JQuery-UI-Seite veröffentlichte Beispiel funktioniert jedoch gut für mich. Sie können diesen Link hier überprüfen.

Versuchen Sie es mit dieser Lösung: http://phppot.com/php/sorting-mysql-row-order-using-jquery/, wobei eine neue Bestellung in einem HMTL-Element gespeichert wird. Anschließend senden Sie das Formular mit diesen Daten an ein PHP-Skript und durchlaufen es mit der for-Schleife.

Hinweis: Ich musste ein weiteres Datenbankfeld vom Typ INT (11) hinzufügen, das bei jeder Iteration aktualisiert (mit Zeitstempel versehen) wird. Es dient dazu, dass das Skript erkennt, welche Zeile zuletzt aktualisiert wurde, oder Sie erhalten verschlüsselte Ergebnisse.