Tutorial JqGrid (Part I)

Transcript Tutorial JqGrid (Part I)

jqGrid



JqGrid adalah JavaScript kontrol yang menyediakan solusi
kecepatan yang baik untuk mewakili dan memanipulasi data tabel di
web
JqGrid dikembangkan oleh Tony Tomov di Trirand Inc, sebuah
perusahaan pengembangan berbasis perangkat lunak di Sofia.
Trirand mengkhususkan diri dalam pengembangan komponen web,
dan mencakup standar bebas dan terbuka seperti jQuery,
ThemeRoller, & jQuery UI.
Tony mendapatkan ide untuk jqGrid, ketika dia membutuhkan cara
mudah untuk mewakili informasi database dalam suatu proyek.
Syarat pertama adalah kecepatan, kedua dari teknologi server-side
dan backend database. Tony mengembangkan jqGrid dan
membuatnya tersedia secara gratis sebagai cara untuk membuat
kontribusi kepada komunitas open source.
jQgrid

Simple Grid With Jquery
jQgrid

Complete Button in Simple Grid jquery
jQgrid

Library yang di butuhkan
Pada pembuatan grid dengan jquery biasanya library yang di gunakan
adalah :





<script src="jquery-1.4.4.js"/> adalah library
jquery.
<script type="jquery.jqGrid.min.js" /> adalah
library untuk grid jquery.
<link rel="stylesheet" type="text/css"
href="jquery-ui-1.8.7.custom.css" /> adalah
library custom css jquery.
<link rel="stylesheet" type="text/css"
href="ui.theme.css" /> adalah library css untuk
tema / tampilan jquery.
<link rel="stylesheet" type="text/css"
href="ui.jqgrid.css" /> adalah library css untuk
tampilan grid.
jQgrid


<script type="text/javascript"
src="grid.locale-en.js"/> adalah library untuk
data Json
<script type="text/javascript"
src="jquery.json-1.3.min.js"/> adalah library
untuk data Json
Library diatas adalah saling berkaitan
jQgrid

Contoh script : Library yang di include.
...
<head>
...

<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.7.custom.css"/>
<link rel="stylesheet" type="text/css" href="ui.theme.css" />
<link rel="stylesheet" type="text/css" href="ui.jqgrid.css" />

<script src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="grid.locale-en.js" ></script>
<script type="text/javascript" src=”jquery.jqGrid.min.js" ></script>
<script type="text/javascript" src="jquery.json-1.3.min.js"></script>
...
Contoh Script Jquery (Create Grid) :
jQuery("#gridListProductType").jqGrid({
url:'../dataJson.json',
datatype: "json",
height: 200,
width:850,
colNames:['No','Name','Description','Upper Type','Discount Amount',
'Sales Commission', 'Discount Percentage'],
colModel:[{
name:'id',
index:'id',
width:30
},{
name:'name',
index:'name',
width:150
},{
name:'description',
index:'description',
width:150
},{
name:'upperType',
index:'upperType',
width:170
},
{
name:'discountAmount',
index:'discountAmount',
width:300
}, {
name:'salesCommision',
index:'salesCommision',
width:180
}, {
name:'discountPercentage',
index:'discountPercentage',
width:180
}],
pager: '#rowListProductType',
sortname: 'productType',
viewrecords: true,
sortorder: "desc",
caption:"Product Type" });
jQuery("#gridListProductType").jqGrid('navGrid','#rowListProductType',{
add:false,
del:false,
search:false,
edit:false,
refresh:false
});
Explanation



"#gridListProductType", adalah pernyataan untuk ID Grid.
url:'../dataJson.json', adalah untuk memanggil data json untuk di masukan
ke dalam grid.
datatype: "json", adalah pernyataan untuk data yang akan di masukan ke
dalam grid dengan tipe data JSON.

height: 200,width:850, adalah untuk mengatur panjang dan tinggi Grid.

colNames:['No'], adalah untuk header dari Grid kolom yang akan di buat.




colModel::[{name:'id',index:'id',width:30}] adalah untuk mendeskripsikan
dari header / colNames. Untuk No, dengan nama ID, index ID dan lebar 30.
pager: '#rowListProductType', adalah pernyataan untuk ID row pada grid.
Letak pager adalah yang berada pada bawah grid, tempat yang terdapat
viewrecord.
sortname: 'name', untuk menunjukkan kolom pada grid yang di sortir, yaitu
pada kolom name akan dapat terlihat tanda sort pada header kolom.
viewrecords: true, untuk memunculkan banyaknya data yang ada dalam
grid, jika bernilai true. Jika false, maka tidak akan tampil.
Explanation



caption:"Product Type", adalah untuk menunjukan judul dari grid.
jQuery("#gridListProductType").jqGrid('navGrid','#rowListProductType',
adalah untuk membuat button navigasi yang sudah tersedia dari jquery.
Biasanya button yang sudah di sediakan adalah button Add,Edit,Refresh,Search
dan Delete.
add:false,del:false,search:false,edit:false,refresh:false adalah button
yang sudah disediakan dari jqGrid, dan untuk menampilkannya hanya
dengan memberikan nilai true. Dalam hal ini seluruh button bernilai false,
yaitu tidak ditampilkan.
jQgrid

Untuk dapat melihat row data list yang akan di tampilkan adalah dengan
menambahkan attribute rowList:[jumlahData,jumlahData,jumlahData]
Contoh :
pager: '#rowListProductType',
rowList:[10,40,70],
sortname: 'productType',
viewrecords: true,
sortorder: "desc",
caption:"Product Type"

Untuk dapat menampilkan grid pada srcipt HTML adalah dengan
memanggil ID dari grid dan row yang telah di buat.
Contoh :
<body>
<table id="gridListProductType" ></table>
<div id="rowListProductType"></div>
</body>
jQgrid


Membuat Button
Adapun cara untuk membuat button pada pager tanpa menggunakan button
yang sudah di sediakan oleh jqGrid. Dengan menambahkan script
.navButtonAdd(“idrow”,{caption:”textButton/JudulButton”,buttonicon:
”ui-icon-select”}) pada akhir script navGrid.
Contoh :
.navButtonAdd("#rowListProductType",{caption:"New Product
Type",buttonicon:"ui-icon-select" } });
To Be Continue....

Tutorial JqGrid (Part I)

Transcript Tutorial JqGrid (Part I)

Directory