gridview - ¿Cómo implementar el cuadro de diálogo modal Yii2 en la vista de cuadrícula y el botón de actualización?

dialog modal-dialog

Question

Me gustaría implementar el cuadro de diálogo modal Yii2 en mi vista de cuadrícula cuando se hace clic en el botón Ver o Actualizar en cada fila.

¿Alguien puede amablemente asesorarme sobre cómo implementarlo?

Con el consejo de arogachev: Esta es una actualización de mis códigos

<?php
//var_dump($dataProvider);
$gridColumns = [
[
''format'' => ''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(''<span class="glyphicon glyphicon-eye-open"></span>'',''#'', [
''id'' => ''activity-view-link'',
''title'' => Yii::t(''yii'', ''View''),
''data-toggle'' => ''modal'',
''data-target'' => ''#activity-modal'',
''data-id'' => $key,
''data-pjax'' => ''0'',
]);
},
],
],
];
?>
<?php
Pjax::begin();
echo /kartik/grid/GridView::widget([
''dataProvider'' => $dataProvider,
''columns''=>$gridColumns,
''summary''=>false,
''responsive''=>true,
''hover''=>true
]);
Pjax::end();
?>
<?php $this->registerJs(
"$(''.activity-view-link'').click(function() {
$.get(
''imgview'',
{
id: $(this).closest(''tr'').data(''key'')
},
function (data) {
$(''.modal-body'').html(data);
$(''#activity-modal'').modal();
}
);
});
"
); ?>
<?php
?>
<?php Modal::begin([
''id'' => ''activity-modal'',
''header'' => ''<h4 class="modal-title">View Image</h4>'',
''footer'' => ''<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>'',
]); ?>
<div class="well">
</div>
<?php Modal::end(); ?>

Answer 1

En primer lugar, debe agregar la clase al enlace de vista, no a la identificación , ya que hay más de un elemento:

Cambio en las opciones:

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

Y en JS:

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

Puede extraer el identificador de elemento del tr padre correspondiente. Se almacena en el atributo data-key .

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

Tenga en cuenta que en el caso de las claves primarias compuestas será un objeto, no una cadena / número.

Una vez que obtenga la identificación, cargue el modelo correspondiente con AJAX e inserte el contenido en el cuerpo modal.

Ejemplo de método relacionado en el controlador:

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];
}

Ejemplo de llamada 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();
}
);
});

Answer 2

Así es como me acerqué a esto. Primero creé el botón en la vista de la grilla de la siguiente manera:

[
''class'' => ''yii/grid/ActionColumn'',
''options''=>[''class''=>''action-column''],
''template''=>''{update} {delete}'',
''buttons''=>[
''update'' => function($url,$model,$key){
$btn = Html::button("<span class=''glyphicon glyphicon-pencil''></span>",[
''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;
}
]
],

A continuación, agregue lo siguiente a su archivo de vista:

use yii/bootstrap/Modal;

y agrega la sección que contendría tu contenido modal

<?php
Modal::begin([
''header''=>''<h4>Update Model</h4>'',
''id''=>''update-modal'',
''size''=>''modal-lg''
]);
echo "<div id=''updateModalContent''></div>";
Modal::end();
?>

Ahora necesita el javascript (jQuery en este caso) para manejar el evento click y hacer la llamada ajax. Creé un mymodal.js en el archivo de la carpeta @ web / scripts así:

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

Agregue este archivo al archivo de vista que aloja su gridview.

registerJsFile (''@ web / scripts / mymodal.js'', [''depends'' => [/ yii / web / JqueryAsset :: className ()]]);?>

Todo lo que queda es configurar la acción que manejará su solicitud de Ajax. En ExampleController.php (siguiendo la configuración en el botón gridview arriba) agregue la siguiente acción:

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,
]);
}

Después de esto, solo necesita asegurarse de que tiene su configuración de archivo de vista de update.php con el formulario modelo y botón de enviar y listo.