Menambah Tombol Delete Untuk Setiap Baris Di jqGrid


jqGrid (http://www.trirand.com/blog/) adalah sebuah plugin untuk JQuery yang dapat dipakai untuk menampilkan data dalam bentuk tabel/grid.  jqGrid dapat melakukan proses filter dan pagination (navigasi halaman) secara otomatis, sementara programmer tinggal memberikan data dari server dalam bentuk JSON atau XML.

Salah satu pertanyaan yang muncul pada saat saya memakai jqGrid adalah bagaimana membuat tombol delete (hapus) untuk setiap baris di tabel?  Apa saya harus memodifikasi data yang dikirim dari server untuk membuat kolom ‘semu’?  Setelah melakukan google sejenak, saya menemukan beberapa contoh penyelesaian yang agak ‘rumit’ yaitu dengan melakukan data setelah di-load (dengan demikian membutuhkan JavaScript pada event gridComplete).  Tapi tidak lama kemudian, saya menemukan jawaban yang lebih sederhana namun tetap elegan, yaitu dengan menggunakan formatter dan  formatoptions.

Pada saat saya membuat jqGrid, saya menambahkan sebuah kolom kosong di colNames.  Saya tidak perlu mengirimkan data dari server untuk kolom ini, karena nantinya kolom ini akan berisi tombol hapus.   Lalu, pada colModel, saya menambahkan formatter dan formatOptions untuk kolom kosong ini seperti berikut ini:

...
colNames: ['First Name', 'Last Name','Birth Date', ''],

colModel: [
  {name:'firstName', index:'firstName', width:150},
  {name:'lastName', index:'lastName', width:100},
  {name:'birthDateString', index:'birthDate', width:100},
  {name: '', index: 'action', width:75, sortable:false, formatter:'actions',
  formatoptions:{
     editbutton: false, delbutton:true, mtype: "GET",
     delOptions:{
        caption: 'Hapus',
        msg: 'Anda ingin menghapus record ini?',
        bSubmit: 'Hapus',
        mtype: 'GET',
        url: 'contacts/listrowdelete',
        bCancel: 'Batal'
     }
  }} ],
  ...

Dengan memberi nilai formatter dengan actions, maka kolom ini akan di-isi dengan tombol-tombol yang mewakili aksi tertentu.  Untuk melakukan pengaturan lebih lanjut, saya melakukan formatoptions.   Nilai false pada editbutton menyebabkan tombol tersebut tidak akan ditampilkan.    Nilai mtype secara default adalah POST.  Nilai ini menentukan bagaimana data dikirim ke server pada tombol delete ditekan.  Saya memilih GET untuk mempermudah debugging.   Berikut ini adalah contoh tampilannya:

Tampilan jqGrid dengan Tombol Delete Per Baris

Tampilan jqGrid dengan Tombol Delete Per Baris

Nilai delOptions menentukan bagaimana karakteristik dialog yang muncul pada saat tombol hapus ditekan.  Nilai ini secara internal akan dikirimkan pada saat memanggil fungsi delGridRow().  Dokumentasi untuk nilai yang ada dapat dilihat di http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#delgridrow.

Berikut ini adalah contoh dialog yang muncul pada saat tombol hapus ditekan:

Dialog Hapus

Dialog Hapus

Bila tombol Delete ditekan, maka URL yang ditentukan di url akan dipanggil.  Pada contoh ini, URL yang dipanggil adalah http://localhost:8080/test/contacts/listrowdelete?oper=del&id=1.  jqGrid secara otomatis menambahkan parameter oper dan id, dimana id adalah baris yang sedang terpilih.

Dengan demikian, pada sisi server, di controller, saya tinggal membuat sebuah handler seperti:

@RequestMapping(value="/listrowdelete", params="oper=del", method=RequestMethod.GET)
public String listRowDelete(@RequestParam(value="id", required=true) Long id, Model uiModel) {
  // kode program hapus dari database disini
}

Perihal Solid Snake
I'm nothing...

Apa komentar Anda?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: