Yii2：从Gridview中的可点击行显示模态

Question

我想在 Gridview 中单击一行后显示模态，但模态内容不会显示。

我的代码缺少什么或有什么问题？

在main.php中：

    <?php
    Modal::begin([
        'header'=>'<h4>Update '. $this->title .'</h4>',
        'id'=>'update-modal',
        'size'=>'modal-md'
    ]);

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

Modal::end();
?>

在 index.php 中：

    <?= GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
        [
            'attribute'=>'name',
            'format'=>'raw',
            'value'=>function ($model) {
                    return Html::a($model->name, ['/unit/unit/update', 'id'=>$model->id], ['class' => 'update-modal-link',
                                                'data-toggle'=>"modal",
                                                'data-target'=>"#update-modal",
                                            ]);
             }
        ],
    ],
]); ?>

在 main.js 中：

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

Answer 1

您应该使用 javascript 或默认的 data-toggle 和 data-target 属性，您正在尝试通过 2 个来源加载它，我怀疑您面临的问题是它加载了模式并立即消失。

如果正确，请从 GridView 列中的锚链接中删除属性并将其更新为以下内容。

[
    'attribute' => 'name',
    'format' => 'raw',
    'value' => function ($model) {
        return Html::a($model->name, ['/unit/unit/update', 'id' => $model->id], ['class' => 'update-modal-link']);
    }
],

然后，您尝试为无效的锚分配 value 属性，您需要定位锚的 href 属性以获取相对 url 并加载模式内容。

将您的 javascript 代码更改为以下

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

希望这会有所帮助。