Bagaimana untuk Menyimpan Susunan Elemen Boleh Susun dalam Pangkalan Data dengan UI jQuery?

JQuery UI Sortable: Menyimpan Pesanan dalam Pangkalan Data

Apabila bekerja dengan senarai tertib atau elemen lain yang memerlukan jujukan boleh laras, UI jQuery Ciri boleh disusun menyediakan penyelesaian yang mudah tetapi berkesan. Fungsi ini membolehkan pengguna menyeret dan melepaskan elemen untuk menentukan pesanan mereka, dan ia boleh disepadukan dengan pangkalan data untuk menyimpan perubahan ini secara berterusan.

Untuk melaksanakan ciri ini, UI jQuery menawarkan kaedah bersiri dalam pilihan Boleh Isih. Berikut ialah contoh yang menghantar pesanan yang dikemas kini ke URL yang ditentukan:

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

Kod ini memanfaatkan kaedah bersiri Sortable untuk mencipta tatasusunan elemen menggunakan ID mereka. Amalan biasa melibatkan pemberian ID unik kepada setiap elemen boleh diisih:

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

Apabila anda menggunakan pilihan bersiri, ia membina rentetan pertanyaan POST seperti ini: item[]=1&item[]=2 dsb. Dengan menggunakan ID sebagai ID pangkalan data, anda boleh lelaran dengan mudah melalui tatasusunan POST dan mengemas kini kedudukan elemen dengan sewajarnya:

Sebagai contoh, menggunakan PHP:

$i = 0;

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

Pendekatan fleksibel untuk pengurusan pesanan menggunakan jQuery UI Boleh diisih dan penyepaduan pangkalan data memperkasakan pengguna untuk melaraskan dan menyimpan urutan yang mereka kehendaki secara dinamik.

Atas ialah kandungan terperinci Bagaimana untuk Menyimpan Susunan Elemen Boleh Susun dalam Pangkalan Data dengan UI jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!