README

用Yii2 EasyAjax放松您的键盘

EasyAjax是一系列Yii方法，可以最小化与Bootstap UI和JavaScript的一般交互所需的代码量。

通知、模态框、标签页、pjax重新加载、表单验证等现在都可以通过控制器动作响应中的一行代码来设置和启动。

例如，EasyAjax::modal('My modal content')将以"My modal content"作为内容打开一个模态框，而EasyAjax::reloadPjax(['#p0'])将重新加载ID为id="p0"的pjax-container。

EasyAjax还提供了

完整和现成的ajax CRUD，归功于集成的Gii生成器
全局和动作特定的选项完全可配置
可自定义HTML模板
可扩展，添加您自己的方法

安装

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

运行以下命令

composer require --prefer-dist letsjump/yii2-easy-ajax

或添加

"letsjump/yii2-easy-ajax": "~1.0.0"

到您的composer.json文件的require部分。

配置

要使用此扩展，请将以下代码添加到您的Web应用程序配置（config/web.php）中

'components' => [
    'easyAjax' => [
        'class' => 'letsjump\easyAjax\EasyAjaxBase',
        'customOptions' => [
            /* refer to plugin documentation */
        ]
    ],
]

要使用集成的Gii生成器，请将以下代码添加到您的应用程序配置中

if (YII_ENV_DEV) {
    $config['bootstrap'][] = 'gii';
    $config['modules']['gii'] = [
        'class' => \yii\gii\Module::class,
        // uncomment the following to add your IP if you are not connecting from localhost.
        'allowedIPs' => ['127.0.0.1', '::1', /** your IPs */],
        'generators' => [
            'crud' => [ 
                'class'     => 'letsjump\easyAjax\gii\crud\Generator',
                'templates' => [ //setting for out templates
                    'yii2-easy-ajax' => '@vendor/letsjump/yii2-easy-ajax/gii/crud/default',
                ]
            ],
        ],
    ];
}

请注意：集成的Gii生成器允许您生成用于AJAX以及标准CRUD的代码。

用法

1. 请求

EasyAjax请求是简单的jQuery AJAX请求，需要适当地引用配置了控制器动作

将data-yea=1属性添加到负责onclickjavascript事件的Html标签中，即可执行EasyAjax请求到控制器动作，这是最简单的方式

<a data-yea="1" class="btn btn-lg btn-success" href="<?= \yii\helpers\Url::to(['controller/action-notify']) ?>">notify something</a>

或

<button data-yea="1" data-form-id="friend-form" type="submit" class="btn btn-primary pull-right">Save</button>

注意

要探索其他可用的Html属性并了解所有详细信息，请参阅指南

2. 响应

与EasyAjax交互的控制器动作应返回一个Json数组，并且它们只需要在其响应数组中包含一个或多个EasyAjax方法。

以下是一个示例...

public function actionSaveMyModel()
{
    Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;

    // your model validation and save logic...

    return [
        \letsjump\easyAjax\EasyAjax::modalClose(),
        \letsjump\easyAjax\EasyAjax::reloadPjax(['#p0']),
        \letsjump\easyAjax\EasyAjax::notifySuccess('Your model has been saved')
    ];
}

... EasyAjax将

关闭在UI中打开的bootstrap模态框
重新加载ID为#p0的pjax-container
显示一个Bootstrap Notify通知用户操作成功

以下是详细说明中可用的方法

模态框

使用EasyAjax，您可以使用以下方式触发和配置Bootstrap模态框：EasyAjax::modal(content, title, form_id, size, footer, options)

public function actionModal()
{
    Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
    
    return [
        \letsjump\easyAjax\EasyAjax::modal('This is the modal content', 'Modal title'),
    ];
}

还有一个方法可以远程关闭UI中实际打开的模态框

public function actionCloseModal()
{
    Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
    
    return [
        \letsjump\easyAjax\EasyAjax::modalClose(),
    ];
}

您可以编辑模态框布局以及许多其他设置。有关所有可用选项的详细信息，请参阅指南。

通知

EasyAjax通知允许控制Bootstrap通知插件。插件资源（bootstrap-notify.js和animate.js）已包含在EasyAjax中。

提示：如果您已在您的应用程序中打包了这些资源，可以禁用资源包含。

要触发通知，可以使用\letsjump\easyAjax\EasyAjax::notify(message, title, settings)。在settings参数中，您应指定显示通知的类型（Notify::TYPE_INFO（蓝色）、Notify::TYPE_SUCCESS（绿色）、Notify::TYPE_WARNING（黄色）或Notify::TYPE_DANGER（红色））。

为了加快您的编码速度，我还添加了一些用于最常见的通知类型的快捷方法：EasyAjax::notifyInfo(message)、EasyAjax::notifySuccess(message)、EasyAjax::notifyWarning(message)、EasyAjax::notifyDanger(message)。

示例

public function actionNotify()
{
    Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
    return [
        \letsjump\easyAjax\EasyAjax::notifyInfo('This is an Info Notify!')
    ];
}

注意：实际上通知并不涉及Yii2闪存消息会话数组。如果您认为需要，请提交一个问题。

有关所有可用选项和模板操作的详细信息，请参阅指南。

Pjax重载

EasyAjax PjaxReload（EasyAjax::pjaxReload(['#myPjaxID0', '#myPjaxID1', ...])）方法允许重载一个或多个Pjax容器。

public function actionPjaxReload()
{
    Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
    
    return [
        \letsjump\easyAjax\EasyAjax::reloadPjax(['#p0'])
    ];
}

有关详细信息，请参阅指南。

表单验证

表单验证方法（EasyAjax::formValidation(['#my-form-id'=>ActiveForm::validate(MyModelClass)])）允许显示指定表单的验证结果。它将发送由#form-id属性指定的每个表单字段的验证结果，以显示其错误消息。

public function actionValidateForm()
{
    Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
    $contactForm                = new ContactForm();
    
    return [
        \letsjump\easyAjax\EasyAjax::formValidation(['#contact-form' => \yii\widgets\ActiveForm::validate($contactForm)])
    ];
}

有关详细信息，请参阅指南。

带有Gii的Ajax CRUD

EasyAjax内含的Gii生成器允许您立即创建Ajax CRUD控制器和视图。

这将生成一个与Yii2原始的CRUD模式相同的模式，控制器代码中添加了actionModal($id=null)，以及在myViewFolder/_modal.php视图中负责在Ajax模态框中创建或更新数据。

您可以通过简单地设置集成ActionColumn方法的'modal'参数将CRUD行为切换为Ajax模态框。

// myViewFolder/index.php 

<?= \yii\grid\GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],
        'id',
        // ... your gridview fields
        [
            'class' => 'letsjump\easyAjax\helpers\ActionColumn',
            'modal' => true
        ],
    ],
]); ?>

附加功能：删除记录不会导致页面完全刷新，因此GridView分页不会受到影响。

有关所有可用选项的详细信息，请参阅指南。

Ajax标签页

EasyAjax标签页（EasyAjax::tab('tab-id', '要注入的内容')）是一个简单且非常基本的方式，通过控制器返回的Ajax响应来更新Bootstrap标签页的内容。

视图

在\yii\bootstrap\Tabs小部件的每个标签项中，您必须

在请求中包含一个 linkOptions 参数，并引用控制器动作 URL，以及一个 data-yea=1 参数，这将触发请求。
设置标签容器 ID（'options' => ['id' => 'yourTabID']），以便对其内容的稳定引用。

<?= \yii\bootstrap\Tabs::widget([
    'items' => [
        [
            'label'       => 'Rome',
            'linkOptions' => [
                'data-href' => \yii\helpers\Url::to(['site/tab', 'id' => 'rome',]),
                'data-yea'  => 1
            ],
            'options'     => ['id' => 'rome'],
        ],
        // ... other tabs
    ]
]) ?>

控制器

只需将 EasyAjax 方法 EasyAjax::tab(tab-id, content) 包含到控制器动作响应数组中

public function actionTab($id)
{
    $date = new \DateTimeImmutable('now');
    
    $content = [
        'rome' => $date->setTimezone(new \DateTimeZone('Europe/Rome'))->format('l jS \of F h:i:s A'),
        'london' => $date->setTimezone(new \DateTimeZone('Europe/London'))->format('l jS \of F h:i:s A'),
        'new-york' => $date->setTimezone(new \DateTimeZone('America/New_York'))->format('l jS \of F h:i:s A'),
        'calcutta' => $date->setTimezone(new \DateTimeZone('Asia/Calcutta'))->format('l jS \of F h:i:s A'),
    ];
    
    if ( ! array_key_exists($id, $content)) {
        throw new \yii\web\BadRequestHttpException('Your request is invalid');
    }
    
    Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
    
    return [
        \letsjump\easyAjax\EasyAjax::tab($id, '<p>' . $content[$id] . '</p>')
    ];
}

注意：tab-id 必须指定时不包含井号 (#)。

有关所有可用选项，请参阅指南。

内容替换

EasyAjax ContentReplace(['#container1-id'=>'New content', '#container2-id'=>'New content', ...]) 将特定 HTML 标签的内容替换为 EasyAjax 响应中发送的代码。它使用 jQuery.html() 标准方法。

public function actionContentReplace()
{
    Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
    
    return [
        \letsjump\easyAjax\EasyAjax::contentReplace(['#time-placeholder' => date('d/m/Y H:i:s')])
    ];
}

有关详细信息，请参阅指南。

确认

您可以使用 EasyAjax 的 confirm('message', 'url') 方法在控制器动作中触发一个 JavaScript 窗口 confirm()。通过点击“确定”按钮，它将触发一个对在 url 参数中指定的动作的 Ajax 请求。

public function actionConfirm()
{
    Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
    
    return [
        \letsjump\easyAjax\EasyAjax::confirm('This will fire a growl. Ok?', \yii\helpers\Url::to(['site/notify']))
    ];
}

有关详细信息，请参阅指南。

安全

查看SECURITY.md

贡献

查看CONTRIBUTING.md

致谢

Yiisoft 为大型应用程序提供最佳 PHP 框架（我的个人观点），Twitter Bootstrap，以及 Bootstrap Notify 插件。行为准则改编自 Contributor Covenant。

许可

查看LICENSE.md

letsjump / yii2-easy-ajax

维护者

详细信息

README

安装

配置

用法

1. 请求

2. 响应

模态框

通知

Pjax重载

表单验证

带有Gii的Ajax CRUD

Ajax标签页

内容替换

确认

安全

贡献

致谢

许可