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.pswp.cn/news/388315.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/388315.shtml
英文地址,請注明出處:http://en.pswp.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;例&…