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中的帮助工具，在最新的版本中新增了面向开发人员的帮助工具，能在开发中提供帮助提高效率，目前提供 脚手架，数据库命令行 和 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