Yii2 : Edit Action Button Pada Grid View

Modifikasi GridView dengan mengganti template tombol seperti gambar dibawah.

Gridview adalah salah satu widget yang sangat berguna jika anda ingin membuat suatu halaman admin dengan cepat. Untuk menggunakannya dibutuhkan data dari penyedia data dan merender setiap baris menggunakan seperangkat kolom yang menyajikan data dalam bentuk tabel. Setiap baris mewakili satu item data, dan setiap kolom newakili attributes item data.

Nah bagaimana cara untuk mengganti tampilan button dari column action, berikut langkah-langkahnya :

pertama kita buat kode GridView nya :

1. $dataProvider,

3. // 'filterModel' => $searchModel,

4. 'columns' => [

5. ['class' => 'yii\grid\SerialColumn'],

6. // 'id_ptknonpns',

7. // 'id',

8. 'nik',

9. // 'nuptk',

10. 'nama',

11. // 'gelar_belakang',

12. 'ttl',

13. //'jk',

14. //'pend',

15. // 'temp_tugas',

16. //'npsn',

17. // 'tmt_gtt',

18. //'jenjang',

19. // 'kec',

20. 'masker_th',

21. // 'masker_bl',

22. // 'ket',

23. ['class' => 'yii\grid\ActionColumn'],

24. ],

25. ]); ?>

26. 
    

Berikut tampilannya :

kemudian tambahkan kode dibawah ini, pada class ActionColumn :

['class' => 'yii\grid\ActionColumn',
'contentOptions' => ['style' => 'widget:100px, align:center;'],
'header' => 'Actions',
'template' => '{lihat} &nbsp {perbaiki} &nbsp {nik}',
'buttons' => [
'perbaiki' => function($url, $model, $key) {
return Html::a(' Perbaiki', ['perbaikan', 'id'=>$model-id_ptknonpns], [
'class' => 'btn btn-primary btn-xs',
]);
},
'lihat' => function($url, $model, $key){
return Html::a(' Lihat',['view', 'id'=>$model->id_ptknonpns],[                                        
'class' => 'btn btn-success btn-xs'
]);
},
'nik' => function($url, $model, $key){
return Html::a(' NIK',['editnik', 'id'=>$model->id_ptknonpns], [
'class' => 'btn btn-warning btn-xs',
]);
}
]
],

'perbaiki' => function($url, $model, $key) {
return Html::a(' Perbaiki', ['perbaikan', 'id'=>$model->id_ptknonpns], [
'class' => 'btn btn-primary btn-xs',
]);
},
'lihat' => function($url, $model, $key){
return Html::a(' Lihat',['view', 'id'=>$model->id_ptknonpns], [
'class' => 'btn btn-success btn-xs'
]);
},
'nik' => function($url, $model, $key){
return Html::a(' NIK',['editnik', 'id'=>$model->id_ptknonpns], [
'class' => 'btn btn-warning btn-xs',
]);
}
]
],

Selesai, dan hasinya akan seperti ini :

Berikut adalah full code :

$dataProvider,
        // 'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],

            // 'id_ptknonpns',
            // 'id',
            'nik',
            // 'nuptk',
            'nama',
            // 'gelar_belakang',
            'ttl',
            //'jk',
            //'pend',
            // 'temp_tugas',
            //'npsn',
            // 'tmt_gtt',
            //'jenjang',
            // 'kec',
            'masker_th',
            // 'masker_bl',
            // 'ket',

             ['class' => 'yii\grid\ActionColumn',
                    'contentOptions' => ['style' => 'widget:100px, align:center;'],
                    'header' => 'Actions',
                    'template' => '{lihat} &nbsp {perbaiki} &nbsp {nik}',
                    'buttons' => [
                            'perbaiki' => function($url, $model, $key) {
                                return Html::a(' Perbaiki', ['perbaikan', 'id'=>$model->id_ptknonpns], [
                                    'class' => 'btn btn-primary btn-xs',
                                    ]);
                            },
                            'lihat' => function($url, $model, $key){
                                return Html::a(' Lihat',['view', 'id'=>$model->id_ptknonpns], [
                                        'class' => 'btn btn-success btn-xs'
                                    ]);
                            },
                            'nik' => function($url, $model, $key){
                                return Html::a(' NIK',['editnik', 'id'=>$model->id_ptknonpns], [
                                        'class' => 'btn btn-warning btn-xs',

                                    ]);
                            }
                    ]
             ],
        ],
    ]); ?>

Sekian, Semoga bermanfaat.

Read More