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

Прежде всего, вы должны добавить 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 для просмотра файлов с формой модели и кнопкой отправки и вашим хорошим ходом.