README

使用框架和回调显示您的管理员操作，Bootstrap 模态框。

当前状态：进行中。

安装

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

运行以下命令

php composer.phar require --prefer-dist devgroup/yii2-admin-modals "*"

或者

"devgroup/yii2-admin-modals": "*"

将以下内容添加到您的 composer.json 文件的 require 部分。

用法

1. 配置应用程序

添加具有组件 ID adminModals 的 DevGroup\AdminModals\components\AdminModals 组件。

修改您的主要 Web 应用程序配置

return [
    // your app config here
    // ...
    
    'components' => [
        'adminModals' => [
            'class' => 'DevGroup\AdminModals\components\AdminModals',
            'layoutFile' => '@app/actions/views/empty-layout',
        ],
        // your other app components
    ],
];

AdminModals 组件有以下参数

• layoutFile(必需) - 简化布局文件的路径，不包含您的标题、页脚、容器等。当您的操作在模态框框架内渲染时使用此布局。
• magicParamKey 和 uniqueParamKey - 用于 JS 部分和 yii2 后端之间通信的 GET 参数名称。

2. 添加 admin-modals 操作

Admin-modals 操作用于在加载所需路由期间在模态框框架内显示简单的空页面。

您可以在那里显示加载指示器。

默认情况下，yii2-admin-modals 的 JS 部分将加载 '/site/admin-modal'。这可以在以后进行配置。

要添加操作，修改您的 Controller 的 actions() 函数

    public function actions()
    {
        return [
            // other actions here...
            
            'admin-modal' => [
                'class' => DevGroup\AdminModals\actions\EmptyPageAction::class,
                'viewFile' => '@DevGroup/AdminModals/views/admin-modal',
                'layoutFile' => '@app/actions/views/empty-layout',
            ]
        ];
    }

EmptyPageAction 以下参数

• layoutFile - 与 AdminModalsBehavior 中的相同，但不是必需的。如果没有设置，则将使用默认控制器布局。
• viewFile - 空页面的视图文件位置。默认情况下使用示例视图。对此视图文件的要求是包含具有 admin-modal__frame-form 类的表单标签，该类将用于通过 POST 方法加载操作。

3. 前端配置

首先，您需要将依赖项 DevGroup\AdminModals\assets\AdminModalsBundle 添加到您的主要应用程序 AssetBundle 中。

class AppAsset extends AssetBundle
{
    // your stuff here

    public $depends = [
        // add dependency
        DevGroup\AdminModals\assets\AdminModalsBundle::class,
    ];
}

如果您需要配置 yii2-admin-modals 的 JS 部分，请在 AdminModalsBundle 加载之前添加 JavaScript 对象（例如在打开 body 标签之后）。

window.AdminModalsSettings = {
    modalActionSelector: '.admin-modal-trigger',
    dataAttribute: 'adminModals',
    adminModalPageUrl: '/site/admin-modal',
    adminModalFrameFormSelector: '.admin-modal__frame-form',
    magicParamKey: '__admin_modals',
    adminModalsUniqueParamKey: '__admin-modals__unique-id'
}

4. 使用您的模态框

所有分配了 admin-modal-trigger 类的链接和按钮将自动调用打开模态窗口，而不是直接执行操作。

示例代码

<a href="/admin/user/edit?id=1" class="btn btn-primary modal-test admin-modal-trigger">
    Open user #1 edit form in modal!
</a>

如何手动触发模态框？

显示 jstree 节点删除确认的示例

function confirmDelete(node) {
  AdminModals.modalOpen({
    url: '/category/delete',
    data: {
      id: $(node.reference[0]).data('id')
    },
    method: 'GET',
    closeCallback: function() {
      alert('Thank you!');
    }
  });
  return false;
}

这将显示 /category/delete?id=### 在模态框中。

辅助工具

JsTreeHelper

DevGroup\AdminModals\helpers\JsTreeHelper 有以下静态函数

• modalOpen($route, $method = 'GET', $attributesMapping = ['id' => 'id']) - 用于在上下文菜单操作上打开模态框。属性映射描述了要添加到请求中的额外数据参数。键是目标参数的名称，值是存储目标值的 jstree 节点数据属性的关键。

待办事项

• 实现回调
• 添加更多 $ 样式的事件
• 记录所有选项
• 描述主要概念（iframe -> location|form.submit -> storage 事件 -> 提取按钮 ...）
• 测试应用程序
  • 简单模态框演示
  • GridView 操作演示（还测试了 pjax）
  • 部署实时版本
  • Codeception 功能测试
  • 截图和演示视频
• 添加酷炫徽章
• 移除 console.log
• ???
• 盈利！！！并且传播消息