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

5 comments:

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

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

    ReplyDelete
  3. thanks gan, artikelnya sangat bermanfaat..

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

    ReplyDelete