Laravel-admin 的控制元件互動

zuweie發表於2019-01-02
Laravel控制元件

專案來由

  • laravel是一個很好的框架，使用起來很方便。而其中的laravel-admin更是方便我們對一個完整的Web平臺搭建。然後laravel-admin有個蛋疼之處，就是laravel-admin各個Field之間沒有互動的功能，或者說是沒有互動的介面。這讓我想實現一些控制元件間互動的邏輯的時候，都非得重新自定義一個控制元件組，讓幾個控制元件組合成一個新的控制元件來實現。

  • 我寫了一個FieldInteraction提供一個介面，用於注入javascript，使得各個Field之間有互動的可能。

    演示 gif （如果沒反應，請點選觀看)

    FieldInteraction
    動畫看不到點這裡

    演示的原始碼

    演示原始碼

    專案地址

    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中的支援觸發事件的控制元件，以及他們的觸發的事件
控制元件類 能否觸發 觸發事件 說明
Text 是 input / change -
Select 是 select / unselect -
Radio 是 checked -
checkbox 是 checked / unchecked -
Textarea 是 input / change -
Url 是 input / change -
Color 是 changeColor -
Email 是 input / change -
Mobile 是 input / change -
File 是 change / fileclear -
Image 是 change / fileclear -
Date 否 - -
Number 否 - -
Currency 是 change / input -
SwitchField 是 switchchange -
Tags 是 select / unselect -
Icon 否 - -
MultipleFile 是 change / fileclear -
MultipleImage 是 change / fileclear -
ListBox 否 - -
Rate 是 change / input -
Password 否 - -
Datetime 否 - -
Time 否 - -
Year 否 - -
Month 否 - -
DateRange 否 - -
DateTimeRange 否 - -
TimeRange 否 - -
  • createSubscriberScript 接收事件並處理事件：
    TriggerScript 是為了控制元件能觸發事件，那麼 SubscriberScript 就是為了監聽和處理事件。監聽和處理事件需要在createSubscriberScript函式中的$builder物件新增。下面簡要說明如何在$builder新增監聽和處理。
    • $builder->subscribe(arg1, arg2, func);
    • arg1 : 需要關注的控制元件的名稱。
    • arg2 : 需要監聽的事件，每個控制元件有一個或者以上的事件，具體檢視TriggerScript給出的表格。
    • func : 事件監聽後的函式，必須返回一個完整的javascript的function，否則會出現語法錯誤。

後記

  • 由於時間關係，本專案只在chrome瀏覽器上做過測試，請慎用～～～～

zuweie

相關文章