laravel-admin 開發 bootstrap-treeview 擴展包

laravel-admin 擴展開發文檔
https://laravel-admin.org/doc...

效果圖：

開發過程：

一、先建立Laravel項目，並集成laravel-admin，教程：

http://note.youdao.com/notesh...

二、生成開發擴展包

php artisan admin:extend csp/cascade --namespace=Csp\Cascade

其中， csp/cascade 是包名， CspCascade 是命名空間，生成的結構以下（刪減版）：

三、刪除不必的目錄，以及添加CSS、JS資源

四、修改CascadeServiceProvider
4.一、修改視圖的命名空間

if ($views = $extension->views()) {
    $this->loadViewsFrom($views, 'laravel-admin-cascade');
}

4.二、修改資源發佈的位置，這裏將資源發佈到/public/vendor/laravel-admin-ext/cascade 目錄下。

if ($this->app->runningInConsole() && $assets = $extension->assets()) {
    $this->publishes(
        [$assets => public_path('vendor/laravel-admin-ext/cascade')],
        'laravel-admin-cascade'
    );
}

4.三、編寫視圖文件，在views/目錄下建立 cascade.blade.php

<div class="form-group {!! !$errors->has($label) ?: 'has-error' !!}">
    <label for="{{$id}}" class="col-sm-2 control-label">{{$label}}</label>
    <div class="{{$viewClass['field']}}">
        @include('admin::form.error')
        <div id="csp-bootstrap-tree"></div>
        <input type="hidden" name="{{$id}}" id="{{$id}}">
        @include('admin::form.help-block')
    </div>
</div>

4.四、編寫 CascadeTreeView 繼承 Field

<?php
/**
 * Created by PhpStorm.
 * User: chenshaoping
 * Date: 2019/2/10
 * Time: 10:02
 */

namespace App\Admin\Extensions\csp\cascade\src;


use Encore\Admin\Form\Field;

class CascadeTreeView extends Field
{
     
    protected $view = 'laravel-admin-cascade::cascade';

    protected static $css = [
        '/vendor/laravel-admin-ext/cascade/bootstrap-treeview.min.css'
    ];

    protected static $js = [
        '/vendor/laravel-admin-ext/cascade/bootstrap-treeview.min.js'
    ];
    public function render()
    {
        $this->script = <<<EOT
        var set = new Set();
var tree = [
  {
    text:"Parent 1",
    id:1,
    nodes: [
      {
        text:"Child 1",
        id:2,
        nodes: [
          {
            text:"Grandchild 1",
            id:3,
            nodes: [
                {
                    text:"122",
                    id:4,
                    nodes: [
                        {
                        text:"qweqw",
                        id:5,
                        }
                    ]
                }
            ],
          },
          {
            text:"Grandchild 2",
            id:6,
          }
        ]
      },
      {
        text:"Child 2",
        id:7,
      }
    ]
  },
  {
    text:"Parent 2",
    id:8,
  },
  {
    text:"Parent 3",
    id:9,
  },
  {
    text:"Parent 4",
    id:10,
  },
  {
    text:"Parent 5",
    id:11,
  }
]; 
$('#csp-bootstrap-tree').treeview({data: tree, showIcon: false,showCheckbox: true,'showTags':true});
$('#csp-bootstrap-tree').on('nodeChecked', function(event,node) {
    set.add(node.id);
    $('#{$this->id}').val(Array.from(set).toString());
});
$('#csp-bootstrap-tree').on('nodeUnchecked', function(event,node) {
    set.delete(node.id);
    $('#{$this->id}').val(Array.from(set).toString());
});
EOT;
        return parent::render();
    }
}

4.五、在laravel-admin 啓動時，添加資源，添加擴展Form

Admin::booting(function () {
    Admin::js('vendor/laravel-admin-ext/cascade/bootstrap-treeview.min.js');
    Admin::css('vendor/laravel-admin-ext/cascade/bootstrap-treeview.min.css');
    Form::extend('cascade', CascadeTreeView::class);
});

五、準備本地安裝

5.一、此時若是輸入

composer require csp/cascade

會報如下錯誤

Could not find a version of package laravel-admin-ext/cascade matching your minimum-stability (stable). Require it with an
explicit version constraint allowing its desired stability.

緣由很簡單，composer的最小穩定性設置不知足，require 須要的是穩定版本，咱們這裏的確實 dev的版本；這裏有2種解決方式：
一、修改項目的composer.json

"minimum-stability": "dev",
"prefer-stable": true,

二、修改擴展包的composer.json

"version": "1.0.0",

5.二、開始本地安裝

composer require csp/cascade

5.三、發佈資源

php artisan vendor:publish --provider="Csp\Cascade\CascadeServiceProvider"

此時會看到在 public/vendor/laravel-admin-ext/cascade 目錄下面有靜態資源。

六、使用

$form->cascade('parent_id','權限')->help('陳少平');

提交表單的時候，會將 parent_id 以 ,(逗號) 分割提交全部被選中的值。