jQuery UI Sortable und Datenbankintegration

Mit jQuery UI Sortable können Sie Benutzern die Möglichkeit geben, Elemente neu anzuordnen und eine bestimmte Reihenfolge beizubehalten. Um diese Funktionalität in Ihre Datenbank zu integrieren, können Sie die Serialisierungsmethode in Verbindung mit AJAX oder der Formularübermittlung nutzen.

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

        $.ajax({
            data: data,
            type: 'POST',
            url: '/your/url/here'
        });
    }
});

Durch Verwendung einer HTML-Struktur wie:

   

   

   ...

Die Serialisierungsmethode generiert eine Abfragezeichenfolge wie: item[]=1&item[]=2, wobei jeder Wert die ID des neu angeordneten Elements darstellt.

Angenommen, Ihre Datenbank Wenn die IDs mit den Element-IDs übereinstimmen, können Sie dann die POST-Daten durchlaufen und die entsprechenden Datenbankeinträge mit ihren neuen Positionen aktualisieren.

$i = 0;

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

Durch die Integration von jQuery UI Sortable in eine Datenbank können Sie die Reihenfolge von Objekten dynamisch beibehalten und so eine benutzerfreundliche Oberfläche für Ordnung und Persistenz bereitstellen.