Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

JqGrid JqGrid adalah JavaScript kontrol yang menyediakan solusi kecepatan yang baik untuk mewakili dan memanipulasi data tabel di web JqGrid dikembangkan.

Presentasi serupa


Presentasi berjudul: "JqGrid JqGrid adalah JavaScript kontrol yang menyediakan solusi kecepatan yang baik untuk mewakili dan memanipulasi data tabel di web JqGrid dikembangkan."— Transcript presentasi:

1 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.

2 jQgrid Simple Grid With Jquery

3 jQgrid Complete Button in Simple Grid jquery

4 jQgrid Library yang di butuhkan Pada pembuatan grid dengan jquery biasanya library yang di gunakan adalah : adalah library jquery. adalah library untuk grid jquery. adalah library custom css jquery. adalah library css untuk tema / tampilan jquery. adalah library css untuk tampilan grid.

5 jQgrid adalah library untuk data Json Library diatas adalah saling berkaitan

6 jQgrid Contoh script : Library yang di include

7 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 },

8 { 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 });

9 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.

10 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.

11 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 :

12 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" } });

13 To Be Continue....


Download ppt "JqGrid JqGrid adalah JavaScript kontrol yang menyediakan solusi kecepatan yang baik untuk mewakili dan memanipulasi data tabel di web JqGrid dikembangkan."

Presentasi serupa


Iklan oleh Google