Как реализовать Yii2 Modal Dialog на кнопке просмотра и обновления Gridview?

Я хотел бы применить модальное диалоговое окно Yii2 в моем gridview, когда кнопка просмотра или обновления нажата в каждой строке.

Кто-нибудь может посоветовать, как его реализовать?

С советом от arogachev: Это обновление моих кодов

 'html', 'attribute' => 'avatar', 'label'=>'Image', 'headerOptions' => ['width' => '80%',], ], [ 'class' => 'yii\grid\ActionColumn', 'template' => '{view} {delete}', 'headerOptions' => ['width' => '20%', 'class' => 'activity-view-link',], 'contentOptions' => ['class' => 'padding-left-5px'], 'buttons' => [ 'view' => function ($url, $model, $key) { return Html::a('','#', [ 'id' => 'activity-view-link', 'title' => Yii::t('yii', 'View'), 'data-toggle' => 'modal', 'data-target' => '#activity-modal', 'data-id' => $key, 'data-pjax' => '0', ]); }, ], ], ]; ?>  $dataProvider, 'columns'=>$gridColumns, 'summary'=>false, 'responsive'=>true, 'hover'=>true ]); Pjax::end(); ?> registerJs( "$('.activity-view-link').click(function() { $.get( 'imgview', { id: $(this).closest('tr').data('key') }, function (data) { $('.modal-body').html(data); $('#activity-modal').modal(); } ); }); " ); ?>   'activity-modal', 'header' => '', 'footer' => 'Close', ]); ?> 

Прежде всего, вы должны добавить class к ссылке вида, а не id , поскольку имеется более одного элемента:

Изменение параметров:

 'class' => 'activity-view-link', 

И в JS:

 $('.activity-view-link').click(function() { 

Вы можете извлечь идентификатор элемента из соответствующего родительского tr . Он хранится в атрибуте data-key .

 $('.activity-view-link').click(function() { var elementId = $(this).closest('tr').data('key'); } 

Обратите внимание, что в случае составных первичных ключей это будет объект, а не строка / число.

Как только вы получите идентификатор, загрузите в соответствии с моделью AJAX и вставьте содержимое в модальное тело.

Пример связанного метода в controllerе:

 public function actionView($id) { $model = YourModel::findOne($id); if (!$model) { // Handle the case when model with given id does not exist } return $this->renderAjax('view', ['id' => $model->id]; } 

Пример вызова AJAX:

 $(".activity-view-link").click(function() { $.get( .../view // Add missing part of link here { id: $(this).closest('tr').data('key') }, function (data) { $('.modal-body').html(data); $('#activity-modal').modal(); } ); }); 

Вот как я подошел к этому. Сначала я создал кнопку в виде сетки следующим образом:

 [ 'class' => 'yii\grid\ActionColumn', 'options'=>['class'=>'action-column'], 'template'=>'{update} {delete}', 'buttons'=>[ 'update' => function($url,$model,$key){ $btn = Html::button("",[ 'value'=>Yii::$app->urlManager->createUrl('example/update?id='.$key), //<---- here is where you define the action that handles the ajax request 'class'=>'update-modal-click grid-action', 'data-toggle'=>'tooltip', 'data-placement'=>'bottom', 'title'=>'Update' ]); return $btn; } ] ], 

Затем добавьте в файл вида следующее:

 use yii\bootstrap\Modal; 

и добавьте раздел, который будет содержать ваш модальный контент

 '

Update Model

', 'id'=>'update-modal', 'size'=>'modal-lg' ]); echo "
"; Modal::end(); ?>

Теперь вам нужен javascript (jQuery в этом случае), чтобы обработать событие click и сделать вызов ajax. Я создал файл mymodal.js в файле папки @ web / scripts, например:

 $(function () { $('.update-modal-click').click(function () { $('#update-modal') .modal('show') .find('#updateModalContent') .load($(this).attr('value')); }); }); 

Добавьте этот файл в файл вида, в котором размещается ваш gridview.

registerJsFile (‘@ web / scripts / mymodal.js’, [‘зависит’ => [\ yii \ web \ JqueryAsset :: className ()]]);?>

Осталось только настроить действие, которое будет обрабатывать ваш запрос ajax. В примере ExampleController.php (следуя настройке в кнопке gridview выше) добавьте следующее действие:

 public function actionUpdate($id) { $model = $this->findModel($id); if ($model->load(Yii::$app->request->post()) && $model->validate() ) { //prepare model to save if necessary $model->save(); return $this->redirect(['index']); //<---This would return to the gridview once model is saved } return $this->renderAjax('update', [ 'model' => $model, ]); } 

После этого вам просто нужно убедиться, что у вас есть файл update.php для просмотра файлов с формой модели и кнопкой отправки и вашим хорошим ходом.

  • Создание таблицы и диалога мастер-деталировки, как повторно использовать один и тот же диалог для создания и редактирования
  • Давайте будем гением компьютера.