如何在Gridview视图和更新按钮上实现Yii2模式对话框？

当在每行单击查看或更新按钮时，我想在我的gridview上实现Yii2模式对话框

有人能就如何实施提出建议吗

根据阿罗加切夫的建议： 这是我代码的更新

<?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(); ?>

---

首先，您应该将类添加到视图链接，而不是id，因为有多个元素：

选项的变化：

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

在JS中：

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

您可以从相应的父级

tr

提取元素id。它存储在

数据键

属性中

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

请注意，对于复合主键，它将是对象，而不是字符串/数字

获得id后，使用AJAX加载相应的模型，并将内容插入模态体

控制器中的相关方法示例：

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

并添加保存模态内容的部分

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

    echo "<div id='updateModalContent'></div>";

    Modal::end();
?>

将此文件添加到承载gridview的视图文件中

registerJsFile（'@web/scripts/mymodal.js'，['dependens'=>[\yii\web\jqueryaset:：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,
    ]);
}

公共功能操作更新（$id）
{
$model=$this->findModel（$id）；
如果（$model->load（Yii:：$app->request->post（））和（&$model->validate（））{
//如有必要，准备要保存的模型
$model->save（）；
返回$this->redirect（['index']）；//renderAjax（'update'[
'model'=>$model，
]);
}

---

在此之后，您只需确保使用模型表单和提交按钮设置了update.php视图文件，并准备就绪。

我使用natral脚本添加了以下代码

Yii::$app->urlManager->createUrl(['self-assessment-detail/update','id'=>$key])

---

Yii:：$app->urlManager->createUrl（['self-assessment-detail/update'，'id'=>$key]）在这种情况下，实际查看/更新页面将如何打开？在popover内容中有链接？嗨，arogachev，在gridview中，当我单击eye按钮时，查看页面将在模式中启动，当我单击pencil按钮时，更新页面将在模式中启动。实际查看/更新页面是可以启动的url页面d本身。它类似于在Yii1中，使用CJuiDialog在CGridView中编辑行，只是我需要在Yii2中实现它，我无法在网上找到任何指南。嗨，我在网上找到了一些代码，与我想要的代码类似，但是我不知道如何将所选行的id发送到模式url中，以便我可以加载relev对话框中的ant模型。我不明白，模态如何与弹出框相关？弹出框类似于工具提示，但在单击而不是悬停时显示。一点解释可能会有所帮助！添加关于如何回答问题的说明

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

Yii::$app->urlManager->createUrl(['self-assessment-detail/update','id'=>$key])