jQuery UI Sortierbar, dann Reihenfolge in eine Datenbank schreiben

125

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?

Harry
quelle
4
toArraywürde eine Reihe von sortierten IDs geben, ich denke, es könnte hilfreich sein. api.jqueryui.com/sortable/#method-toArray
MahanGM
1
Haben Sie Ihr Problem behoben?
Knelis
In gewisser Weise sind Fragen wie diese die besten auf SO. Diese Frage würde jedoch im Jahr 2020
Parapluie

Antworten:

223

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.

Knelis
quelle
7
Um IDs automatisch zu generieren, können Sie$("#element").children().uniqueId().end().sortable({...
Taylan
12
In der Dokumentation heißt es, dass Sie für die Verwendung der Serialisierungsoption die ID als name_number- Format definieren sollten .
Parisssss
5
Sie können auch dieses andere Zeichen gemäß der Dokumentation verwenden: Sie können einen Unterstrich, ein Gleichheitszeichen oder einen Bindestrich verwenden, um die Menge und die Zahl zu trennen. Zum Beispiel serialisieren "foo = 1", "foo-1" und "foo_1" alle zu "foo [] = 1".
lhoess
2
Ich kann das scheinbar nicht zum Laufen bringen, wenn ich mehrere Datenvariablen übergebe.
PBwebD
11

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>
Kalpesh Popat
quelle
4
ASP-Tags können für diejenigen, die mit ihnen nicht vertraut sind, verwirrend sein, und dies ist ein reines jQuery / HTML-Problem.
ggdx
1
Zwei Jahre später! Ich war beschäftigt?
ggdx
Was passiert, wenn das verschobene Element als erstes Element der Liste gelöscht wird?
Edson Horacio Junior
1
Wenn ein Element gelöscht wird, ist die ID "neben" id = 0, action = del und plid = id des Elements, auf das reagiert wird, andernfalls action = sort und es gibt 2 Parameter, wobei das Element sortiert wird und neben dem es gelöscht wird . Dies sind die Mindestinformationen, die der Server für die Ausführung der restlichen Vorgänge verwenden kann. Es ist ein Testmuster. Ich habe sogar Hinzufügen und Einfügen mit dem gleichen Muster - nur das Spiel der Aktion und die anderen 2 Parameter.
Kalpesh Popat
9

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

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});
    }
});
luisnicg
quelle
0

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.

Web-Entwickler
quelle
0

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.

TomoMiha
quelle