2

Друзья, помогите, нужно, чтобы превьюшка отображалась в модальном окне при клике на "view" button в виджете ActionColumn (который внутри виджета GridView).

Сейчас код выглядит так:

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],

        'id',
        'author_id',
        'name',
        'date_create:datetime',
        'date_update:datetime',
        'preview',
        'date',

        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>

Подозреваю, что можно настроить как то ['class' => 'yii\grid\ActionColumn'], чтоб превьюшка отображалась в модальном окне. Но как? Есть где-то в доках инфа об этом?

Я представляю, что это должно выглядеть приблизительно так:

...
        [
            'class' => 'yii\grid\ActionColumn',
            'buttons' => [
                'view' => [
                    'class' => 'yii\bootstrap\Modal',
                    'header' => '<h2>Hello world</h2>',
                    'toggleButton' => ['label' => 'click me'],
                ]
            ]
        ],

Но это лишь моя фантазия, которая не находит подтверждения в документации.

2 ответа 2

1

Код ['class' => 'yii\grid\ActionColumn'] в GridView работает следующим образом:

ActionColumn наследуется от Column и в методе renderDataCellContent возвращает контент который будет в итоге отрендерен. Изменяя публичные свойства ActionColumn мы можем влиять на то что он будет рендерить. Принцип работы здесь такой же как и в остальных настройках - передача массива параметров. Например так:

[
    'class' => 'yii\grid\ActionColumn',
    'buttons' => [
        'update' => function ($url, $model, $key) {
            return $model->status === 'editable' ? Html::a('Update', $url) : '';
        },
    ],
];

Это пример кода из документации класса ActionColumn. В вашем случае вы можете просто сделать так:

[
    'label' => Yii.t('frontend', 'View'),
    'format' => 'raw',
    'value' => function (MyModel $model) {
        echo Html::a('View', ['view', 'id' => $id], [
            'id' => 'gridViewId_' . $id //Теперь в JS можно написать метод который вместо редиректа выведет модальное окно.
        ]);
    },
],

Также можно заценить крутое расширение yii2-grid. Модальных окон там нет, но может быть вам пригодится иной его функционал.

5
  • 1
    Спасибо. Я уже сделал чуть иначе. И проще, чем вы предлагаете. Поэтому ваш вариант принять не могу, но спасибо сказал ;)
    – Razzwan
    24 ноя 2015 в 20:03
  • @Razzwan ништяк :) Можете ответить на свой же вопрос и рассказать как вы решили задачу. 24 ноя 2015 в 20:05
  • 1
    да, так и сделаю. Возможно, кому-то пригодится.
    – Razzwan
    24 ноя 2015 в 20:06
  • 1
    Хотя, возможно ваш код более верный, как ответ на данный вопрос. Пусть повисит в таком виде - может кто еще оценит решения. Если что ваш ответ примем ;)
    – Razzwan
    24 ноя 2015 в 20:13
  • @Razzwan у вас уже работающее решение, принимайте как ответ смело :) 24 ноя 2015 в 20:15
1

Меня устроил этот код:

Modal::begin([
    'header' => '<h2>Загруженная книга:</h2>',
]);

echo '<div id="author"></div><div id="name"></div>';

Modal::end();

     <?= GridView::widget([
        'dataProvider' => $dataProvider,
        //'filterModel' => $searchModel,
        'columns' => [
            'id',
            'name',
            'preview',
            'authorName',
            'date_create:datetime',
            'date',
            [
                'class' => 'yii\grid\ActionColumn',
                'buttons' => [
                    'view' => function ($url, $model, $key) {
                        $options = [
                            'title' => Yii::t('yii', 'View'),
                            'aria-label' => Yii::t('yii', 'View'),
                            'data-toggle' => Yii::t('yii', 'modal'),
                            'data-target' => Yii::t('yii', '#w0'),
                        ];
                        return Html::a('<span class="glyphicon glyphicon-eye-open"></span>', $url, $options);
                    },
                ]
            ],
        ],
    ]);
    ?>

И js:

$("body").on("click", "a[href*='book/view']", function(e){   

    $.ajax({
        url: this,                             
        dataType : "json",                     
        success: function (data) {                
            $(".modal-body #name").html(data.name);
        }
    });
});
1
  • Принял свой вариант, т.к. он более полный и ближе к практическому решению задачи. Нужно сказать, что соседний вариант, так же работоспособен.
    – Razzwan
    26 ноя 2015 в 11:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.