laravel-admin 开发 bootstrap-treeview 扩展包

49次阅读

共计 3048 个字符,预计需要花费 8 分钟才能阅读完成。

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

正文完
 0