Coder Social home page Coder Social logo

picker's Introduction

dcat-distpicker

此地址三级联动修改是在 picker的基础上,修复了部分城市没有区镇的bug 是一个**省市区三级联动选择组件,这个包是基于 Distpickerdcat-admin 扩展,用来将 Distpicker 集成进 dcat-admin的表单中。如果此插件给你带来的帮助,麻烦给我一个 star。如果在使用过程中发现地区不完整的情况,欢迎随时反馈给我。

推荐环境

  • php >= 7.4
  • laravel >= v8.0.0
  • dcat-admin >= v2.2.0

截图

image-20200628150204971

安装

首先

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

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

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

php artisan admin:import dcat-distpicker

开启扩展

后台开启

  • dcat-admin 1.x image-20200628150337687
  • dcat-admin 2.x image-20201201230850804

使用

数据表单中使用

比如在表中有三个字段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 luochuan\DcatDistpicker\DcatDistpickerHelper;

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

地区编码数据

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

鸣谢

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

License

licensed under The MIT License (MIT).

picker's People

Watchers

luochuan avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.