Переопределяем кнопки просмотра, редактирования и удаления в GridView Yii2

Если вы знакомы с PHP фреймворком Yii2, то знаете, что в виджете GridView выводятся стандартные кнопки просмотра, редактирования и удаления записи с SVG иконками, которые чаще всего не вписываются в дизайн проекта и, если уж быть до конца честным, то они устарели и берут свои истоки из Bootstrap 3-ей версии, в то время как уже давно вышла пятая и многие на нее перешли. Но Yii2 не был бы так популярен, если бы с этим ничего нельзя было поделать. Эти кнопки можно переопределить на свои и сделать это не сложно. Можно поступить двумя способами. Хотелось бы начать сразу со второго, так как он наиболее предпочтительнее и первый вариант лучше не использовать. Но чтобы вы поняли почему именно, покажу оба варианта.

Переопределяем кнопки в GridView Yii2. Способ 1

Вот весь код целиком, а дальше рассмотрим его плюсы и минусы.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

[
  'class' => ActionColumn::className(),
  'urlCreator' => function ($action, User $model, $key, $index, $column) {
    return Url::toRoute([$action, 'id' => $model->id]);
  },
  'buttons' => [
     'update' => function ($url,$model, $key) {
        return Html::a('<i class="mdi mdi-square-edit-outline action-icon text-warning"></i>',$url);
      },
     'view' => function ($url,$model, $key) {return Html::a('<i class="mdi mdi-eye action-icon text-success"></i>',$url);
     },
     'delete' => function ($url,$model, $key) {return Html::a('<i class="mdi mdi-trash-can action-icon text-danger"></i>',$url,['data-confirm' => Yii::t('yii', 'Удалить сотрудника с ID: '.$key.'?'),'data-method' => 'post', 'data-pjax' => '1',]);
     },
],
],

В этом примере я установил в GridView каждой кнопке отдельную иконку из Material Design. Как вы понимаете, такой подход удобен в том случае, когда в разных GridView разные кнопки. В остальных случаях постоянное дублирование одного и того же недопустимо и отсюда вытекает способ под номером два.

Переопределяем кнопки в GridView Yii2. Способ 2

Сейчас мы займемся настоящим программированием и переопределим стандартный класс:

yii\grid\ActionColumn

Кнопки в нем по умолчанию прописаны так:

И напишем свой собственный класс, который будем наследовать от него. Для этого я создал папку по пути frontend\components\classes и назвал его CustomActionColumnClass. Вот его код:

1
2
3
4
5
6
7
8
9
10
11
12

namespace frontend\components\classes;
 
use yii\grid\ActionColumn;
class CustomActionColumnClass extends ActionColumn
{
    public $icons = [
        'eye-open' => '<i class="mdi mdi-eye action-icon text-success"></i>',
        'pencil' => '<i class="mdi mdi-square-edit-outline action-icon text-warning"></i>',
        'trash' => '<i class="mdi mdi-trash-can action-icon text-danger"></i>'
    ];
 
}

Что теперь?

Чтобы все заработало, идем в файл, где выводится виджет и в самом верху прописываем:

use \frontend\components\classes\CustomActionColumnClass

И там, где выводятся кнопки, меняем на свой класс. Должно получиться:

1
2
3
4
5
6

[
 'class' => CustomActionColumnClass::className(),
  'urlCreator' => function ($action, StorageAreas $model, $key, $index, $column) {
     return Url::toRoute([$action, 'id' => $model->id]);
  }
],

И кнопки выглядят теперь так, как нам хочется

Согласитесь, что переопределить класс ActionColumn это куда более профессиональней, чем если бы мы копипастили код кнопок из виджета в виджет. Тем более, что сложностей в этом возникнуть не должно.