Wie kann die „serialize'-Methode von jQuery UI Sortable für Datenbankaktualisierungen verwendet werden?

So verwenden Sie jQuery UI Sortable zum Verwalten von Reihenfolge und Datenbankaktualisierungen

Mit der Sortierfunktion von jQuery UI können Benutzer die Reihenfolge von festlegen und ändern Elemente. Dies warf die Frage auf, wie diese Änderungen in Datenbankaktualisierungen umgesetzt werden können.

Lösung:

jQuery UI bietet für diesen Zweck die unschätzbar wertvolle Serialisierungsmethode. Es generiert mühelos ein Array der Elemente, die jeweils durch ihre ID dargestellt werden.

Hier ist ein umfassendes Beispiel, das Daten bei Elementneuanordnung an eine bestimmte URL sendet:

$('#element').sortable({
    axis: 'y',
    update: function (event, ui) {
        var data = $(this).sortable('serialize');

        // Communicate with the server using $.post or $.ajax
        $.ajax({
            data: data,
            type: 'POST',
            url: '/your/url/here'
        });
    }
});

Dieser Code erstellt eine Sortierung Liste, löst ein Aktualisierungsereignis aus, wenn sich die Position eines Elements ändert, und sammelt die sortierten IDs in einem Array.

Typischerweise haben Elemente ihre eigene Datenbank In ihre Attribute eingebettete IDs. Die Serialisierungsfunktion erzeugt eine POST-Abfragezeichenfolge, die item[]=1&item[]=2 ähnelt, und verwendet diese IDs zum Codieren der Reihenfolge.

In der PHP-Domäne kann eine einfache Schleife dieses empfangene Array durchlaufen und Datenbankaktualisierungen durchführen entsprechend:

$i = 0;

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

Um diesen Prozess in Aktion zu visualisieren, erkunden Sie das Beispiel auf jsFiddle.

Das obige ist der detaillierte Inhalt vonWie kann die „serialize'-Methode von jQuery UI Sortable für Datenbankaktualisierungen verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!