Bagaimanakah Kaedah `serialize` jQuery UI Sortable Digunakan untuk Kemas Kini Pangkalan Data?

Cara Menggunakan jQuery UI Sortable untuk Mengurus Pesanan dan Kemas Kini Pangkalan Data

Dengan keupayaan sortable UI jQuery, pengguna boleh mewujudkan dan mengubah suai susunan elemen. Ini menimbulkan persoalan tentang cara menterjemahkan perubahan ini kepada kemas kini pangkalan data.

Penyelesaian:

UI jQuery menyediakan kaedah bersiri yang tidak ternilai untuk tujuan ini. Ia dengan mudah menjana tatasusunan elemen, masing-masing diwakili oleh IDnya.

Berikut ialah contoh komprehensif yang menghantar data ke URL yang ditetapkan selepas penyusunan semula elemen:

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

Kod ini mewujudkan boleh disusun senarai, mencetuskan peristiwa kemas kini apabila kedudukan elemen berubah dan mengumpulkan ID yang diisih ke dalam tatasusunan.

Biasanya, elemen mempunyai ID pangkalan datanya yang dibenamkan dalam atributnya. Fungsi bersiri menghasilkan rentetan pertanyaan POST yang menyerupai item[]=1&item[]=2, menggunakan ID ini untuk mengekod pesanan.

Dalam domain PHP, gelung mudah boleh melintasi tatasusunan yang diterima ini dan menggubal kemas kini pangkalan data sewajarnya:

$i = 0;

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

Untuk menggambarkan proses ini dalam tindakan, terokai contoh pada jsFiddle.

Atas ialah kandungan terperinci Bagaimanakah Kaedah `serialize` jQuery UI Sortable Digunakan untuk Kemas Kini Pangkalan Data?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!