tokarskimarcin/laravel-admin-ext-modal-form

扩展允许创建模态表单

v0.1.5 2020-05-15 10:54 UTC

README

preview

需求

  • "php": ">=7.2.0",
  • "encore/laravel-admin": "~1.6"

安装

发布

执行以下命令以发布包。它将复制供应商资源到您的应用程序公共目录。

php artisan vendor:publish --provider="Encore\ModalForm\ModalFormServiceProvider"

更新

要更新包的资产,请在发布命令中添加 --force 选项。

文档

1. 创建模态按钮

使用 Encore\ModalForm\Form\ModalButton 类创建模态按钮。在构造函数中传递参数(字符串 $title,字符串 $href)

use Encore\Admin\Layout\Content;
use Encore\Admin\Layout\Column;
use Encore\Admin\Layout\Row;
use Encore\Admin\Widgets\Box;
use Encore\ModalForm\Form\ModalButton;

class HomeController {
    ...
    public function index(Content $content)
    {
        return $content->row(function (Row $row){
                   $row->column(4, function (Column $column){
                       $box = new Box();

                        //creates modal button with `Modal` title and generated route
                       $modalButton = new ModalButton('Modal', route('modal-form.create'));
                       
                       $box->content($modalButton);
                       $column->append($box);
                   });
               });
    }
}

方法

//overrides classes of html button tag
$modalButton->setClass('btn-primary');

//appends class to existing once
$modalButton->addClass('btn-primary');

//retrieving settled classes as string
$modalButton->getClasses();

//sets href
$modalButton->setHref('url');

//returns settled hrefg
$modalButton->getHref();

2. 表单

将模态表单用作常规 Admin 表单

use \Encore\ModalForm\Form\ModalForm;

new ModalForm(new Administrator(), function (ModalForm $form){
    $form->display('id', 'ID');
    
    //set action for proper submitting
    $form->setAction(route('modal-index-route'));
});

或通过 Modal 门面如 Admin 门面

use \Encore\ModalForm\Facades\Modal;

Modal::form(new Administrator(), function (ModalForm $form){
    ...
});

模态大小可以更改

$form->small();

$form->medium();

$form->large();

3. JS

在模态按钮上触发事件。

按钮选择器

$('a[data-form="modal"]');

####事件

1. modelCreating

模态表单提交后

2. modelFailed

在ajax响应错误时

3. modelValidationFailed

在响应验证错误时

4. modelCreated

在模型创建成功时。当此事件触发时,模型 ID 可在按钮数据中找到。ID 可以在那里找到,直到新模型创建

$('a[data-form="modal"]').on('modelCreated', (e) => {
    var createdModelId = $(e.target).data('model-id');
});