Tuesday, January 10, 2012

101 Flexigrid (Jquery plugin)

halow kali ini saya ingin share percobaan dengan flexigrid. Seputar tentang flexigrid flexigrid merupakan plugin jquery yang digunakan untuk manipulasi table. Dapat dilihat pada alamat http://flexigrid.info/
adapun keuntungan dari flexigrid adalah dapat menampilkan table dengan elegan tanpa harus mengutak atik css, dengan kata lain flexigrid akan menggenerate secara otomatis format table yang ditampilkan.
adapun hal-hal yang dibutuhkan:
  1. file jquery 1.7.1 dapat di download pada  http://jquery.com/
  2. file package flexigrid, yang mana terdapat css + image dan javascript.  http://flexigrid.info/
  3. dan file html
berikut langkah2nya :
pertama : buat file html yang berisi table dengan format terdapat tag "thead" untuk header dari table dan tag "th" untuk setiap header dan tag "tbody" untuk isi dari table dan tag "td" untuk setiap item isi table. dapat dilihat pada code html berikut. kemudian save pada directory webserver, dengan nama list.html
 <!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" xml:lang="fr" lang="fr">  
 <head>  
 <meta http-equiv="content-type" content="text/html;charset=UTF-8" />  
 <title>Belajar Flexigrid</title>  
 </head>  
 <body>  
 <h1>Belajar Jquery Flexigrid</h1>  
 <table id='flex1'>  
      <thead>  
           <tr>  
                <th width="100">Nama</th>  
                <th width="100">alamat</th>  
                <th width="100">no telp</th>  
           </tr>  
      </thead>  
      <tbody>  
           <tr>  
                <td >Dio</td>  
                <td >Indonesia</td>  
                <td >0431</td>  
           </tr>  
           <tr>  
                <td >nama2</td>  
                <td >alamat2</td>  
                <td >notelp2</td>  
           </tr>  
      </tbody>  
 </table>  
 </body>  
 </html>

setelah di view akan menampilkan :

kedua : download file jquery dan flexigrid. pada link di atas kemudian extract pada webserver tempat menyimpan file list.html tadi. sehingga hirarki dalam htdocs akan berisi.
  • list.html
  • css/ (folder css dari flexigrid)
  • js/ (folder js dari flexigrid)
  • jquery-1.7.1.min.js (file jquery)

ketiga : tambahkan tag head pada file list.html dengan tag berikut.
 <script type="text/javascript" src="jquery-1.7.1.min.js"></script>  
 <link rel="stylesheet" type="text/css" href="css/flexigrid.css" media="all" />  
 <script type="text/javascript" src="js/flexigrid.js"></script>

keempat : tambahkan id = "flex1" pada table yang ingin di terapkan flexigrid sehingga menjadi :
 <table id="flex1">

kelima : tambahkan script berikut pada tag head
 <script type="text/javascript">  
      $(document).ready(function() {  
           $('#flex1').flexigrid();  
      });  
 </script>

setelah di save maka tampilan akan berubah seperti berikut :
adapun keuntungan2 lain dari penggunaan ini adalah, anda dapat menghilangkan colom2 yang tidak ingin ditampilkan, dapat melakukan sort, namun untuk tutorial ini tidak bisa harus menambahkan beberapa parameter lagi pada flexigrid untuk melakukan sort, dan masih banyak lagi...

thanks,

semoga bermanfaat... :D
Posted by at Labels: , , ,

5 comments:

  1. UnknownJanuary 11, 2012 at 11:58 AM

    nice post! usul kalau synatxnya di highlight: http://wbageek.blogspot.com/2011/12/highlight-syntax-in-blogger.html

    ReplyDelete
  2. dio22rJanuary 13, 2012 at 12:16 PM

    thankyou2...
    trimakasih juga usulan dan linknya... :) kmaren sih sempat nyari2 tapi dapatnya cuma yang polosan itu... :)

    ReplyDelete
  3. resumedini.blogspot.comJune 29, 2012 at 10:59 AM

    thanks gan, artikelnya sangat bermanfaat..

    ReplyDelete
  4. AnonymousApril 20, 2013 at 11:41 AM

    sip yo...tak pake e bwt di reporting di kantor

    ReplyDelete

Subscribe to: Post Comments (Atom)