jQuery UI Sortable, lalu tulis urutan ke dalam database

Saya ingin menggunakan fungsi jQuery UI sortableuntuk memungkinkan pengguna mengatur pesanan dan kemudian mengubahnya, menuliskannya ke database dan memperbaruinya. Bisakah seseorang menulis contoh tentang bagaimana ini akan dilakukan?

Fitur jQuery UI sortablemenyertakan serializemetode untuk melakukan ini. Ini cukup sederhana, sungguh. Berikut adalah contoh cepat yang mengirimkan data ke URL yang ditentukan segera setelah elemen memiliki posisi berubah.

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

Apa yang dilakukannya adalah membuat larik elemen menggunakan elemen id. Jadi, saya biasanya melakukan sesuatu seperti ini:

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

Saat Anda menggunakan serializeopsi, ini akan membuat string kueri POST seperti ini: item[]=1&item[]=2dll. Jadi jika Anda menggunakan - misalnya - ID database Anda dalam idatribut, Anda dapat dengan mudah melakukan iterasi melalui array POSTed dan memperbarui posisi elemen yang sesuai. .

Misalnya, di PHP:

$i = 0;

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

Contoh di jsFiddle.

Kupikir ini mungkin bisa membantu juga. A) itu dirancang untuk menjaga payload ke minimum saat mengirim kembali ke server, setelah setiap jenis. (alih-alih mengirim semua elemen setiap kali atau melakukan iterasi melalui banyak elemen yang mungkin dibuang oleh server) B) Saya perlu mengirim kembali id ​​kustom tanpa mengorbankan id / nama elemen. Kode ini akan mendapatkan daftar dari server asp.net dan kemudian setelah menyortir hanya 2 nilai yang akan dikirim kembali: ID db dari elemen yang diurutkan dan id db dari elemen di sebelahnya yang dijatuhkan. Berdasarkan 2 nilai tersebut, server dapat dengan mudah mengidentifikasi posisi baru.

<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>

Anda beruntung, saya menggunakan hal yang tepat di CMS saya

Saat Anda ingin menyimpan pesanan, cukup panggil metode JavaScript saveOrder(). Ini akan membuat POSTpermintaan AJAX ke saveorder.php, tapi tentu saja Anda selalu bisa mempostingnya sebagai formulir biasa.

<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();'/>

Di saveorder.php; Perlu diingat saya menghapus semua verifikasi dan pemeriksaan.

<?php
$orderlist = explode(',', $_POST['order']);
foreach ($orderlist as $k=>$order) {
  echo 'Id for position ' . $k . ' = ' . $order . '<br>';
}     
?>

Ini contoh saya.

https://github.com/luisnicg/jQuery-Sortable-and-PHP

Anda perlu menangkap pesanan di acara pembaruan

    $( "#sortable" ).sortable({
    placeholder: "ui-state-highlight",
    update: function( event, ui ) {
        var sorted = $( "#sortable" ).sortable( "serialize", { key: "sort" } );
        $.post( "form/order.php",{ 'choices[]': sorted});
    }
});

Saya dapat mengubah baris dengan mengikuti jawaban yang diterima dan contoh terkait di jsFiddle. Tetapi karena beberapa alasan yang tidak diketahui, saya tidak bisa mendapatkan id setelah tindakan "hentikan atau ubah". Tetapi contoh yang diposting di halaman JQuery UI berfungsi dengan baik untuk saya. Anda dapat memeriksa tautan itu di sini.

Coba dengan solusi ini: http://phppot.com/php/sorting-mysql-row-order-using-jquery/ di mana pesanan baru disimpan di beberapa elemen HMTL. Kemudian Anda mengirimkan formulir dengan data ini ke beberapa skrip PHP, dan mengulanginya dengan for loop.

Catatan: Saya harus menambahkan bidang db lain dengan tipe INT (11) yang diperbarui (timestamp'ed) pada setiap iterasi - ini berfungsi untuk skrip untuk mengetahui baris mana yang baru-baru ini diperbarui, atau Anda akan berakhir dengan hasil yang acak.