FieldInteraction

项目来由

• laravel是一个很好的框架，使用起来很方便。而其中的laravel-admin更是方便我们对一个完整的Web平台搭建。然后laravel-admin有个蛋疼之处，就是laravel-admin各个Field之间没有互动的功能，或者说是没有互动的接口。这让我想实现一些控件间互动的逻辑的时候，都非得重新自定义一个控件组，让几个控件组合成一个新的控件来实现。

• 我写了一个FieldInteraction提供一个接口，用于注入javascript，使得各个Field之间有互动的可能。

  演示 gif （如果没反应，请点击观看)

  
  动画看不到点这里

  演示的源码

  演示源码

  项目地址

  Github

  安装

• composer require zuweie/field-interaction

• 在laravel中的 config/app 的provider加入 Field\Interaction\InteractionServiceProvider 如下：

  'providers' => [
    //...
    App\Providers\AppServiceProvider::class,
    App\Providers\AuthServiceProvider::class，
    App\Providers\EventServiceProvider::class,
    App\Providers\RouteServiceProvider::class,
    //...
    Field\Interaction\InteractionServiceProvider::class,
  ]

• 执行以下命令：

  php artisan vendor:publish --provider="Field\Interaction\InteractionServiceProvider"

  使用

• 在app/Admin/bootstrap.php中注册 scriptinjecter

  //.... 一些你自己的代码 ....
  // 这个是例子，和本项目无关
  Encore\Admin\Form::forget(['map', 'dev']); 
  //.... 一些你自己的代码 ....
  
  // 注册scriptinjecter，稍后使用。
  Encore\Admin\Form::extend('scriptinjecter', Field\Interaction\ScriptInjecter::class);
  

• 这里以Admin中生成的UserController为例子(关于Admin的controller生成，请参考laravel-admin的文档)，在UserController中引入以下两个Trait。

  use Field\Interaction\FieldTriggerTrait;
  use Field\Interaction\FieldSubscriberTrait;
  
  class UserController extends Controller 
  {
    use FieldTriggerTrait, FieldSubscriberTrait, ......;
    .....
    ....
    ....

  • 在Form的函数中：

    // UserController 中的 form 函数。
    protected function form(){
    $form = new Form(new User());
    ... 
    ...
    // 一些控件的定义
    ...
    ...
    
    // 在定义完控件后。。。
    // 弄一个触发事件的Script对象。
    $triggerScript = $this->createTriggerScript($form);
    
    // 弄-个接收并处理事件的Script对象。
    $subscribeScript = $this->createSubscriberScript($form, function($builder){
       // 添加事件响应函数
       $builder->subscribe('column_listen_to', 'event_will_triggered', function($event){
    
       // 这里填写处理事件的javascript脚本，注意：一定要返回一个完整的 javascript function ，否则报错！！！！
           return <<< EOT
    
           // function中的参数data，是事件自带数据，方便做逻辑处理！data会因为事件不同而类型不同，具体可以在chrome中的console中查看。
           function(data){
              console.log ('catch an event -> {$event}');
              // 某个控件对于某个事件做出处理， 
    
              $('xxx').doSomething();
              //.... 事件处理 ....
           }
    
    EOT;
       });
    });
    
    // 最后把 $triggerScript 和 $subscribeScript 注入到Form中去。
    $form->scriptinjecter('name_no_care', $triggerScript, $subscribeScript);
    }

说明

• $createTriggerScript 返回一个针对原来laravel-admin已有的控件的事件触发脚本。但是很遗憾有一些控件，我是怎么也找不到他们的触发事件，以下给出laravel-admin中的支持触发事件的控件，以及他们的触发的事件

• createSubscriberScript 接收事件并处理事件：
  TriggerScript 是为了控件能触发事件，那么 SubscriberScript 就是为了监听和处理事件。监听和处理事件需要在createSubscriberScript函数中的$builder对象添加。下面简要说明如何在$builder添加监听和处理。
  • $builder->subscribe(arg1, arg2, func);
  • arg1 : 需要关注的控件的名称。
  • arg2 : 需要监听的事件，每个控件有一个或者以上的事件，具体查看TriggerScript给出的表格。
  • func : 事件监听后的函数，必须返回一个完整的javascript的function，否则会出现语法错误。

后记

• 由于时间关系，本项目只在chrome浏览器上做过测试，请慎用～～～～

本作品采用《CC 协议》，转载必须注明作者和本文链接