Создаем кастомную кнопку в GridView yii2.
  • 2440

Как создать свою кнопку в GridView yii2.

Автор: admin | 22 июня (Пт.) 2018г. в 19ч.09м.

В этом посте рассмотрим, как добавить кнопку в виджете GridView, чтобы получилось так:
Добавили свою кнопку в GridView.
В виджете GridView по умолчанию уже есть три кнопки в виде иконок для таких действий - просмотр, редактирование и удаление.
Простая конфигурация виджета выглядит так:
<?= GridView::widget([
        'dataProvider' => $dataProvider,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
            'id',
            'title:title',
            'url:ntext',
            'image:ntext',
            // 'created_at',
            // 'updated_at',
            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>​

За отображение кнопок, которые выполняют какие-либо действия отвечает ['class' => 'yii\grid\ActionColumn']
Для того, чтобы добавить или изменить существующую кнопку, нужно работать с параматрами yii\grid\ActionColumn

Добавим свою кнопку с каким-нибудь фейковым функционалом для примера. Например по нажатию на кнопку будет открываться модальное окно с надписью "Информация.".

[
    /**
     * Указываем класс колонки ActionColumn
     */
    'class' => \yii\grid\ActionColumn::class,
    
    /**
     * Определяем набор кнопок. По умолчанию {view} {update} {delete}
     */
    'template' => '{view} {update} {delete} {info}',

    'buttons' => [
        'info' => function ($url, $model, $key) {
            $iconName = "info-sign";
            
            //Текст в title ссылки, что виден при наведении
            $title = \Yii::t('yii', 'Info');
            
            $id = 'info-'.$key;
            $options = [
                'title' => $title,
                'aria-label' => $title,
                'data-pjax' => '0',
                'id' => $id
            ];
            
            $url = Url::current(['', 'id' => $key]);
            
            //Для стилизации используем библиотеку иконок
            $icon = Html::tag('span', '', ['class' => "glyphicon glyphicon-$iconName"]);
            
            //Обработка клика на кнопку
            $js = <<<JS
            $("#{$id}").on("click",function(event){  
                    event.preventDefault();
                    var myModal = $("#myModal");
                    var modalBody = myModal.find('.modal-body');
                    var modalTitle = myModal.find('.modal-header');
                    
                    modalTitle.find('h2').html('Информация.');
                    modalBody.html('Тут будет информация.');

                    myModal.modal("show");
                }
            );
JS;


            //Регистрируем скрипты
            $this->registerJs($js, \yii\web\View::POS_READY, $id);

            return Html::a($icon, $url, $options);
        },
    ],
],

Строка 'template' => '{view} {update} {delete} {info}' является шаблоном по которому будут
выводиться кнопки. Сами кнопки регистрируются в массиве 'buttons'. Так как кнопки {view} {update} {delete}
уже есть в самом классе, то нужно добавить только {info}. Это имя должно совпадать с именем ключа
кнопки в массиве 'buttons'.

 'info' => function ($url, $model, $key) {} - анонимная функция, которая возвращает результат в виде кнопки.
Сюда попадают такие параметры, как $url - текущий урл. $model - текущая модель и ключь.

Результатом должна вернуться кнопка return Html::a($icon, $url, $options);

Так как для вновь созданной кнопки нужно всплывающее окно, в котором мы выводим сообщение, то разместим
Modal виджет где-нибудь в этом шаблоне.

Modal::begin([
 
    //Этот текст заменяется в javascripte
    'header' => '<h2>'.\Yii::t('yii', 'Page info').'</h2>',
    'options' => ['id' => 'myModal'],
    'size' => Modal::SIZE_LARGE,
]);
//Этот текст заменяется в javascripte
echo \Yii::t('yii', 'Text...');

Modal::end();

Все. Кнопка готова. Кликаем по ней. Все работает.
По клику появляется всплывающее окно.
Для того, чтобы изменить какую-то из существующих кнопок
нужно так же точно переоприделить ее функционал в массиве 'buttons'.

Приветствую!

Меня зовут Сергей. Я - автор этого блога.

Если Вам был полезен материал на моем сайте, поддержите пожалуйста мой проект, чтобы о нем узнали другие люди - кликните plizz :) на иконку в соц. сети, чтобы поделиться материалом с другими.