Bu yazida Flexigridin en basit anlatimiyla codeigniter da nasil kullanilacagini kodlariyla anlatmaya calisacagim.

Bunun icin kullandigim dosyalar ve diger paketleri versiyonlariyla birlikte asagidaki listede bulabilirsiniz.

Aciklamalari kod uzerinde tercih ettigim icin derhal baslayalim.

Oncelikle codeigniter da controllers bolumunde "grid.php" adinda bir dosya olusturalim. Sonra dosya icine asagidaki kodlari girelim.

(controllers/grid.php)

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Grid extends CI_Controller {
        public function index()
        {
               $this->load->view('grid');                 // Burada hemen view bolumunde olusturacagimiz goruntu sayfasini aciyoruz.
        }

        public function email()
        {
               $page = 1;                                         // Burasi flexigridin parametresidir. Sayfalamada sayfa numarasini gosterir.
               $sortname = 'id';                              // Burasi flexigridin parametresidir.Olusturdugumuz tablodan hangi kolona gore siralayacagini belirler.
               $sortorder = 'asc';                            // Burasi flexigridin parametresidir. Siralanmasini sectigimiz kolonun buyukten kucuge dogrumu yada kucukten buyuge dogrumu siralanacagini belirleriz. ('asc', 'dsc')
               $qtype = '';                                          // Burasi flexigridin parametresidir. Hangi kolonda arama yapmak istedigimiz bilgisini aliriz.
               $query = '';                                          // Burasi flexigridin parametresidir. Aramak istedigimiz kolonda aramak istedigimiz yazi bilgisini aliriz.

               #burada olusturacagimiz view klasorunun altindaki grid.php goruntu dosyasindan javascriptle POST ladigimiz verileri guvenli bir sekilde aliriz.
               $page = $this->db->escape_str(mysql_real_escape_string($this->input->post('page')));
               $sortname = $this->db->escape_str(mysql_real_escape_string($this->input->post('sortname')));
               $sortorder = $this->db->escape_str(mysql_real_escape_string($this->input->post('sortorder')));
               $qtype = $this->db->escape_str(mysql_real_escape_string($this->input->post('qtype')));
               $query = $this->db->escape_str(mysql_real_escape_string($this->input->post('query')));
               $rp = $this->db->escape_str(mysql_real_escape_string($this->input->post('rp')));

              $this->db->from('membership');                             // Veritabanindaki membership tablosunu velirliyoruz
              $this->db->order_by($sortname, $sortorder);     // colon adina ve kuckten-buyuge yada buyukten-kucuge siralama yontemini yaziyoruz.

               if(!is_null($qtype) && !is_null($query))                 // Eger kullanici siralamasi icin kolon ve siralama metodunu belirlediyse,
               {
                        $this->db->like($qtype, $query);                  // belirlenen kolonda belirlenen yaziyi ara-bul
                        $total = $this->db->get()->num_rows();     // ve getir.
                        $this->db->like($qtype, $query);
               }
               else                                                                             // belirlemediyse
               {
                        $total = $this->db->get()->num_rows();     // herhangi bir yazi aramasi yapmadan tum satirlari getir.
               }

               $pageStart = ($page-1)*$rp;                                 // Baslangic sayfasi.
               $data = array();                                                         // Bir array olusturuyoruz, bilgileri icine atmak icin
               $data['page'] = $page;                                            // Sayfa bilgisini arraya kaydediyoruz.
               $data['total'] = $total;                                               // Toplam kac sayfa oldugu bilgisini arraya kaydediyoruz
               $data['rows'] = array();                                            // Arrayin icinde yeni bir array olusturuyoruz.
               $this->db->select('membership_id, first_name, last_name, email_address');    // Veritabaninda almak istedigimiz kolon isimlerini belirliyoruz.
               if($qtype != '' && $query != '')                                  // Eger kullanici siralamasi icin kolon ve siralama metodunu belirlediyse,
               {
                        $this->db->where($qtype, $query);            // belirlenen kolonda belirlenen yaziyi ara-bul
               }
              $this->db->order_by($sortname, $sortorder);  // colon adina ve kuckten-buyuge yada buyukten-kucuge siralama yontemini yaziyoruz.

              $this->db->limit($rp, $pageStart);                       // Her sayfa icin kac satir getirmesi gerektigini ve sayfa numarasini aliyoruz
              $result = $this->db->get('membership');           // Ve veriyi getiriyor.

               # Burada veritabanindan alina her satir tek-tek olusturuluyor.
               foreach($result->result() as $row) {
                        # Her satirla ekleme butonu ve butona basildiginda calistiracagi javascript fonksiyonunu belirtiyoruz.
                        $add = "<a onclick=add(" . $row->membership_id . ")><img src=\"/AutoMailing/images/add.png\"></a>";
                        # Gerekli sekilde tabloda gosterilmesi icin satirlari arraya kaydediyoruz.
                        $data['rows'][] = array
                        (
                                'id' => $row->membership_id,
                                'cell' => array($row->membership_id, $row->first_name, $row->last_name, $row->email_address, $add)
                        );
              }
              echo json_encode($data);                                   // JSON formatinda bilgiyi yazdiriyoruz. (XML formatinda da belirtebilirsiniz)
        }
}

Simdi, view klasorunun altindan cagirdigimiz grid.php dosyasini olusturalim.

(views/grid.php)

<!-- HTML genel tag larini dolduruyoruz. -->
<!DOCTYPE html>
<html lang="en">
      <head>
             <title>Phone Directory</title>
             <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
             <link rel="stylesheet" href="http://localhost/CI/css/style.css" />
             <link rel="stylesheet" type="text/css" href="http://localhost/CI/css/flexigrid.pack.css" />
             <script type="text/javascript" src="http://localhost/CI/js/jquery-1.5.2.min.js"></script>
             <script type="text/javascript" src="http://localhost/CI/js/flexigrid.pack.js"></script>

       </head>
       <body>
             <table class="flexme3" style="display: none"></table>          <!-- Flexigridi olu;turuyoruz -->
             <script type="text/javascript">
                     $(".flexme3").flexigrid
                     ({                                                                                                  // Flexigrid class inda bir tablo olusturdugumuzda ozellikleri velirliyoruz.
                            url :           'http://localhost/CI/index.php/grid/email',    // AJAX kullanarak bilgiyi bu sayfada goruntulenmesi icin nereden alacagini belirliyoruz.(Ornegimizde biz controllers/grid.php nin altindaki "email" fonksiyonu veriyoruz)
                            dataType :      'json',                                                           // Tablonun data turunu belirliyoruz. (JSON, XML)

                            // Burada Kolon isimleri ve ozellikleri belirleniyor.
                            // display: 'GRID'       -> Kolonda gorulecek basligi belirliyoruz.
                            // name : 'group_id'  -> Veritabanindan eslestirmek istenen kolon adini belirliyoruz.
                            // width : 20                -> Kolonun genisligini belirliyoruz.
                            // align: 'center'          -> Yazinin satirdaki konumunu belirliyoruz.(sagda, solda, ortada).
                            // hide : true               -> Kolonun goruntulenip goruntulenmeyecegini belirliyoruz.
                            colModel:
                            [
                                   {display: 'GRID',           name : 'group_id',              width : 20,    sortable : true, align: 'center',},
                                   {display: 'ID',                 name : 'membership_id', width : 20,    sortable : true, align: 'center',},
                                   {display: 'First Name', name : 'first_name',          width : 150,  sortable : true, align: 'left'},
                                   {display: 'Last Name', name : 'last_name',          width : 150,  sortable : true, align: 'left'},
                                   {display: 'E-mail',         name : 'email_address',  width : 200,  sortable : true, align: 'left'},
                                   {display: '',                     name : 'add',                       width : 15,                                align: 'center'}
                            ],

                            // Burada eklemek istiyorsak butonlarimiz belirliyoruz.
                            // name: 'Add'                       -> Butonun gorulecek adini belirliyoruz.
                            // bclass: 'add'                     -> Butonun adini belirliyoruz.
                            // onpress : doCommand -> Varsa javascript olayini belirliyoruz.
                            buttons :
                            [
                                   {name: 'Add',         bclass: 'add',         onpress : test},
                                   {name: 'Remove', bclass: 'remove',  onpress : test},
                                   {separator: true}
                            ],

                            // Burada Arama yapabilecegimiz bolumleri belirliyoruz
                            // display: 'First Name' -> Arama yapilabilecek kolonun goruntulenecek adini belirliyoruz.
                            // name: 'first_name'    -> Arama yapilabilecek kolonun adini belirliyoruz.
                            // isdefault: true             -> Varsayilan arama kolonunu belirliyoruz.
                            searchitems :
                            [
                                   {display: 'First Name',         name : 'first_name'},
                                   {display: 'Name',                  name : 'last_name',  isdefault: true},
                                   {display: 'E-mail Address', name : 'email_address'}
                            ],

                            sortname :                      "email_address",       // Varsayilan olarak siralak istediginiz kolonu POST ediyor.
                            sortorder :                       "asc",                            // Varsayilan olarak kucukten-buyuge, buyukten-kucuge siralama bilgisini POST ediyor.
                            usepager :                      true,                              // Tablonun alt panelinin goruntulenmesini aktif yada pasif ediyoruz
                            title :                                 "E-mail List",               // Tablonun ismini belirliyoruz.
                            useRp :                           true,                              // Sayfada kac satir goruntulenmesi secenegini aktif yada pasif ediyoruz.
                            rp :                                    10,                                // Her sayfada kac satir gosterecegini belirliyoruz.
                            showTableToggleBtn : false,
                            resizable :                       false,                            // Tablonun boyutlandirma yapilabilip yapilamayacagini belirliyoruz
                            width :                              737,                              // Sayfanin genisligini belirtiyoruz
                            height :                            370,                              // Sayfanin yuksekligini belirliyoruz.
                     });

                     function test(com,grid) {}                                          // Butonlara basildiginda cagirdigi javascript fonksiyonunu burada belirleyebilirsiniz
                     function add(com,grid) {}                                          // Tabloda satirlardaki ikonlara basildiginda cagrilan javascript fonksiyonu burada belirleyebilirsiniz

              </script>
       </body>
</html>

Notlar:
 * Codeigniter yapisinda veritabani islemleri Models klasorunun altinda dosya olusturularak yapilir. Ben burda kod fazla parcalara ayrilip okuyucular uygulamakta zorlanmasinlar diye veritabani baglantilarimi views/grid.php dosyasinda yaptim.

* Olusturulan dosyalar:
   - controllers/grid.php
   - views/grid.php
- Kullanilan hazir kodlar ve versiyonlar
  - Codeigniter  Versiyon: 2.1.2
  - Flexigrid        Versiyon: 2.0             Dosya turu: css
  - Style               Versiyon: Kisisel      Dosya turu: css
  - Jquery           Versiyon: 1.5.2          Dosya turu: js
  - Flexigrid        Versiyon: 2.0             Dosya turu: js