jq Grid Jq Grid adalah Java Script kontrol

  • Slides: 13
Download presentation
jq. Grid Jq. Grid adalah Java. Script kontrol yang menyediakan solusi kecepatan yang baik

jq. Grid Jq. Grid adalah Java. Script kontrol yang menyediakan solusi kecepatan yang baik untuk mewakili dan memanipulasi data tabel di web Jq. Grid 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 j. Query, Theme. Roller, & j. Query UI. Tony mendapatkan ide untuk jq. Grid, 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 jq. Grid dan membuatnya tersedia secara gratis sebagai cara untuk membuat kontribusi kepada komunitas open source.

j. Qgrid Simple Grid With Jquery

j. Qgrid Simple Grid With Jquery

j. Qgrid Complete Button in Simple Grid jquery

j. Qgrid Complete Button in Simple Grid jquery

j. Qgrid Library yang di butuhkan Pada pembuatan grid dengan jquery biasanya library yang

j. Qgrid 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. jq. Grid. 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.

j. Qgrid <script type="text/javascript" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="grid. locale -en. js"/> adalah library untuk data Json <script

j. Qgrid <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

j. Qgrid Contoh script : Library yang di include. . <head>. . . <!--Css

j. Qgrid 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" /> <!--Java. Script 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. jq. Grid. min. js" ></script> <script type="text/javascript" src="jquery. json-1. 3. min. js"></script>. . .

Contoh Script Jquery (Create Grid) : j. Query("#grid. List. Product. Type"). jq. Grid({ url:

Contoh Script Jquery (Create Grid) : j. Query("#grid. List. Product. Type"). jq. Grid({ url: '. . /data. Json. json', datatype: "json", height: 200, width: 850, col. Names: ['No', 'Name', 'Description', 'Upper Type', 'Discount Amount', 'Sales Commission', 'Discount Percentage'], col. Model: [{ name: 'id', index: 'id', width: 30 }, { name: 'name', index: 'name', width: 150 }, { name: 'description', index: 'description', width: 150 }, { name: 'upper. Type', index: 'upper. Type', width: 170 },

{ name: 'discount. Amount', index: 'discount. Amount', width: 300 }, { name: 'sales. Commision',

{ name: 'discount. Amount', index: 'discount. Amount', width: 300 }, { name: 'sales. Commision', index: 'sales. Commision', width: 180 }, { name: 'discount. Percentage', index: 'discount. Percentage', width: 180 }], pager: '#row. List. Product. Type', sortname: 'product. Type', viewrecords: true, sortorder: "desc", caption: "Product Type" }); j. Query("#grid. List. Product. Type"). jq. Grid('nav. Grid', '#row. List. Product. Type', { add: false, del: false, search: false, edit: false, refresh: false });

Explanation "#grid. List. Product. Type", adalah pernyataan untuk ID Grid. url: '. . /data.

Explanation "#grid. List. Product. Type", adalah pernyataan untuk ID Grid. url: '. . /data. Json. 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. col. Names: ['No'], adalah untuk header dari Grid kolom yang akan di buat. col. Model: : [{name: 'id', index: 'id', width: 30}] adalah untuk mendeskripsikan dari header / col. Names. Untuk No, dengan nama ID, index ID dan lebar 30. pager: '#row. List. Product. Type', 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. j. Query("#grid. List. Product.

Explanation caption: "Product Type", adalah untuk menunjukan judul dari grid. j. Query("#grid. List. Product. Type"). jq. Grid('nav. Grid', '#row. List. Product. Type', 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 jq. Grid, dan untuk menampilkannya hanya dengan memberikan nilai true. Dalam hal ini seluruh button bernilai false, yaitu tidak ditampilkan.

j. Qgrid Untuk dapat melihat row data list yang akan di tampilkan adalah dengan

j. Qgrid Untuk dapat melihat row data list yang akan di tampilkan adalah dengan menambahkan attribute row. List: [jumlah. Data, jumlah. Data] Contoh : pager: '#row. List. Product. Type', row. List: [10, 40, 70], sortname: 'product. Type', 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="grid. List. Product. Type" ></table> <div id="row. List. Product. Type"></div> </body>

j. Qgrid Membuat Button Adapun cara untuk membuat button pada pager tanpa menggunakan button

j. Qgrid Membuat Button Adapun cara untuk membuat button pada pager tanpa menggunakan button yang sudah di sediakan oleh jq. Grid. Dengan menambahkan script. nav. Button. Add(“idrow”, {caption: ”text. Button/Judul. Button”, buttonicon: ”ui-icon-select”}) pada akhir script nav. Grid. Contoh : . nav. Button. Add("#row. List. Product. Type", {caption: "New Product Type", buttonicon: "ui-icon-select" } });

To Be Continue. .

To Be Continue. .