php的treeview,laravel-admin 开发 bootstrap-treeview 扩展包

效果图：

开发过程：

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

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

{{$label}}

@include('admin::form.error')

@include('admin::form.help-block')

4.4、编写 CascadeTreeView 继承 Field

/**

* 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 = <<

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 以 ,(逗号) 分割提交所有被选中的值。