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_atupdated_at 两个字段;取消则无;

4.  仅需要填写对应的 Table nameModel Controller 等信息,然后点击下面的 submit 即可;

5. 按照 laravel-admindemo 实例,需要重复执行,需要建立 ProvinceControllerCityControllerDistrictController 三个控制器,公用一个模型,只是需要数据的类型不一样(根据 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

推荐阅读更多精彩内容

  • 原文链接 必备品 文档:Documentation API:API Reference 视频:Laracasts ...
    layjoy阅读 6,886评论 1 118
  • 文章分类 后台文章分类列表页模板导的详细步骤建立数据表blog_category,并添加相应的文章字段使用php ...
    JoyceZhao阅读 1,083评论 0 9
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 86,926评论 14 122
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    会飞的鱼69阅读 24,308评论 18 391
  • 张清的日精进第45天 体验入 借鉴学习前辈 企业起步容易,发展难。如果想把企业做强做大,就必须按照市场化,让有能力...
    kiyoi2017阅读 43评论 0 1