laravel-admin 开发 bootstrap-treeview 扩展包

laravel-admin 扩展开发文档
https://laravel-admin.org/doc...

效果图:

clipboard.png

开发过程:

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

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

2、生成开发扩展包

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

其中, csp/cascade 是包名, CspCascade 是命名空间,生成的结构如下(删减版):

clipboard.png

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

clipboard.png

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/388315.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

怎么看服务器上jdk安装位置,查看云服务器jdk安装路径

查看云服务器jdk安装路径 内容精选换一换用户可以在公有云MRS集群以外的节点上使用客户端&#xff0c;在使用客户端前需要安装客户端。如果集群外的节点已安装客户端且只需要更新客户端&#xff0c;请使用安装客户端的用户例如root。针对MRS 3.x之前版本的集群&#xff0c;需要…

公司生日会生日礼物_你的生日有多受欢迎?

公司生日会生日礼物In the years before 2020, it was common for a large number of school children (20–30 or more) to physically colocate for their math lessons. And in many a class, students were asked to compute the probability that two of them had the sam…

Django思维导图

转载于:https://www.cnblogs.com/liangying666/p/9744477.html

XebiaLabs DevOps平台推出软件发布风险和合规性管理功能

XebiaLabs是DevOps和持续交付软件工具供应商&#xff0c;通过其DevOps平台推出了用于软件版本发布的监管、安全和合规风险评估跟踪功能。 这些新功能旨在帮助组织跟踪应用程序的发布状态信息&#xff0c;了解跨多个应用程序、团队和环境的安全性和合规性风险。XebiaLabs表示&am…

wp7开发环境搭建

简介 本文通过step by step的模式讲述如何从0开始搭建Window Phone 7开发环境&#xff0c;如果开发简单的Windows Phone 7程序。只是一篇介绍性的文章,但是迈进Windows Phone 7开发之路其实就那么简单,一起来开发Windows Phone 7吧。 Windows 7安装 目前Windows Phone 7开发…

旧金山字体_旧金山建筑业的兴衰。 施工趋势与历史

旧金山字体This series of articles is devoted to the study of the construction activity of the main city of Silicon Valley — San Francisco. Charts and calculations were built with the help of Jupyter Notebook (Kaggle)该系列文章专门研究硅谷主要城市旧金山的建…

gym100825G. Tray Bien(轮廓线DP)

题意:3 * N的格子 有一些点是坏的 用1X1和1X2的砖铺有多少种方法 题解:重新学了下轮廓线 写的很舒服 #include <bits/stdc.h> using namespace std; typedef long long ll;int n, m; int vis[30][5]; ll dp[25][1 << 3];void dfs(int num, int i, int state, int n…

github上打包的样式为什么在预览的时候,出现404

这是资源引用的问题 在这里主要是需要在dist的index.html文件内将"./static/css/style.css"改为"static/css/style.css",就可以加载成功了&#xff0c; 至于js的路径"./static/js/app.js"&#xff0c;就不用改了转载于:https://www.cnblogs.com/…

lambda函数,函数符_为什么您永远不应该在Lambda函数中使用print()

lambda函数&#xff0c;函数符两个Lambda用户的故事 (A Tale of Two Lambda Users) 故事1&#xff1a;业余 (Tale #1: The Amateur) One moment everything is fine, then … Bam! Your Lambda function raises an exception, you get alerted and everything changes instantl…

[ BZOJ 4668 ] 冷战

\(\\\) \(Description\) 有\(N\)个点&#xff0c;开始没有边相连&#xff0c;进行按顺序给出的\(M\)个操作&#xff1a; \(0\ u\ v\) 将\(u,v\)两点连一条边\(1\ u\ v\) 查询\(u,v\)两点最早在第几条边连接的时候被连通每次询问输出一个边的编号&#xff0c;强制在线。 \(N,M\i…

使用容器和数据库克隆进行数据库迁移

SQL Server迁移在DBA的生命周期中是一个常量&#xff0c;SQL Server 2008的支持终结正在推动大量的迁移规划。数据库迁移通常涉及将备份还原到目标环境&#xff0c;为应用程序测试提供开发和QA环境&#xff0c;以及识别已弃用的功能。当处理涉及需要数小时恢复的大量数据库的大…

C++获取PE文件的入口点

2009-10-07 10:17 C获取PE文件的入口点 源码&#xff1a; #include "stdafx.h" #include <iostream> #include <windows.h> using namespace std; int main(int argc, char* argv[]) { char *FileName argv[1]; HANDLE hFile CreateFile(FileName,GENE…

ai 中 统计_AI统计(第2部分)

ai 中 统计Today I plan to cover the following topics: Linear independence, special matrices, and matrix decomposition.今天&#xff0c;我计划涵盖以下主题&#xff1a;线性独立性&#xff0c;特殊矩阵和矩阵分解。 线性独立 (Linear independence) A set of vectors …

如何修改浏览器的默认滚动条样式

如何修改浏览器的默认滚动条样式 /* 浏览器滚动条样式 *//* width */ ::-webkit-scrollbar {width: 4px;height: 4px; }/* Track */ ::-webkit-scrollbar-track {background: rgb(255, 255, 255);border-radius: 8px; }/* Handle */ ::-webkit-scrollbar-thumb {background: rg…

PE

PE文件规定了可执行文件的格式&#xff0c;凡是符合此格式的文件都能在windows系统上运行。PE文件的格式暂且不谈&#xff0c;说一些感染PE文件的几种途径。 导入表感染。这个涉及比较复杂的操作&#xff0c;首先&#xff0c;要自行写一个dll文件&#xff0c;提供程序中对原dl…

python入门系列:对象引用、垃圾回收、可变性

Python中的变量是什么 引言 Python和java中的变量本质不一样&#xff0c;java的变量可以理解为一个盒子&#xff0c;用来容纳我们的对象&#xff0c;使用前要先声明它&#xff0c;好分配给我们合适的内存空间。Python的变量可以理解为一个标签&#xff0c;先构造出对象&#xf…

twitter数据分析_Twitter上最受欢迎的数据科学文章主题

twitter数据分析If you’ve written data science articles or are trying to get started, finding the most popular topics is a big help in getting your articles read. Below are the steps to easily determine what these topics are using R and the results of the …

JAVA遇见HTML——JSP篇(JSP状态管理)

案例&#xff1a;Cookie在登录中的应用 URL编码与解码的工具类解决中文乱码的问题&#xff0c;这个工具类在java.net.*包里 编码&#xff1a;URLEncoder.encode(String s,String enc)//s&#xff1a;对哪个字符串进行编码&#xff0c;enc&#xff1a;用的字符集&#xff08;例&…