cascading mysql 主键_laravel-admin 中的联动选择框

提要

在 laravel-admin 中可以利用其本身的 form组件得到我们想要的表单类型，例如有一个为 select 下拉选择的组件，确实是一个不错的组件；在 联动选择 的 demo；本人感觉确实不错，所以就跟着文档结合 demo自己也做 China (province-city-district)一个这样的示例；遇到几个问题想列举下，希望对我情况一样的小伙伴可以参考下：

laravel-admin  demo

数据库设计

借鉴 laravel-admin的 demo，数据库中的表设计为一张表，表设计可见下图：

China

如果不需要表中 timestamp字段的信息，可以在对应的 Model中设置：public $timestamps = false;

帮助工具

安装 laravel-admin中的帮助工具，在最新的版本中新增了面向开发人员的帮助工具，能在开发中提供帮助提高效率，目前提供 脚手架，数据库命令行和 artisan命令行三个工具，这里我们使用的是 脚手架工具 ， 欢迎提供使用建议；

安装：composer require laravel-admin-ext/helpers

php artisan admin:import helpers

使用脚手架：

脚手架使用

1. 上图中 [1] 依次为创建迁移文件，创建模型文件，创建控制器文件，运行迁移文件，需要全部打钩；

2. 上图中 [2] 为默认的数据库表主键；

3. 上图中 [3] 为 timestamps信息，打钩之后表中自动会增加——created_at 和 updated_at 两个字段；取消则无；

4.  仅需要填写对应的 Table name 、Model、Controller等信息，然后点击下面的 submit即可；

5. 按照 laravel-admin 的 demo实例，需要重复执行，需要建立 ProvinceController、CityController、DistrictController三个控制器，公用一个模型，只是需要数据的类型不一样(根据 Type的值不同筛选，只需要在对应的 Controller中的 grid方法增加一个过滤即可)；

例如 ChinaController方法中为 ：protected function grid()

{

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

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

// 禁用创建按钮

$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','区县')->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