Dcat-admin 多级联动

文章介绍了如何在Dcat-admin2.x中实现省市区的三级联动功能,包括在表单中的选择以及列表的过滤。通过load方法、自定义接口和数据库查询,动态加载下级区域选项,确保联动效果。提供了相关的代码示例和数据表结构。
摘要由CSDN通过智能技术生成
Dcat-admin 2.x 多级联动
需求
  1. 一个省市区的三级联动功能
  2. 在表单中,需要可以实现三级联动
  3. 在列表的查询中,也需要实现三级联动
实现说明
  1. 前提:dcat-admin 提供了 一个 load 方法,有两个参数,第一个是选项框的字段名,第二个是接口路由,可以用它来实现联动
  2. 我们实现一个接口,接口一个ID,可以返回下级的省市区。给省的Id,就返回该省下的所有市
  3. 页面选项框选择后,会拿到选择的值,并去调用 load 方法指定接口
  4. 拿到接口返回值,去设置到 load 方法指定的字段上,用于充当选项
示例代码
//表单过滤的三级联动代码
$provinces = RegionPlus::query()->where('pid', 1)->pluck('name', 'id');
$form->select('merchant_province_id')->default(0)->value(0)->options($provinces)->load('merchant_city_id', '/api/region')->required()->help('详细地址省ID必填此项');
$form->select('merchant_city_id')
          ->default(0)
          ->value(0)
          ->load('merchant_area_id', '/api/region')
          ->required()
          ->help('详细地址市ID必填此项');
 $form->select('merchant_area_id')->default(0)->value(0)->required()->help('详细地址区ID必填此项');
//列表过滤的三级联动代码
$provinces = RegionPlus::query()->where('pid', 1)->pluck('name', 'id');
 $filter->equal('merchant_province_id', '省')->select($provinces)->load('merchant_city_id', '/api/region')->ignore();
       $filter->equal('merchant_city_id', '市')->select()->load('merchant_area_id', '/api/region')->ignore();
       $filter->equal('merchant_area_id', '区')->select();
//添加路由  Admin/routes.php
$router->get('api/region', 'Api\RegionPlusController@region');
//添加控制器与方法  Admin/Controllers/Api/RegionPlusController.php
   public function region(Request $request)
   {
       $parentId = $request->get('q');

       $response = RegionPlus::query()->where('pid', $parentId)->get([
           'id',
           DB::raw('name as text')
       ]);

       return $this->json($response)->notError();
   }

//响应的结果类似于  [{"id":110100,"text":"北京市"}]
数据表结构
CREATE TABLE `region_pluses` (
  `id` int(10) unsigned NOT NULL DEFAULT '0',
  `name` varchar(50) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT '名称',
  `abbr` varchar(50) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT '缩写',
  `pinyin` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT '拼音',
  `t_name` varchar(50) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT '繁体',
  `pid` int(10) unsigned NOT NULL DEFAULT '0' COMMENT 'pid',
  `type` tinyint(3) unsigned NOT NULL DEFAULT '0' COMMENT '类型',
  `zip` varchar(10) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT '邮编',
  `enabled` tinyint(3) unsigned NOT NULL DEFAULT '0' COMMENT '是否启用',
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  `first_letter` char(1) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT '首字母',
  `merge_id` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '合并ID,即被归属的行政区域ID',
  UNIQUE KEY `region_pluses_id_unique` (`id`) USING BTREE,
  KEY `region_pluses_name_index` (`name`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值