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

效果圖：

開發過程：

1、先創建Laravel項目，并集成laravel-admin，教程：

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

2、生成開發擴展包

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

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

3、刪除沒必要的目錄，以及添加CSS、JS資源

4、修改CascadeServiceProvider
4.1、修改視圖的命名空間

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

4.2、修改資源發布的位置，這里將資源發布到/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.3、編寫視圖文件，在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.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 = <<<EOTvar 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.5、在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、準備本地安裝

5.1、此時如果輸入

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種解決方式：
1、修改項目的composer.json

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

2、修改擴展包的composer.json

"version": "1.0.0",

5.2、開始本地安裝

composer require csp/cascade

5.3、發布資源

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

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

6、使用

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

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

總結

以上是生活随笔為你收集整理的laravel-admin 开发 bootstrap-treeview 扩展包的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。