The Importance of Sharing


Yap, akhirnya saya bisa menulis dan berbagi lagi, setelah sekian lama berkutat di tugas akhir dan Kerjaan. Tulisan saya kali ini ingin berbagi mengenai pengalaman menggunakan JQuery EasyUI. Saya menggunakan JQuery EasyUI dalam pembuatan aplikasi berbasis web untuk tugas akhir saya. JQuery EasyUI memniliki banyak plugin untuk membantu anda dalam membangun aplikasi berbasis web, ada datagrid, numberbox, datebox, dan lain sebagainya. Nah, saya ingin membagi pengalaman ketika berkutat dengan salah satu plugin JQuery EasyUI yaitu datagrid, dimana saya ingin membuat datagrid yang berisi subgrid dengan checkbox didalam subgrid tersebut. Kenapa saya bisa berkutat dengan hal tersebut ? karena itu merupakan revisi tambahan dari dosen penguji saya😦 *revisi ohh… revisi. Pada tulisan kali ini saya akan membahasnya dengan contoh yang sederhana. Untuk Library JQuery EasyUI dapat didownload disini.

Contoh yang akan saya gunakan adalah daftar barang yang harus dibeli di supermarket. Anggap saja kalo kita berbelanja, kita memerlukan barang apa saja yang akan dibeli. Barang tersebut kita kelompokkan seperti peralatan mandi, makanan, minuman, alat tulis kantor dan sebagainya. Pertama-tama saya buat dulu file JSON untuk data yang akan ditampilkan di datagrid, yaitu master.json dan 4 detail.json. Buat yang belum tau JSON bisa ditengok disini.

[{"id":"1","jenis":"Makanan"},{"id":"2","jenis":"Minuman"},
{"id":"3","jenis":"Peralatan Mandi"},{"id":"4","jenis":"Alat Tulis"}]

kemudian saya buat file json untuk detail pada item dengan id 1 sampai dengan 4 dan saya beri nama sesuai dengan id master sehingga menjadi detail1.json, detail2.json dan seterusnya.

[{"idParent" : "1", "nama" : "Mie Goreng", "jumlah" : "5"}, {"idParent" : "1", "nama" : "telor", "jumlah" : "3"},
 {"idParent" : "1", "nama" : "Snack", "jumlah" : "4"}]
[{"idParent" : "2", "nama" : "Air Galon", "jumlah" : "1"},
{"idParent" : "2", "nama" : "Teh", "jumlah" : "1"}]
[{"idParent" : "3", "nama" : "Sabun", "jumlah" : "5"}, {"idParent" : "3", "nama" : "Pasta Gigi", "jumlah" : "1"},
{"idParent" : "3", "nama" : "Sabun Muka", "jumlah" : "1"}, {"idParent" : "3", "nama" : "Shampoo", "jumlah" : "1"}]
[{"idParent" : "4", "nama" : "Pulpen", "jumlah" : "5"},{"idParent" : "4", "nama" : "Pensil", "jumlah" : "4"},
{"idParent" : "4", "nama" : "Penggaris", "jumlah" : "1"},{"idParent" : "4", "nama" : "Buku Tulis", "jumlah" : "3"}]

Kemudian saya akan membuat file index.html yang akan menampilkan data master dan detail yang telah saya buat.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="themes/icon.css"/>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<script type="text/javascript" src="src/datagrid-detailview.js"></script>
<script type="text/javascript">
$(function(){
	$("#tb-belanja").datagrid({
		view: detailview,
		detailFormatter: function(index,row){
			return "<div style=\"padding:2px\"><table id=\"detail-"+ index + "\"></table></div>";
		},
		onExpandRow:function(index,row){
			$("#detail-" + index).datagrid({
				url:"detail" + row.id + ".json",
				fitColumns:true,
				singleSelect:true,
				rownumbers:true,
				loadMsg:"Tunggu Sebentar",
				height:"auto",
				checkOnSelect:true,
				selectOnCheck:true,
				singleSelect:false,
				columns:[[
					{field:"ck", checkbox:"true",width:15, align:"center"},
					{field:"nama",title:"Nama Barang",width:50, align:"center"},
					{field:"jumlah",title:"Jumlah",width:10, align:"right"}
				]],
				onResize:function(){
					$("#tb-belanja").datagrid("fixDetailRowHeight",index);
				},
				onLoadSuccess:function(){
					setTimeout(function(){
						$("#tb-belanja").datagrid("fixDetailRowHeight",index);
					},0);
				}
			});
			$("#tb-belanja").datagrid("fixDetailRowHeight",index);
		}
	});
});
</script>
<title>Subgrid with Checkbox</title>
</head>
<body>
<div align="center">
	<table id="tb-belanja" style="width:500%; height:500%;" title="Daftar Belanja" class="easyui-datagrid" fitColumns="true" singleSelect="true" url="master.json" toolbar="#toolbars">
		<thead>
		<tr>
			<th align="center" field="id" width="10">No</th>
			<th align="center" field="jenis" width="30">Jenis Barang</th>
		</tr>
		</thead>
	</table>
	<div id="toolbars">
		<a href="javascript:void(0)" class="easyui-linkbutton" plain="true" iconCls="icon-save" onclick="Simpan()" style="font-size:16px;font-weight:bold">Simpan</a>
	</div>
</div>
</body>
</html>

Setelah dijalankan, pada browser akan muncul tampilan sebagai berikut.
hasil subgridSaya telah dapat membuat datagrid yang berisi subgrid dan dilengkapi dengan checkbox untuk memilih item. Kemudian untuk dapat membaca  item mana yang telah dipilih, maka tambahkan kode javascript dibawah ini.

function simpan(){
	var hasil="";
	var totalRow=$("#tb-belanja").datagrid("getRows").length;
	var data=[];
	var idx=0;
	for(var i = 0 ; i < totalRow; i++){
		//data[i] = $("#detail-" + i).datagrid("getSelections");
		if ($("#detail-" + i).datagrid().length > 0){
			var tes = $("#detail-" + i).datagrid("getChecked");
			if (tes.length > 0){
				data[idx]=$("#detail-" + i).datagrid("getChecked");
				idx+=1;
			}
		}
	}
	for (var i = 0 ; i < data.length; i++){
		for (var j=0 ; j < data[i].length; j++){
			hasil += data[i][j].nama + "\n";
		}
	}
	alert(hasil);
}

Jika kode tersebut sudah anda tambahkan ke dalam file index.html, maka setelah dijalankan maka akan muncul tampilan sebagai berikut.

hasil clickItem yang dipilih akan ditampilkan dalam bentuk alert. Demikian tulisan saya kali ini semoga bermanfaat.

 

Comments on: "JQuery Easyui Subgrid dengan CheckBox" (5)

  1. siang…
    kalo mau nyimpen ke database caranya gimana ya?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: