yii2中如何使用modal彈窗之結合gridview的使用

做者：白狼 出處：http://www.manks.top/document/easy_blog_manage_system.html 本文版權歸做者，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。

先前咱們講述了yii2中有關modal的基本使用，即以建立爲例。

實際開發中，咱們每每還會遇到列表頁數據修改要使用modal的狀況，若是是通常的循環展現，相信大多數人看了modal的基本使用都會操做，可是結合gridview估計有些人就開始吃不消了，咱們看看如何解決這個問題！

一、gridview的操做增長[更新]按鈕，並指定data-toggle data-target class以及data-id的值​

[
    'class' => 'yii\grid\ActionColumn',
    'template' => '{update}', 
    'buttons' => [
        'update' => function ($url, $model, $key) {
            return Html::a('更新', '#', [
                'data-toggle' => 'modal',
                'data-target' => '#update-modal',
                'class' => 'data-update',
                'data-id' => $key,
            ]);
        },
    ],
],​

二、爲更新添加modal​

<?php 
use yii\bootstrap\Modal;
// 更新操做
Modal::begin([
    'id' => 'update-modal',
    'header' => '<h4 class="modal-title">更新</h4>',
    'footer' => '<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>',
]); 
$requestUpdateUrl = Url::toRoute('update');
$updateJs = <<<JS
    $('.data-update').on('click', function () {
        $.get('{$requestUpdateUrl}', { id: $(this).closest('tr').data('key') },
            function (data) {
                $('.modal-body').html(data);
            }  
        );
    });
JS;
$this->registerJs($updateJs);
Modal::end();
?>​

三、修改咱們的update方法​

public function actionUpdate($id)
{
    $model = $this->findModel($id);
    if ($model->load(Yii::$app->request->post()) && $model->save()) {
        return $this->redirect(['index']);
    } else {
        return $this->renderAjax('update', [
            'model' => $model,
        ]);
    }
}

能夠看出整個過程當中跟咱們以前說的modal基本使用沒什麼差異。可是到此並無結束，相信大多數人可能會遇到下面常見的幾個難以解決的問題：

• yii2 modal中使用了select2 爲何搜索框不可搜索？
• 這裏是列表文本yii2 單個頁面多個modal 爲何頁面會共用一個，等數據加載完了纔好？
• yii2 單個頁面多個modal，以單個頁面添加和咱們上面的gridview更新均使用modal爲例，當使用select2時，爲何更新的select2會失效不起做用？

[考慮目前國內網站大部分採集文章十分頻繁，更有甚者不註明原文出處，原做者更但願看客們查看原文，以防有任何問題不能更新全部文章，避免誤導！]

繼續閱讀