Membuat Sortable List dengan jQuery

jqueryui

Ceritanya kemarin ada temen kantor yang sedang membuat backend yang di dalamnya ada fitur untuk menampilkan record berdasarkan urutan, sebagai contoh, stuktur tabelnya sebagai berikut:
tabel

Nah, yang ingin dilakukan adalah jika satu waktu si admin ingin mengubah urutan tampilan menjadi:

  • item 2
  • item 5
  • item 4
  • item 3
  • item 1

Maka ada 2 cara.

Cara yang pertama

Buat form seperti di bawah ini:
form

Dengan form di atas sebenernya sudah cukup untuk membuat backend untuk sortir record di table.. hehe

Cara yang ke-2

adalah dengan menggunakan jquery ui sortable, dengan begini tampilan untuk sortir akan lebih interaktif. Langsung aja samplenya di mari: http://jsbin.com/gagozuwagu/1/edit?html,output. Hasil dari sortable tersebut adalah array, yang nantinya bisa langsung di simpan ke field masing-masing.

Penjelasan

Baris kode awal adalah memanggil/include file jquery dan jqueryui.

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

Di dalam <body>, kita tampilkan list dari tabel:

<ul id="sortable">
   <li id="1">Item 1</li>
   <li id="2">Item 2</li>
   <li id="3">Item 3</li>
   <li id="4">Item 4</li>
   <li id="5">Item 5</li>
</ul>

Terakhir, gunakan fungsi jqueryui untuk membuat list tadi menjadi sortable:

<script>
 $(function() {
    $( "#sortable" ).sortable({
         update: function( event, ui ) {
                var items=$('#sortable').sortable('toArray', { attribute : "id" });
                alert(items);
         }
    });
 });
 </script>

*fungsi “update” digunakan agar terjadi return setelah ada perubahan urutan di list

*sedangkan var items=$(‘#sortable’).sortable(‘toArray’, { attribute : “id” }); untuk mendapatkan nilai dari urutan.

untuk lebih detail tentang jquery, bisa maen2 kemari http://lab.abhinayrathore.com/jquery-standards/ 🙂