[Dcat 扩展] dcat-distpicker 省市区三级联动选择组件拓展

dcat-distpicker 是一个中国省市区三级联动选择组件,基于 Distpicker 实现的 dcat-admin 扩展,用来将 Distpicker 集成进 dcat-admin的表单中。
如果此插件给你带来的帮助,麻烦给我一个 star。当然如果你在使用过程中发现地区不完整的情况,欢迎随时反馈给我。

最近版本特色

  • 修复一对多下的选择器显示异常 bug
  • 新增支持多层级选择配置
  • 更新 distpicker.js 到 2.0.7
  • 新增支持地区名称回显
  • 兼容 laravel-wherehasin
  • 新增支持筛选时选择框显示 tooltip

截图

image-20200628150204971

安装

首先

# jqhph/dcat-admin 1.x
composer require "super-eggs/dcat-distpicker:^1.0"

# jqhph/dcat-admin 2.x
composer require "super-eggs/dcat-distpicker:^2.0"

然后: (dcat-admin 2.x 无需执行!!!)

php artisan admin:import dcat-distpicker

开启扩展

后台开启

  • dcat-admin 2.x

使用

数据表单中使用

比如在表中有三个字段province_id, city_id, district_id, 在form表单中使用它:

$form->distpicker(['province_id', 'city_id', 'district_id']);

设置默认值

$form->distpicker([
    'province_id' => '省份',
    'city_id' => '市',
    'district_id' => '区'
], '地域选择')->default([
    'province' => 130000,
    'city'     => 130200,
    'district' => 130203,
]);

可以设置每个字段的placeholder

// 省、市、区
$form->distpicker([
    'province_id' => '省',
    'city_id'     => '市',
    'district_id' => '区'
]);
// 省、市 (Available in v2.1.0+)
$form->distpicker([
    'province_id' => '省',
    'city_id'     => '市',
]);
// 只显示省 (Available in v2.1.0+)
$form->distpicker([
    'province_id' => '省',
]);

设置label

$form->distpicker(['province_id', 'city_id', 'district_id'], '请选择区域');

设置自动选择, 可以设置1,2,3 表示自动选择到第几级

$form->distpicker(['province_id', 'city_id', 'district_id'])->autoselect(1);

表格筛选中使用

$filter->distpicker('province_id', 'city_id', 'district_id', '地域选择');

筛选同样支持多级选择:

// 省、市 (Available in v2.1.0+)
$filter->distpicker('province_id', 'city_id','', '地域选择');
//or
$filter->distpicker('province_id', 'city_id');
// 只显示省 (Available in v2.1.0+)
$filter->distpicker('province_id','','', '地域选择');
//or
$filter->distpicker('province_id');

数据表格中使用

省市区名称回显 (Available in v2.1.0+):

$grid->column('province_id')->distpicker();
$grid->column('city_id')->distpicker();
$grid->column('district_id')->distpicker();

并且提供了一个全局可用的辅助函数:

use SuperEggs\DcatDistpicker\DcatDistpickerHelper;

DcatDistpickerHelper::getAreaName($code); // return string

地区编码数据

Distpicker 所使用的地域编码是基于国家统计局发布的数据, 数据字典为china_area.json文件.

鸣谢

由衷感谢以下开源软件、框架等(包括但不限于)

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 25

是我的php版本问题:从 PHP 7.4.0 开始,属性定义可以包含 类型声明 , 但 callable 除外。我把类型声明去掉就好了

1年前 评论
SuperEggs (楼主) 1年前

请问如何应用在API当中

1年前 评论
SuperEggs (楼主) 1年前

还是laraveladmin好用这个装个插件半天不行

1年前 评论

您好,我在筛选里用$filter->distpicker('province_id', 'city_id', 'district_id', '地域选择');会提示以下异常 ErrorException Declaration of SuperEggs\DcatDistpicker\Filter\DistpickerFilter::buildRelationQuery(...$columns) should be compatible with Dcat\Admin\Grid\Filter\AbstractFilter::buildRelationQuery($relColumn, ...$params) 麻烦您看下什么原因?

1年前 评论
SuperEggs (楼主) 1年前
SuperEggs (楼主) 1年前
sky8652 (作者) 1年前
sky8652 (作者) 1年前
sky8652 (作者) 1年前
guoke0826 1年前
SuperEggs (楼主) 1年前

哈喽 大佬 遇到两个问题 请问修复了吗 1.筛选搜索之后 省市区没有默认选中当前搜索的省市区 2.筛选点击重置之后 省市区还在搜索项中

1年前 评论
SuperEggs (楼主) 1年前

这个数据库里全是数字,怎么展示文字进入数据库啊

1年前 评论

换另一个包吧 这个包有bug :joy:

1年前 评论
SuperEggs (楼主) 1年前
guoke0826 (作者) 1年前

china_area.json 找不到这个文件呢? 可否发一下链接, 这里都搜不到哦

1年前 评论
guoke0826 1年前

找不到 DcatDistpickerHelper::getAreaName() 这个方法呀?

11个月前 评论
cm7788 5个月前

我想要存储的字段数据直接时中文的地区 怎么写

8个月前 评论
朱先森的梦呓 (作者) 8个月前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!