laravel-admin 中的聯動選擇框

提要

laravel-admin 中可以利用其本身的 form 組件得到我們想要的表單類型,例如有一個為 select ?下拉選擇的組件,確實是一個不錯的組件;在 laravel-admin 的官方 demo?中,有一個聯動選擇demo ;本人感覺確實不錯,所以就跟著文檔結合 demo 自己也做 China (province-city-district) 一個這樣的示例;遇到幾個問題想列舉下,希望對我情況一樣的小伙伴可以參考下:

laravel-admin ?demo

數據庫設計

借鑒?laravel-admin demo ,數據庫中的表設計為一張表,表設計可見下圖:

China

如果不需要表中 timestamp 字段的信息,可以在對應的 Model?中設置:

public $timestamps = false;

幫助工具

安裝?laravel-admin中的幫助工具,在最新的版本中新增了面向開發(fā)人員的幫助工具,能在開發(fā)中提供幫助提高效率,目前提供 腳手架數據庫命令行?artisan 命令行三個工具,這里我們使用的是 腳手架工具 , 歡迎提供使用建議;

安裝:

composer require laravel-admin-ext/helpers

php artisan admin:import helpers

使用腳手架:

腳手架使用

1. 上圖中 [1] 依次為創(chuàng)建遷移文件,創(chuàng)建模型文件,創(chuàng)建控制器文件,運行遷移文件,需要全部打鉤;

2. 上圖中 [2] 為默認的數據庫表主鍵;

3. 上圖中 [3] 為?timestamps ?信息,打鉤之后表中自動會增加——?created_atupdated_at 兩個字段;取消則無;

4. ?僅需要填寫對應的 Table nameModel Controller 等信息,然后點擊下面的 submit 即可;

5. 按照 laravel-admindemo 實例,需要重復執(zhí)行,需要建立 ProvinceControllerCityControllerDistrictController 三個控制器,公用一個模型,只是需要數據的類型不一樣(根據 Type 的值不同篩選,只需要在對應的 Controller 中的 grid 方法增加一個過濾即可);

例如 ChinaController 方法中為 :

protected function grid() {

????????????return Admin::grid(China::class, function (Grid $grid) {

????????????// $grid->id('ID')->sortable();

????????????// 禁用創(chuàng)建按鈕

????????????$grid->disableCreation();

????????????// 禁用操作按鈕

????????????$grid->disableActions();

????????????// 禁用刪除按鈕

????????????// $grid->disableDelete();

????????????// $grid->Type(); ?數據過濾

????????????$grid->model()->where('type',1); });

}

cascading-select

所有需要的文件都已準備好,接下來做的就是聯動選擇框:

1.準備 form 表單

表單中的 options 方法即返回數據庫中此條記錄的值;

protected function form() {

????????????return Admin::form(Orders::class, function (Form $form) {

????????????$form->method('GET');

????????????$form->action('/admin/api/province');

????????????$form->select('sheng','省')->options(

????????????????????China::where('type' , 1)->pluck('name' , 'id') ? ? ? ? ? ?//回顯

????????????)->load('shi', '/admin/api/city');

????????$form->select('shi','市')->options(function($id){

???????????????????return China::where('id' , $id)->pluck('name' , 'id'); ? ? //回顯

????????})->load('quxian', '/admin/api/district');

????????$form->select('quxian','區(qū)縣')->options(function($id){

????????????????????return China::where('id' , $id)->pluck('name' , 'id'); ? ? ? ?//回顯

????????});

????}

}

2.準備接口數據,以下為 laravel-admin 的原生方法查找返回 json 數據包,本人測試用 php 的方法也可以(接口數據轉為 json ,然后設置接口返回數據類型),不過會麻煩很多,建議用下面的方式:

// province ? api

public function api(){

// 這是第二種原生方法

????????????$provinceId = China::where('type', 1)->get(['id', DB::raw('name as text')]);

????????????return $provinceId;

}

// ?city ? api

public function api(Request $request ){

????????????$provinceId = $request->get('q');

????????????$city = City::where('parent_id', $provinceId)->get(['id', DB::raw('name as text')]);

????????????return $city;

}

// ? district ? api

public function api(Request $request ){

????????????$provinceId = $request->get('q');

????????????$district = District::where('parent_id', $provinceId)->get(['id', DB::raw('name as text')]);

????????????return $district;

}

3.然后在打開自己 demo 就可以看到效果了(歡迎提出寶貴建議),如下圖:

demo



? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? THANK ? ? ? YOU

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 原文鏈接 必備品 文檔:Documentation API:API Reference 視頻:Laracasts ...
    layjoy閱讀 8,619評論 0 121
  • 文章分類 后臺文章分類列表頁模板導的詳細步驟建立數據表blog_category,并添加相應的文章字段使用php ...
    JoyceZhao閱讀 1,750評論 0 14
  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現,斷路器,智...
    卡卡羅2017閱讀 134,837評論 18 139
  • 1. Java基礎部分 基礎部分的順序:基本語法,類相關的語法,內部類的語法,繼承相關的語法,異常的語法,線程的語...
    子非魚_t_閱讀 31,739評論 18 399
  • 張清的日精進第45天 體驗入 借鑒學習前輩 企業(yè)起步容易,發(fā)展難。如果想把企業(yè)做強做大,就必須按照市場化,讓有能力...
    kiyoi2017閱讀 298評論 0 1