数据表单弹窗

通过Form::dialog方法可以快速构建一个基于数据表单的表单弹窗，仅需增加数行代码。

表单弹窗的实现原理是：通过create和edit页面获取构建好的表单HTML字符，然后使用弹窗插件把这部分HTML字符渲染出来。 如果期间需要加载新的js脚本，则会等待脚本加载完毕再执行表单初始化js代码。

简单示例

开启表单弹窗

  1. <?php
  3. use App\Http\Controllers\Controller;
  4. use Dcat\Admin\Form;
  5. use Dcat\Admin\Layout\Content;
  7. class ModalFormController extends Controller
  8. {
  9.     public function index(Content $content)
  10.     {
  11.         return $content
  12.             ->header('Modal Form')
  13.             ->body($this->build());
  14.     }
  16.     protected function build()
  17.     {
  18.         Form::dialog('新增角色')
  19.             ->click('.create-form') // 绑定点击按钮
  20.             ->url('auth/roles/create') // 表单页面链接，此参数会被按钮中的 “data-url” 属性替换。。
  21.             ->width('700px') // 指定弹窗宽度，可填写百分比，默认 720px
  22.             ->height('650px') // 指定弹窗高度，可填写百分比，默认 690px
  23.             ->success('Dcat.reload()'); // 新增成功后刷新页面
  25.         Form::dialog('编辑角色')
  26.             ->click('.edit-form')
  27.             ->success('Dcat.reload()'); // 编辑成功后刷新页面
  29.         // 当需要在同个“class”的按钮中绑定不同的链接时，把链接放到按钮的“data-url”属性中即可
  30.         $editPage = admin_base_path('auth/roles/1/edit');
  32.         return "
  33.               <div style='padding:30px 0'>
  34.                   <span class='btn btn-success create-form'> 新增表单弹窗 </span> &nbsp;&nbsp;
  35.                   <span class='btn btn-blue edit-form' data-url='{$editPage}'> 编辑表单弹窗 </span>
  36.               </div>
  37.                 ";
  38.     }
  40. }

表单构建以及保存数据

  1. <?php
  3. use App\Admin\Repositories\Role;
  4. use Dcat\Admin\Controllers\HasResourceActions;
  5. use Dcat\Admin\Form;
  6. use Dcat\Admin\Layout\Content;
  7. use Dcat\Admin\Admin;
  9. class RoleController
  10. {
  11.     use HasResourceActions;
  13.     /**
  14.          * Edit interface.
  15.          *
  16.          * @param mixed   $id
  17.          * @param Content $content
  18.          *
  19.          * @return Content
  20.          */
  21.         public function edit($id, Content $content)
  22.         {
  23.             return $content
  24.                     ->header(trans('admin.roles'))
  25.                     ->description(trans('admin.edit'))
  26.                     ->body($this->form()->edit($id));
  27.         }
  29.         /**
  30.          * Create interface.
  31.          *
  32.          * @param Content $content
  33.          *
  34.          * @return Content
  35.          */
  36.         public function create(Content $content)
  37.         {
  38.             return $content
  39.                     ->header(trans('admin.roles'))
  40.                     ->description(trans('admin.create'))
  41.                     ->body($this->form());
  42.         }
  44.     /**
  45.      * Make a form builder.
  46.      *
  47.      * @return Form
  48.      */
  49.     protected function form()
  50.     {
  51.         return Form::make(new Role(), function (Form $form) {
  52.             $form->display('id', 'ID');
  54.             $form->text('slug', trans('admin.slug'))->required()->prepareForSave(function ($value) {
  55.                 return $value;
  56.             });
  57.             $form->text('name', trans('admin.name'))->required();
  59.             $form->tree('permissions')
  60.                  ->nodes(function () {
  61.                      $permissionModel = config('admin.database.permissions_model');
  62.                      $permissionModel = new $permissionModel;
  64.                      return $permissionModel->allNodes();
  65.                  })
  66.                  ->customFormat(function ($v) {
  67.                      if (!$v) return [];
  69.                      return array_column($v, 'id');
  70.                  });
  72.             $form->display('created_at', trans('admin.created_at'));
  73.             $form->display('updated_at', trans('admin.updated_at'));
  74.         });
  75.     }
  76. }

效果

表单弹窗 - 图1

功能接口

表单弹窗必须绑定一个可点击的页面元素，通过点击这个元素弹出弹窗。

设置弹窗标题

  1. <?php
  3. $modal = Form::dialog('标题');

绑定点击按钮

通过ModalForm::click方法可以绑定点击按钮，绑定后当点击该按钮时会弹出弹窗

  1. <?php
  3. Form::dialog('标题')
  4.     ->click('#click-button');

设置URL

如果是创建类型的表单，则可以通过以下方法设置获取表单模板的url

  1. <?php
  3. Form::dialog('新增角色')
  4.     ->click('.create-form')
  5.     ->url('auth/roles/create');

如果是编辑类型的表单，则需要多个url，因为点击每个按钮弹出弹窗的表单内容是不同的，所以每个按钮的链接也不同。

这个时候通过ModalForm::url方法设置的一个链接已经无法满足需求了，因而需要在点击按钮的data-url属性上保存url：

  1. <?php
  3. Form::dialog('编辑角色')
  4.     ->click('.edit-form')
  5.     ->success('Dcat.reload()'); // 编辑成功后刷新页面
  7.     // 当需要在同个“class”的按钮中绑定不同的链接时，把链接放到按钮的“data-url”属性中即可
  8.     $editPage1 = admin_base_path('auth/roles/1/edit');
  9.     $editPage2 = admin_base_path('auth/roles/2/edit');
  10. return "
  11.       <div style='padding:30px 0'>
  12.           <span class='btn btn-blue edit-form' data-url='{$editPage1}'> 编辑表单弹窗1 </span>
  13.           <span class='btn btn-blue edit-form' data-url='{$editPage2}'> 编辑表单弹窗2 </span>
  14.       </div>
  15. ";

表单保存成功回调

通过success方法可以设置表单保存成功之后执行的js代码，在这段js代码作用域内有一个response变量，通过这个变量可以获取服务端返回的json数据。

  1. <?php
  3. Form::dialog('编辑角色')
  4.    ->click('.edit-form')
  5.    ->success(
  6.        <<<JS
  7.           // 打印服务端响应数据             
  8.           console.log(response);
  10.           // 提示成功信息
  11.           Dcat.success(response.message || '保存成功');
  13.           // 保存成功之后刷新页面
  14.           Dcat.reload();
  15.             JS        
  16.    );

表单保存失败回调

通过error方法可以设置表单保存失败之后执行的js代码，在这段js代码作用域内有一个response变量，通过这个变量可以获取服务端返回的json数据。

  1. <?php
  3. Form::dialog('编辑角色')
  4.     ->click('.edit-form')
  5.     ->error(
  6.        <<<JS
  7.           // 打印服务端响应数据       
  8.           console.log(response);
  9.              JS        
  10.    );

表单保存之后回调

通过saved方法可以设置表单保存之后执行的js代码，在这段js代码作用域内有两个js变量：

  • success 值为真表示保存成功，否则失败
  • response 服务端返回的json数据
  1. <?php
  3. Form::dialog('编辑角色')
  4.    ->click('.edit-form')
  5.    ->saved(
  6.        <<<JS
  7.           // 打印服务端响应数据       
  8.           console.log(response);
  10.           if (success) {
  11.               console.log('保存成功');
  12.           } else {
  13.               console.log('保存失败');
  14.           }
  15.             JS        
  16.    );

强制刷新

每次点击按钮都重新从服务端拉取新的模板数据

<?php

Form::dialog('编辑角色')
    ->click('.edit-form')
    ->forceRefresh();

设置弹窗宽高

<?php

Form::dialog('编辑角色')
    ->click('.edit-form')
    ->dimensions('50%', '400px');

// 或
Form::dialog('编辑角色')
    ->click('.edit-form')
    ->width('50%')
    ->height('400px');

工具表单弹窗

数据表单的弹窗功能通常需要结合一个资源控制器去实现，相对会比较复杂一点，所以系统也内置了另外一种更简便的表单弹窗功能，使用方法请参考工具表单-弹窗。

表单弹窗 - 图2