README

Yii2 Bootstrap Modal 的包装器，用于在内部通过 AJAX 使用 ActiveForm。增加了对 Bootstrap 5 的支持。

安装

安装此扩展的首选方式是通过 composer。

运行以下命令之一：

$ php composer.phar require --prefer-dist a1inani/yii2-modal-ajax "@dev"

或者添加以下内容到你的 composer.json 文件的 require 部分：

"a1inani/yii2-modal-ajax": "@dev"

用法

控制器

通过添加 AJAX 渲染和保存功能扩展你的基本逻辑

public function actionCreate()
{
    $model = new Company();

    if ($model->load(Yii::$app->request->post())) {
        if ($model->save()) {             
            return $this->redirect(['view', 'id' => $model->id]);             
        }
    }

    return $this->render('create', [
        'model' => $model,
    ]);
}

到

public function actionCreate()
{
    $model = new Company();

    if ($model->load(Yii::$app->request->post())) {
        if ($model->save()) {             
            if (Yii::$app->request->isAjax) {
                // JSON response is expected in case of successful save
                Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
                return ['success' => true];
            }
            return $this->redirect(['view', 'id' => $model->id]);             
        }
    }

    if (Yii::$app->request->isAjax) {
        return $this->renderAjax('create', [
            'model' => $model,
        ]);
    } else {
        return $this->render('create', [
            'model' => $model,
        ]);
    }
}

视图

use lo\widgets\modal\ModalAjax;

echo ModalAjax::widget([
    'id' => 'createCompany',
    'header' => 'Create Company',
    'toggleButton' => [
        'label' => 'New Company',
        'class' => 'btn btn-primary pull-right'
    ],
    'url' => Url::to(['/partner/default/create']), // Ajax view with form to load
    'ajaxSubmit' => true, // Submit the contained form as ajax, true by default
    // ... any other yii2 bootstrap modal option you need
]);

使用 Twitter Bootstrap 5

视图

use lo\widgets\modal\ModalAjax;

echo ModalAjax::widget([
    'id' => 'createCompany',
    'bootstrapVersion' => ModalAjax::BOOTSTRAP_VERSION_5,
    'header' => 'Create Company',
    'toggleButton' => [
        'label' => 'New Company',
        'class' => 'btn btn-primary'
    ],
    'url' => Url::to(['/partner/default/create']), // Ajax view with form to load
    'ajaxSubmit' => true, // Submit the contained form as ajax, true by default
    // ... any other yii2 bootstrap modal option you need
]);

在网格中使用

索引视图 - 创建（单模态模式）

use lo\widgets\modal\ModalAjax;

echo ModalAjax::widget([
    'id' => 'createCompany',
    'header' => 'Create Company',
    'toggleButton' => [
        'label' => 'New Company',
        'class' => 'btn btn-primary pull-right'
    ],
    'url' => Url::to(['/partner/default/create']), // Ajax view with form to load
    'ajaxSubmit' => true, // Submit the contained form as ajax, true by default
    'size' => ModalAjax::SIZE_LARGE,
    'options' => ['class' => 'header-primary'],
    'autoClose' => true,
    'pjaxContainer' => '#grid-company-pjax',

]);

索引视图 - 更新（多模态模式）

模态 AJAX 与事件

use lo\widgets\modal\ModalAjax;

echo ModalAjax::widget([
    'id' => 'updateCompany',
    'selector' => 'a.btn', // all buttons in grid view with href attribute

    'options' => ['class' => 'header-primary'],
    'pjaxContainer' => '#grid-company-pjax',
    'events'=>[
        ModalAjax::EVENT_MODAL_SHOW => new \yii\web\JsExpression("
            function(event, data, status, xhr, selector) {
                selector.addClass('warning');
            }
       "),
        ModalAjax::EVENT_MODAL_SUBMIT => new \yii\web\JsExpression("
            function(event, data, status, xhr, selector) {
                if(status){
                    if(selector.data('scenario') == 'hello'){
                        alert('hello');
                    } else {
                        alert('goodbye');
                    }
                    $(this).modal('toggle');
                }
            }
        "),
        ModalAjax::EVENT_MODAL_SHOW_COMPLETE => new \yii\web\JsExpression("
            function(event, xhr, textStatus) {
                if (xhr.status == 403) {
                    $(this).modal('toggle');
                    alert('You do not have permission to execute this action');
                }
            }
        "),
        ModalAjax::EVENT_MODAL_SUBMIT_COMPLETE => new \yii\web\JsExpression("
            function(event, xhr, textStatus) {
                if (xhr.status == 403) {
                    $(this).modal('toggle');
                    alert('You do not have permission to execute this action');
                }
            }
        ")
    ]
]);

//Grid example with data-scenario

Pjax::begin([
    'id' => 'grid-company-pjax',
    'timeout' => 5000,
]);

echo GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
	      ......................
		// Action buttons  
		// <a class="btn" href="/site/update?id=10" title="Edit ID-10" data-scenario="hello">Hello</a>
		// <a class="btn" href="/site/update?id=20" title="Edit ID-20" data-scenario="goodbye">Goodbye</a>
          ......................
    ],
]);

Pjax::end();

插件事件

在基本的 Twitter Bootstrap 模态事件之上，还会触发以下事件

kbModalBeforeShow (ModalAjax::EVENT_BEFORE_SHOW)

此事件在表单视图加载前触发。此事件可用的额外参数包括

• xhr: XMLHttpRequest，用于此事务的 jQuery XML Http Request 对象。
• settings: object，此事务的 jQuery AJAX 设置。

$('#createCompany').on('kbModalBeforeShow', function(event, xhr, settings) {
    console.log('kbModalBeforeShow');
});

kbModalShow (ModalAjax::EVENT_MODAL_SHOW)

此事件在表单视图成功加载后触发。此事件可用的额外参数包括

• data: object，通过服务器响应发送的数据对象。
• status: string，jQuery AJAX 成功的文本状态。
• xhr: XMLHttpRequest，用于此事务的 jQuery XML Http Request 对象。
• selector: object，在多模态中提交后嵌入逻辑的 jQuery 选择器。

$('#createCompany').on('kbModalShow', function(event, data, status, xhr, selector) {
    console.log('kbModalShow');
});

kbModalShowComplete (ModalAjax::EVENT_MODAL_SHOW_COMPLETE)

当表单加载完成时，此事件被触发。此事件可用的额外参数包括

• xhr: XMLHttpRequest，用于此事务的 jQuery XML Http Request 对象。
• textStatus: string，此事务的 jQuery AJAX 成功的文本状态。

$('#createCompany').on('kbModalShowComplete', function(event, xhr, textStatus) {
    console.log('kbModalShowComplete');
});

kbModalBeforeSubmit (ModalAjax::EVENT_BEFORE_SUBMIT)

此事件在表单提交前触发。此事件可用的额外参数包括

• xhr: XMLHttpRequest，用于此事务的 jQuery XML Http Request 对象。
• settings: object，此事务的 jQuery AJAX 设置。

$('#createCompany').on('kbModalBeforeSubmit', function(event, xhr, settings) {
    console.log('kbModalBeforeSubmit');
});

kbModalSubmit (ModalAjax::EVENT_MODAL_SUBMIT)

表单成功提交后，此事件被触发。此事件可用的额外参数包括

• data: object，通过服务器响应发送的数据对象。
• status: string，jQuery AJAX 成功的文本状态。
• xhr: XMLHttpRequest，用于此事务的 jQuery XML Http Request 对象。
• selector: object，在多模态中提交后嵌入逻辑的 jQuery 选择器。

$('#createCompany').on('kbModalSubmit', function(event, data, status, xhr, selector) {
    console.log('kbModalSubmit');
    // You may call pjax reloads here
});

kbModalSubmitComplete (ModalAjax::EVENT_MODAL_SUBMIT_COMPLETE)

当表单提交完成时，此事件被触发。此事件可用的额外参数包括

• xhr: XMLHttpRequest，用于此事务的 jQuery XML Http Request 对象。
• textStatus: string，此事务的 jQuery AJAX 成功的文本状态。

$('#createCompany').on('kbModalSubmitComplete', function(event, xhr, textStatus) {
    console.log('kbModalSubmitComplete');
});