Tips-Trik Sederhana Modifikasi Tampilan CGridView di Framework Yii

Salah satu fitur yang sangat membantu di framework PHP Yii adalah Gii, yaitu tool untuk meng-generate kode untuk proses CRUD (Create Read Update Delete) masing-masing tabel di database. Dengan proses CRUD kita bisa melakukan proses penambahan data, membaca data, memperbaharui data, dan menghapus data. Untuk menampilkan data hasil CRUD dari Gii menggunakan dua model tampilan, yaitu List View menggunakan widget CListView dan Grid View menggunakan widget CGridView. Pada tulisan ini saya akan mencoba memberikan beberapa tips sederhana untuk memodifikasi tampilan data yang menggunakan widget CGridView.

1. Penomoran

Gambar 1. Contoh hasil penomoran data di widget CGridView Yii

Secara default, CGridView tidak menampilkan penomoran untuk masing-masing data. Untuk memberi penomoran, cukup tambahkan kode berikut di array columns di CGridView:

1:  array(  
2:          'header'=> 'No',  
3:          'value' => '$this->grid->dataProvider->pagination->currentPage*$this->grid->dataProvider->pagination->pageSize + $row+1',  
4:  ),

2. Mengubah Search filter menjadi dropdown
Pada contoh di Gambar 1, terlihat bahwa di bawah nama kolom level terdapat input tipe teks sebagai filter pencarian. Misal di tabel user, jenis level user hanya ada dua yaitu administrator dan operator, maka untuk memudahkan pengguna dalam memfilter maka input tipe teks bisa diubah menjadi seleksi bertipe dropdown. Untuk mengubahnya, cukup memodifikasi data array level menjadi seperti berikut ini:

1:  array(  
2:          'name'    => 'level',  
3:          'value'    => '$data->level == 1 ? "Administrator" : "Operator"',  
4:          'filter'=> array(1 => 'Administrator', 2 => 'Operator'), // Membuat dropdown filter  
5:  ),  

Gambar 2. Contoh hasil mengubah input tipe teks pada filter pencarian CGridView Yii menjadi dropdown

3. Mengubah lebar kolom tabel
Lebar tabel grid hasil CGridView di Yii dalam kondisi standar menyesuaikan dengan panjang data. Jika ingin mengubah ukuran lebarnya menjadi spesifik dalam ukuran tertentu bisa menambahkan parameter htmlOptions seperti berikut:

1:  array(  
2:          'name'    => 'level',  
3:          'value'    => '$data->level == 1 ? "Administrator" : "Operator"',  
4:          'filter'=> array(1 => 'Administrator', 2 => 'Operator'),  
5:          'htmlOptions' => array('width' => '120px')  // Mengeset lebar kolom level menjadi 120px;
6:  ),  

Demikian beberapa tips dan trik sederhana untuk memodifikasi tampilan CGridView standar di framework Yii, mudah bukan? Semoga bermanfaat dan mohon koreksinya. :)

Keywords: modifikasi cgridview yii, tips trik yii, tips trik cgridview, tips trik php, trik filter cgridview, memberi nomor cgridview, mengubah lebar kolom cgridview,