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
Complete Button in Simple Grid 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> <!--Css Style--> <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" /> <!--JavaScript includes--> <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', name:'upperType', index:'upperType', width:170 },
{ name:'discountAmount', index:'discountAmount', width:300 }, { name:'salesCommision', index:'salesCommision', width:180 name:'discountPercentage', index:'discountPercentage', }], 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. <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....