JqGrid Master Detail: add, edit table detail


JqGrid adalah salah satu jQuery plugin grid yang sangat handal. Salah satu fitur JqGrid yang menjadi favorit saya adalah master detail grid. Sayang sekali pada contoh master detail grid yang disertakan pada JqGrid demo versi 3.5 tidak dilengkapi dengan sample bagaimana cara menambah item pada tabel detail. Untuk menambah item pada tabel detail diperlukan id dari tabel master sebagai foreign key.

Saya menemukan di forum JqGrid ternyata sudah ada yang menanyakan mengenai masalah ini berikut solusi yang diberikan. Tapi karena kode yang diberikan hanya sepenggal-sepenggal sulit bagi saya yang tidak mengerti ASP scripting dan baru menggunakan JqGrid ini untuk memahaminya.

Oleh karenanya mari kita lihat bagaimana cara menambahkan id dari table master untuk menambah item pada table detail. Agar lebih mudahnya kita akan modifikasi dari sample master detail invoice yang disertakan pada jqgrid demo 3.5. Silahkan download dan install sampel jqgrid demo 3.5 (baca file readme.txt yang ada didalamnya langkah-langkah instalasinya). Sampai bagian ini saya harapkan anda sudah bisa menginstall sampel jqgrid demo. Jika kesulitan silahkan baca sekali lagi petunjuknya sampai berhasil.

Sample master-detail invoice ada difile masterex.html dan masterex.js. buka file masterex.html perhatikan bagian code berikut ini pada file tersebut (abaikan yang lainnya karena tidak terkait dengan table master detail):


Penggalan kode diatas yang dipergunakan oleh jQgrid untuk meletakan grid master detail invoice pada elemen tersebut. Sekarang buka file masterex.js untuk melihat bagaimana cara jQgrid menampilkan data master detail pada table master-detail.

jQuery("#list10").jqGrid({
url:'server.php?q=2',
datatype: "json",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right"},
{name:'total',index:'total', width:80,align:"right"},
{name:'note',index:'note', width:150, sortable:false}
],
rowNum:10,
rowList:[10,20,30],
imgpath: gridimgpath,
pager: jQuery('#pager10'),
sortname: 'id',
viewrecords: true,
sortorder: "desc",
multiselect: false,
caption: "Invoice Header",
onSelectRow: function(ids) {
if(ids == null) {
ids=0;
if(jQuery("#list10_d").getGridParam('records') >0 )
{
jQuery("#list10_d").setGridParam({url:"subgrid.php?q=1&id="+ids,page:1})
.setCaption("Invoice Detail: "+ids)
.trigger('reloadGrid');
}
} else {
jQuery("#list10_d").setGridParam({url:"subgrid.php?q=1&id="+ids,page:1})
.setCaption("Invoice Detail: "+ids)
.trigger('reloadGrid');
}
}
}).navGrid('#pager10',{add:false,edit:false,del:false});
jQuery("#list10_d").jqGrid({
height: 100,
url:'subgrid.php?q=1&id=0',
datatype: "json",
colNames:['No','Item', 'Qty', 'Unit','Line Total'],
colModel:[
{name:'num',index:'num', width:55},
{name:'item',index:'item', width:180},
{name:'qty',index:'qty', width:80, align:"right"},
{name:'unit',index:'unit', width:80, align:"right"},
{name:'linetotal',index:'linetotal', width:80,align:"right", sortable:false, search:false}
],
rowNum:5,
rowList:[5,10,20],
imgpath: gridimgpath,
pager: jQuery('#pager10_d'),
sortname: 'item',
viewrecords: true,
sortorder: "asc",
multiselect: true,
caption:"Invoice Detail"
}).navGrid('#pager10_d',{add:false,edit:false,del:false});

Agar mudah kita akan membuat variable baru untuk grid master, pada baris awal kode javascript tersebut tambahkan var master = didepan jQuery(“#list10”).jqGrid({….}) sehingga kita bisa menggunakannya variable master tersebut sebagai pengganti jQuery(“#list10”).jqGrid({..}). Berhubung kita akan mengubah sample diatas agar bisa menambahkan data invoice detail ke tabel ubah potongan baris kode pada bagian ini:

}).navGrid('#pager10_d',{add:false,edit:false,del:false});

menjadi:

}).navGrid('#pager10_d',{add:true,edit:true,del:true});

Refresh browser anda dan sekarang kita bisa melihat button add, edit delete ditampilkan pada table invoice detail. Yang menjadi pertanyaan bagaimana menambahkan id dari table invoice pada saat menambahkan data invoice detail. Dari forum JqGrid dan halaman wiki form editing di jelaskan kalau form memiliki event onclickSubmit yang akan di panggil sesaat form disubmit keserver. Dari penjelasan di halaman form editing wiki disebutkan kalau event onclickSubmit ini dijalankan setelah button submit di klik dan postdata (data yang dikirim ke server) dibentuk. Penjelasan selanjutnya disarankan event onclickSubmit ini sebaiknya mengembalikan array {} yang akan di tambahkan pada postdata.

Awalnya karena saya tidak mengerti penjelasan yang diberikan pada wiki form editing tersebut membuat saya harus melihat penambahan seperti apa yang dimaksud tersebut dengan melihat source code jqgrid langsung. Pada sample jqgride demo selain menyediakan versi jqgrid yang sudah dikompres, juga di sediakan versi sourcenya. Bagian yang bertanggungjawab form editing fungsi postIt() yang ada di file js/src/grid/grid.formedit.js baris ke 719. Event onclickSubmit() dipanggil pada baris ke 726 sbb:

if( $.isFunction( rp_ge.onclickSubmit)) { onCS = rp_ge.onclickSubmit(rp_ge) || {}; }

Selanjutnya return value dari event onclickSubmit() di tampung pada variable onCS. Pada baris yang ke 743, nilai variable onCS ini digabung dengan postdata sebelum disubmit ke server dengan mengunakan fungsi $.ajax({..}).

Setelah mengetahui hal ini berarti kita bisa melakukan injeksi postdata dengan menambahkan id invoice table master pada event onclickSubmit. Id tabel yang sekarang ini di pilih bisa diketahui melalui fungsi jqgrid().getGridParam(‘selrow’), sehingga untuk table master kita bisa mendapatkan id table yang sedang diselect dengan var id= master.getGridParam(‘selrow’). Tambahkan pada baris kode berikut yang sudah kita ubah

}).navGrid('#pager10_d',{add:true,edit:true,del:true});

dengan menambahkan event onclickSubmit() menjadi

}).navGrid('#pager10_d',{add:true,edit:true,del:true},
{
onclickSubmit: function(re, postdata){
var invoice_id = master.getGridParam('selrow');
return {"invoice_id": invoice_id};
}},
{
onclickSubmit: function(re, postdata){
var invoice_id = master.getGridParam('selrow');
return {"invoice_id": invoice_id};
}}
);

Secara keseluruhan file masterex.js kita menjadi:

var master = jQuery("#list10").jqGrid({
url:'server.php?q=2',
datatype: "json",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right"},
{name:'total',index:'total', width:80,align:"right"},
{name:'note',index:'note', width:150, sortable:false}
],
rowNum:10,
rowList:[10,20,30],
imgpath: gridimgpath,
pager: jQuery('#pager10'),
sortname: 'id',
viewrecords: true,
sortorder: "desc",
multiselect: false,
caption: "Invoice Header",
onSelectRow: function(ids) {
if(ids == null) {
ids=0;
if(jQuery("#list10_d").getGridParam('records') >0 )
{
jQuery("#list10_d").setGridParam({url:"subgrid.php?q=1&id="+ids,page:1})
.setCaption("Invoice Detail: "+ids)
.trigger('reloadGrid');
}
} else {
jQuery("#list10_d").setGridParam({url:"subgrid.php?q=1&id="+ids,page:1})
.setCaption("Invoice Detail: "+ids)
.trigger('reloadGrid');
}
}
}).navGrid('#pager10',{add:false,edit:false,del:false});

jQuery(“#list10_d”).jqGrid({
height: 100,
url:’subgrid.php?q=1&id=0′,
datatype: “json”,
colNames:[‘No’,’Item’, ‘Qty’, ‘Unit’,’Line Total’],
colModel:[
{name:’num’,index:’num’, width:55},
{name:’item’,index:’item’, width:180},
{name:’qty’,index:’qty’, width:80, align:”right”},
{name:’unit’,index:’unit’, width:80, align:”right”},
{name:’linetotal’,index:’linetotal’, width:80,align:”right”, sortable:false, search:false}
],
rowNum:5,
rowList:[5,10,20],
imgpath: gridimgpath,
pager: jQuery(‘#pager10_d’),
sortname: ‘item’,
viewrecords: true,
sortorder: “asc”,
multiselect: true,
caption:”Invoice Detail”
}).navGrid(‘#pager10_d’,{add:false,edit:false,del:false})
{
onclickSubmit: function(re, postdata){
var invoice_id = master.getGridParam(‘selrow’);
return {“invoice_id”: invoice_id};
}
},
{ onclickSubmit: function(re, postdata){
var invoice_id = master.getGridParam(‘selrow’);
return {“invoice_id”: invoice_id};
}
};

Selanjutnya pada kita bisa menambahkan sedikit coding di server sidenya (file subgrid.php) untuk melakukan insert data ke database

6 thoughts on “JqGrid Master Detail: add, edit table detail

  1. Salam,

    Mas, saya baru di jQgrid, saya sdh download demo jQgrid Demo 36, database griddemo juga sudah saya buat, jqgrid_demo36 juga sudah saya tempatkan di web server sesuai dengan readme.txt. Tapi saat saya jalankan jqgrid.html kok tidak terjadi apa2 ya. Apa ada yg salah dengan jqgrid_demo36?

  2. mass……
    untuk tombol pagernya, bisa ditambah teks ga.?
    sudah coba
    navButtonAdd(‘#pager’,{caption:’Tambah’,buttonicon:’ui_icon’})
    ga bisa juga..

  3. mas ginama caranya mengambil nilai dari sortname: ‘item’, dan sortorder: “asc”, karena saya inggin membuat file export ke pdf, tp saya kesulitan mengambil nilai sortname dan sortordr itu, gmn caranya ya, terimakasih

  4. bagaimana jika untuk menampilkan subgrid mengklik tanda tambah didepan master data, karena ketika klik row akan melakukan edit inline. sedangkan pada variable invoice_id = master.getGridParam(‘selrow’); mengambil id dari row yg di select. ada saran? terimakasih

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

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