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.