如何在 Gridview 视图和更新按钮上实现 Yii2 模态对话框? [英] How to implement Yii2 Modal Dialog on Gridview view and update button?

问题描述

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

任何人都可以就如何实施它提出建议吗?

根据 arogachev 的建议:这是我的代码的更新

'html','属性' =>'头像','标签'='图像','headerOptions' =>['宽度' =>'80%',],],['类' =>'yiigridActionColumn','模板' =>'{查看} {删除}','headerOptions' =>['宽度' =>'20%', 'class' =>'活动视图链接',],'内容选项' =>['类' =>'padding-left-5px'],'按钮' =>['视图' =>函数($url，$model，$key){return Html::a('<span class="glyphicon glyphicon-eye-open"></span>','#', ['id' =>'活动视图-链接','标题' =>Yii::t('yii', '查看'),'数据切换' =>'模态','数据目标' =>'#activity-modal','数据 ID' =>$key,'数据-pjax' =>'0',]);},],],];?><?phpPjax::begin();回声 kartikgridGridView::widget(['数据提供者' =>$数据提供者，'列'=>$gridColumns，'摘要'=>假，'响应'=> 真，'悬停'=>真]);Pjax::end();?><?php $this->registerJs("$('.activity-view-link').click(function() {$.get('图像视图',{id: $(this).closest('tr').data('key')},功能(数据){$('.modal-body').html(data);$('#activity-modal').modal();});});");?><?php?><?php Modal::begin(['id' =>'活动模式'，'标题' =>'<h4 class="modal-title">查看图片</h4>','页脚' =>'<a href="#" class="btn btn-primary" data-dismiss="modal">关闭</a>',]);?><div class="well">

<?php Modal::end();?>

解决方案

首先你应该将 class 添加到视图链接，而不是 id，因为有不止一个元素:

选项的变化:

'class' =>'活动视图-链接',

在 JS 中:

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

你可以从对应的父元素tr中提取元素id.它存储在 data-key 属性中.

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

请注意，在复合主键的情况下，它将是对象，而不是字符串/数字.

获得 id 后，使用 AJAX 加载模型并将内容插入到模态正文中.

控制器中相关方法示例:

公共函数actionView($id){$model = YourModel::findOne($id);如果(！$模型){//处理给定id的model不存在的情况}return $this->renderAjax('view', ['id' => $model->id];}

AJAX 调用示例:

$(".activity-view-link").click(function() {$.get(.../view//在此处添加链接的缺失部分{id: $(this).closest('tr').data('key')},功能(数据){$('.modal-body').html(data);$('#activity-modal').modal();});});

I would like to implement Yii2 modal dialog box on my gridview when view or update button is clicked at each row.

Can anyone kindly advise on how to implement it?

With advice from arogachev: This is an update on my codes

<?php 

//var_dump($dataProvider);
$gridColumns = [
    [   
        'format' => 'html',
        'attribute' => 'avatar',
        'label'=>'Image',
        'headerOptions' => ['width' => '80%',],     
    ],

    [   'class' => 'yiigridActionColumn', 
        '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 kartikgridGridView::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(); ?>

解决方案

First of all you should add the class to the view link, not id, since there are more than one element:

Change in options:

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

And in JS:

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

You can extract element id from corresponding parent tr. It's stored in data-key attribute.

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

Note that in case of composite primary keys it will be object, not a string / number.

Once you get id, load according model with AJAX and insert content into modal body.

Example of related method in 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];
}

Example of AJAX call:

$(".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();
        }  
    );
});

这篇关于如何在 Gridview 视图和更新按钮上实现 Yii2 模态对话框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！