Pada artikel kali ini kita akan membahas bagaimana cara membuat filter pada Gridview Yii Framework menggunakan Select2 plugin.

Sebelum kita mulai, pastikan dulu kita memiliki extension select2 pada aplikasi kita.
Select2
Install select2 dengan menambahkan kode berikut ini pada file composer.json
"kartik-v/yii2-widget-select2": "@dev"
Kemudian jalankan perintah composer update.
Table
Kita akan menggunakan 2 table sederhana untuk tutorial kali ini
Table Provinsi
Nama Kolom | Tipe Data |
---|---|
id | Integer (Auto Increment) |
nama | Varchar (100) |
Table Kabupaten
Nama Kolom | Tipe Data |
---|---|
id | Integer (Auto Increment) |
nama | Varchar (100) |
id_kabupaten | Integer |
Seperti kita lihat, kabupaten memiliki relasi dengan table provinsi. Final akhirnya, kita akan membuat list daftar kabupaten dalam GridView, dan pada kolom id_kabupaten kita akan menggunakan filter select2.
Generate Gii
Langkah pertama, generate kedua model tersebut dan generate juga proses CRUD untuk model kabupaten (kita hanya akan menggunakan model kabupaten saja untuk tutorial ini).
Berikut ini adalah kode GridView hasil generate Gii untuk model kabupaten.
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
'nama',
'id_provinsi',
['class' => 'yii\grid\ActionColumn'],
],
]); ?>
Kode di atas akan menghasilkan output seperti dibawah ini.

Seperti kita lihat, isi kolom id_provinsi masih menggunakan angka dan filter untuk kolom tersebut juga masih menggunakan text field. Hal ini tentu saja akan merepotkan pengguna, karena pengguna harus bisa mengetahui id yang tepat untuk melakukan filter.
GridView Filter
Untuk mengimplementasikan Select2 sebagai filter pada GridView, kita harus memodifikasi kode diatas.
Jangan lupa untuk melakukan import untuk ArrayHelper dan model Provinsi.
<?php
use yii\helpers\ArrayHelper;
use app\models\Provinsi;
?>
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
'nama',
[
'attribute' => 'id_provinsi',
'filter' => \kartik\select2\Select2::widget([
'model' => $searchModel,
'attribute' => 'id_provinsi',
'data' => ArrayHelper::map(Provinsi::find()->all(), 'id', 'nama')
]),
],
['class' => 'yii\grid\ActionColumn'],
],
]); ?>
Dengan kode diatas kita telah berhasil menambahkan select2 sebagai filter pada kolom id_provinsi.

Akan tetapi rasanya masih kurang user friendly jika nilai id_provinsi masih berupa angka. Untuk itu kita perlu mendefinisikan nilai dari id_provinsi yang sesuai.
Pastikan kita memiliki relasi terhadap model Provinsi pada model Kabupaten
public function getProvinsi()
{
return $this->hasOne(Provinsi::className(), ['id' => 'id_provinsi']);
}
Selanjutnya tambahkan attribute value pada kolom id_provinsi untuk menampilkan nama provinsi.
[
'attribute' => 'id_provinsi',
'value' => function($data) {
return $data->provinsi->nama;
},
'filter' => \kartik\select2\Select2::widget([
'model' => $searchModel,
'attribute' => 'id_provinsi',
'data' => ArrayHelper::map(Provinsi::find()->all(), 'id', 'nama')
]),
],

No Comments
Leave a comment Cancel