Question

我想问你一件事。当我点击网格视图中的按钮时，我想弹出一个模态。这个代码可以用yii2网格视图吗？

<?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],

            'ID',
            'DATASEQ',
            'TIME',
            'QTYOK',
            'QTYDEFECT',

            $actionCol=['class' => 'yii\grid\ActionColumn',
                'template' => '{view}{info}',
                'buttons' => [
                'info' => function ($url, $model) {
                    return  Html::a('<span class="glyphicon glyphicon-info-sign"></span>', $url, [
                        'id' => 'modalButton' ,
                        'title' => Yii::t('app', 'Info'),
                    ]);
                 }
            ],
                 'urlCreator' => function ($action, $model, $key, $index) {
                    if ($action === 'info') {
                  $url =  Url::to(['../web/plan-detail-tiga/create','id'=>$model->DATASEQ]);

                    return $url;

                }
            }

        ],

        ],
    ]); ?>

Answer 1

在GridView代码上添加模态代码。

<?php
    yii\bootstrap\Modal::begin(['id' =>'modal']);
    yii\bootstrap\Modal::end();
?>

在按钮中添加ID。

[
    'header'=>'Header',
    'value'=> function($data)
              { 
                   return  Html::a(Yii::t('app', ' {modelClass}', [
                          'modelClass' => 'details',
                          ]), ['controller/action','id'=>$data->id], ['class' => 'btn btn-success', 'id' => 'popupModal']);      
              },
     'format' => 'raw'
],

在视图页面中注册JavaScript。

$this->registerJs("$(function() {
   $('#popupModal').click(function(e) {
     e.preventDefault();
     $('#modal').modal('show').find('.modal-content')
     .load($(this).attr('href'));
   });
});");

Answer 2

试试这个：

<?php \yii\bootstrap\Modal::begin([
    'id' => 'popup-window'
]);?>

    <h1>Hello</h1>
    <p>Modal body</p>

<?php \yii\bootstrap\Modal::end();?>


<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],

        'ID',
        'DATASEQ',
        'TIME',
        'QTYOK',
        'QTYDEFECT',

        $actionCol=['class' => 'yii\grid\ActionColumn',
            'template' => '{view}{info}',
            'buttons' => [
                'info' => function ($url, $model) {
                    return  \yii\bootstrap\Button::widget(['options' => [
                        'data-target' => '#popup-window',
                        'data-toggle' => 'modal'
                    ]]);
                }
            ],
            'urlCreator' => function ($action, $model, $key, $index) {
                if ($action === 'info') {
                    $url =  Url::to(['../web/plan-detail-tiga/create','id'=>$model->DATASEQ]);

                    return $url;

                }
            }

        ],

    ],
]); ?>

show在Yii2中弹出GridView

2 个答案: