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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

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