Setelah di postingan sebelumnya dijelaskan bagaimana melakukan generate table jqGrid dan menampilkan datanya, pertanyaan yang muncul selanjutnya adalah bagaimana kita melakukan manipulasi data (CRUD)?
Ini adalah pertanyaan simpel yang sangat sulit saya temukan jawabannya di internet. Kebanyakan jawaban dari pertanyaan tersebut dilakukan dengan menggunakan form bukan bawaan dari jqGrid, padahal seperti yang kita lihat di tutorial jqGrid menyediakan fitur tersebut (add, edit, delete, view, dan search).
Dalam postingan ini saya mengasumsikan bahwa Anda :
- Sudah mengerti jquery dan pernah menggunakannya
- Sudah berhasil menampilkan data dengan jqgrid (terutama menggunakan data json), jika belum baca postingan ini.
Yang ingin kita lakukan pada postingan ini adalah (sebenarnya terlepas kita pakai codeigniter atau nggak sih) :
- Menampilkan Form Add, Form Edit, Form View, dan Form Search bawaan dari jqgrid
- Melakukan kustomisasi form tersebut
- Memproses form tersebut
Potongan page view yang menampilkan jqGrid
<script type="text/javascript">
$(document).ready(function(){
jQuery("#tabelkota").jqGrid({
url:'<?php echo base_url(); ?>info/get_kota',
datatype: "json",
mtype:'POST',
colNames:['Nama Kota/Kabupaten', 'Longitude', 'Latitude','Alamat'],
colModel:[
{name:'nama',index:'nama',width:140},
{name:'lon',width:80, sortable:false},
{name:'lat',width:80, sortable:false},
{name:'deskripsi',width:650, sortable:false}
],
rowNum:30,
width: 900,
height: 400,
rownumbers:true,
shrinkToFit:false,
rowList:[10,20,30],
pager: '#navkota',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"Daftar Kota dan Kabupaten Provinsi Jawa Barat"
});
jQuery("#tabelkota").jqGrid('navGrid','#navkota',
{view:true,edit:false,add:false,del:false,search:false,viewtext:'View',refreshtext:'Reload'},
{}, // edit options
{}, // add options
{}, // del options
{}, // search options
{} // view options
);
});
</script>
<div class="block b-full" id="laporan-table">
<table id="tabelkota"></table>
<div id="navkota"></div>
</div>
Menampilkan form bawaan jqgrid
Untuk menampilkan fitur jqgrid antara add, edit, view, search, delete, dan reload dapat ditentukan pada parameter ketiga dari navGrid. Kalau melihat contoh di atas saya hanya mengaktifkan fitur add saja yang akan menghasilkan form seperti gambar di bawah. Menu navigator grid selengkapnya bisa dilihat di sini. Secara default nilai dari view, edit, add, delete, dan search adalah sebagai berikut.
{
view:false,
edit:true,
add:true,
del:true,
search:true
}
Satu hal yang perlu diingat oleh kita adalah kita nggak perlu membuat form tersebut untuk kita hidden kemudian. jqGrid akan menggenerate form tersebut sesuai dengan nilai parameter yang kita tetapkan. Form yang dihasilkan sesuai dengan definisi colModel dan colNames jqGrid kita. Label tiap input akan sesuai dengan definisi colNames jqGrid. Untuk tiap input akan sesuai dengan definisi parameter colModel tiap input. Ketika fitur add kita aktifkan maka jqgrid akan menampilkan tombol “+” di kiri bawah tabel. Kalau kita klik tombol tersebut akan menghasilkan form seperti berikut.
Tunggu dulu, kenapa di formnya gak muncul apa-apa?! Cuma form bertuliskan “Add Record”? Mana input untuk tiap column yang katanya muncul?
Untuk view form dan search form hal ini gak perlu dilakukan, tapi khusus add dan edit hal ini wajib dilakukan. Untuk kolom yang ingin dapat di edit dan di add tambahkan opsi ini :
editable:true
Kalau seperti contoh di atas dan ingin tiga kolom pertama bisa di add/edit kira-kira scriptnya jadi seperti ini :
...
colNames:['Nama Kota/Kabupaten', 'Longitude', 'Latitude','Alamat'],
colModel:[
{name:'nama',index:'nama',width:140,editable:true},
{name:'lon',width:80, sortable:false,editable:true},
{name:'lat',width:80, sortable:false,editable:true},
{name:'deskripsi',width:650, sortable:false}
]
...
Beberapa option colModel yang berhubungan dengan form editing adalah sebagai berikut :
| editable | boolean | Defines if the field is editable. This option is used in cell, inline and form modules. See editing | false |
| editoptions | array | Array of allowed options (attributes) for edittype option editing | empty array |
| editrules | array | sets additional rules for the editable field editing | empty array |
| edittype | string | Defines the edit type for inline and form editing Possible values: text, textarea, select, checkbox, password, button, image and file. See also editing | text |
Detail option colModel dapat dilihat disini.
Melakukan kustomisasi form bawaan jqgrid
Detil option untuk masing-masing form (add, edit, view, search, delete) dapat dilihat di sini. Pada link tersebut dijelaskan detail tentang option untuk masing-masing form. Letakkan option tersebut sesuai dengan tempatnya (parameter 4,5,6,7 dan 8).
{}, // edit options
{}, // add options
{}, // del options
{}, // search options
{} // view options
Misalnya untuk bagian view form kita ingin mengatur width label agar tidak bertabrakan dengan value columnya. Maka pada bracket view options kita isikan dengan :
{ // view options
labelswidth : '50%'
}
Memproses form jqgrid
Kalau di kebanyakan tutorial menjelaskan secara mendasar parameter yang dilewatkan pada url option :
... url:'<?php echo base_url(); ?>info/get_kota', datatype: "json", mtype:'POST', ...
adalah parameter POST(“page”) untuk page saat ini, POST(“rows”) untuk banyaknya row yang diminta, POST(“sidx”) untuk index Order By, dan POST(“sord”) untuk arah Order By (Ascending or Descending).
Oke, asumsi kita menggunakan fitur add, edit, delete, dan search. Bagaimana kita memprosesnya? Khusus untuk Search, parameter dilewatkan melalui url yang sama dengan url di atas. Penjelasan untuk search juga tidak akan dijelaskan pada postingan ini. Lalu bagaimana dengan add, edit, delete?
Untuk ketiga form ini dibutuhkan satu option jqgrid tambahan yakni editurl misal seperti berikut :
editurl:'<?php echo base_url(); ?>data/edit_report',
Masing-masing form (add, edit, dan delete) ketika disubmit akan melewatkan beberapa nilai berikut kepada url yang tertera pada editurl tersebut.
Ketiga form mengirimkan POST(“oper”) yang bernilai “add”, “edit”, dan “del” sebagai penanda form apa yang telah disubmit.
What is posted to the server
When we are in editing mode (ADD) the data that is posted to the server is object {} that contain:
-
the name:value pair where the name is the name of the input element represented in the form (this is for all input elements)
-
additionally we add a pair id:_empty where the _empty indicates that new row is inserted
-
additionally we add a pair oper:add to indicate the add mode
-
if the editData object is not empty we extend this data with the posted data
-
if the returned object from onclickSubmit event is not empty we extend the posted data with this object
FORM EDIT
When we are in editing mode(EDIT) the data that is posted to the server is object {} that contain:
-
the name:value pair where the name is the name of the input element represented in the form (this is for all input elements)
-
additionally we add a pair id:rowid where the rowid is the id of the edited row
-
additionally we add a pair oper:edit to indicate the edit mode
-
if the editData object is not empty we extend this data with the posted data
-
if the returned object from onclickSubmit event is not empty we extend the posted data with this object
DELETE
When we are in delete mode the data that is posted to the server is object {} that contain:
-
the pair id:rowids where the rowids can be a single value a value string separated with comma in case of multiple selection
-
additionally we add a pair oper:del to indicate the delete mode
-
if the delData object is not empty we extend this data with the posted data
-
if the returned object from onclickSubmit event is not empty we extend the posted data with this object
Detailnya dapat dipelajari di sini.
***
That’s for today. Hope this post can help. Selanjutnya saya akan membahas tentang :
- Search with jqGrid
- inline editing with jqGrid
Albert
November 19, 2011
Thank you kang atas tuts nya, mantaps
Request ya gan, share dong sourcecode untuk editurl nya
Terima kasih.
Rizky
November 19, 2011
Serius butuh file editurl nya? Bukannya sudah saya kasi tau apa aja parameter yang dikirimkan ke editurl?
Perlakukan file php di editurl seperti kita mengirimkan form POST maupun GET.
Untuk menerima paremeter tersebut kalau dengan php biasa cukup $_POST['oper'] atau kalau Anda pakai framework PHP seperti codeigniter dengan $this->input->post(‘oper’). (POST atau GET tergantung nilai parameter mtype yang Anda tuliskan di jqgrid)
Ini saya kasih sampelnya dalam codeigniter
if($this->input->post("oper")=="add"){$year = $this->input->post("tahun");
$notes = $this->input->post("notes");
$kota = Current_User::user()->id;
$this->infolib->add_report($kota,$year,$notes);
}else if($this->input->post("oper")=="edit"){
$year = $this->input->post("tahun");
$notes = $this->input->post("notes");
$kota = Current_User::user()->id;
$this->infolib->edit_report($kota,$year,$notes);
}
Albert
November 20, 2011
Thanks gan,
iya saya belajar pakai codeigniter 2.1.0
*cheers
Albert
November 21, 2011
Gan mohon bantuannya, sepertinya untuk pilihan deletenya tidak berhasil
function editing(){
$code_id = $this->input->post('code_id');
$title = $this->input->post('title');
$province = $this->input->post('province');
if($this->input->post('oper')=='add'){
$data = array(
'code_id' => $code_id,
'title' => $title,
'province_name' => $province,
);
$this->db->insert('province', $data);
}
else if($this->input->post('oper')=='edit'){
$data = array(
'title' => $title,
'province_name' => $province,
);
$this->db->where('code_id', $code_id);
$this->db->update('province', $data);
}
else if($this->input->post('oper')=='del'){
$this->db->where('code_id', $code_id);
$this->db->delete('province');
}
}
Rizky
November 21, 2011
Gw gak yakin pasti, tapi kayanya salahnya ada di parameter id yang dilewatin deh. Setahu gw tabel yang digenerate sama jqgrid untuk tiap row parameter idnya adalah ‘id’.
Walaupun ente udah buat column dengan nama ‘code_id’, coba mengganti where nya dengan $this->input->post(‘id’).
Soalnya, struktur data jsonnya juga kan key=> value nya untuk tiap row :
{
"total": "xxx",
"page": "yyy",
"records": "zzz",
"rows" : [
{"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
{"id" :"2", "cell":["cell21", "cell22", "cell23"]},
...
]
}
see? untuk tiap row memiliki name id dengan nama “id”. Parameter ‘id’ ini akan dikembalikan saat edit dan delete di submit, sementara saat add nilai id yang dikembalikan kalau nggak salah ‘_empty’
Albert
November 21, 2011
Terima kasih gan, iya ternyata saya harus menambahkan untuk POST(‘id’) kemudian menganti var delete nya menjadi $id
function editing(){
$id = $this->input->post('id');
$code_id = $this->input->post('code_id');
...
...
else if($this->input->post('oper')=='del'){
$this->db->where('code_id', $id);
...
thanks gan,
Albert
November 21, 2011
Gan, untuk paginating nya koq ga bisa yah?
setiap klik next page nya ngga pengaruh.
*cheers
Rizky
November 21, 2011
hahai, kok aneh sih.. bukannya paginasi lebih penting ya. coba cek postingan gw sebelumnya tentang generate table jqgrid
Ratu
November 22, 2011
mas ada contoh untuk combobox nya yg ngambil data dri table?
Rizky
November 22, 2011
Maaf, maksud pertanyaannya seperti apa ya?
fitri hanung
November 23, 2011
mas, kalau pada form add record nya ditambahkan sebuah gambar bgaimana?bisa apa ndak ya mas kira2?
Aziz
November 29, 2011
terima kasih, tutorial ini sangat membantu
Albert
Desember 5, 2011
Bener banget kang aziz,
Ditunggu janjji nya ya gan, membahas tentang :
Search with jqGrid & Inline editing with jqGrid
cheers,
Rizky
Desember 5, 2011
sorry2, belom ada waktu buat ngoprek lagi. search udah sempet coba di codeigniter tapi masih sedikit stuck, idenya dapet sih, again, blom ada waktu. Post harian aja juga udah ga keurus. If I have time I’ll write it out.
Btw, kalo mau coba-coba contoh jqgrid semua bisa download modulnya di http://www.trirand.com/blog/?page_id=6. Atau versi onlinenya
Coba explore-explore aja, kalo udah ngerti share caranya ya, cheers!
aditya
Desember 14, 2011
Saya newbie CI, saya ingin bisa CI,JQuery , JQgrid, pada para master mohon tutorialnya di share, tolong klo perlu saya ingin kursus agar saya bisa jadi development yang handal seperti para master ini,,, mohon bimbingannya
ghantexs16
Maret 12, 2012
untuk source code deletenya gimana gan, ane dah utak utik tapi masih gagal aja. . .
saya pake codeigniter 2.1.0
ghantexs16
Maret 12, 2012
hheee. . . mohon maaf, udah berhasil gan. . .
tadi sempet utak atik sama source code diatas sekarang sudah berhasil, tengkyu gan
adnika
April 8, 2012
gan, saran ane ama skrip2 nye juga gan, biar pada learn by doing.