jQuery UI Sortable, lalu tulis urutan ke dalam database


125

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?


4
toArrayakan memberikan serangkaian id yang diurutkan, saya pikir itu mungkin membantu. api.jqueryui.com/sortable/#method-toArray
MahanGM

1
Apakah Anda memperbaiki masalah Anda?
Knelis


Dalam beberapa hal, pertanyaan seperti ini adalah yang terbaik di SO. Namun, pertanyaan ini akan dibatalkan pada tahun 2020.
Parapluie

Jawaban:


223

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.


7
Untuk menghasilkan ID secara otomatis, Anda dapat menggunakan$("#element").children().uniqueId().end().sortable({...
Taylan

12
Dokumentasi mengatakan untuk menggunakan opsi serialize Anda harus mendefinisikan id sebagai format name_number .
parisssss

5
Anda juga dapat menggunakan karakter lain ini sesuai dengan dokumentasi: Anda dapat menggunakan garis bawah, tanda sama dengan atau tanda hubung untuk memisahkan set dan angka. Misalnya "foo = 1", "foo-1", dan "foo_1" semuanya diserialkan menjadi "foo [] = 1".
lhoess

2
Saya tidak bisa membuat ini berfungsi jika saya mengirimkan beberapa variabel data.
PBwebD


11

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>

4
Tag ASP mungkin membingungkan bagi mereka yang tidak terbiasa dengannya dan ini murni masalah jQuery / HTML.
ggdx

1
Dua tahun kemudian! Sedang sibuk?
ggdx

Apa yang terjadi jika item yang dipindahkan dijatuhkan sebagai item pertama dari daftar?
Edson Horacio Junior

1
jika ada item yang dijatuhkan, maka "next to" id = 0, action = del dan plid = id dari item yang sedang ditindaklanjuti, else action = sort dan ada 2 param, item sedang diurutkan dan di sebelahnya item itu dijatuhkan . itulah informasi minimum yang dapat digunakan server untuk melakukan operasi lainnya. itu dicoba dan pola uji. saya bahkan telah menambahkan dan menyisipkan menggunakan pola yang sama - hanya permainan aksi dan 2 parameter lainnya.
Kalpesh Popat

9

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>';
}     
?>

7

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});
    }
});

0

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.


0

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.