laravel-admin 開發 bootstrap-treeview 擴充套件包
摘要：
laravel-admin 擴充套件開發文件
https://laravel-admin.org/doc...
效果圖：
開發過程：
1、先建立Laravel專案，並整合laravel-admin，教程：
http://note.youdao...
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 = <<<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.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 以 ,(逗號) 分割提交所有被選中的值。