laravel-admin 开发 bootstrap-treeview 扩展包

红太狼 2021-03-23 13:24 509阅读 0赞

laravel-admin 扩展开发文档  
[https://laravel-admin.org/doc...][https_laravel-admin.org_doc...]

效果图：

![clipboard.png][]

开发过程：

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

[http://note.youdao.com/notesh...][http_note.youdao.com_notesh...]

2、生成开发扩展包

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

其中， csp/cascade 是包名， CspCascade 是命名空间，生成的结构如下（删减版）：

![clipboard.png][clipboard.png 1]

3、删除没必要的目录，以及添加CSS、JS资源

![clipboard.png][clipboard.png 2]

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

![clipboard.png][clipboard.png 3]

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

[clipboard.png]: /images/20210323/1616505874055.png
[http_note.youdao.com_notesh...]: http://note.youdao.com/noteshare?id=924fc4aaf2f180f89fd1742c1dda37af
[clipboard.png 1]: /images/20210323/1616505824290.png
[clipboard.png 2]: /images/20210323/1616504932850.png
[clipboard.png 3]: /images/20210323/1616504909346.png