[Dcat 擴充套件] dcat-distpicker 省市區三級聯動選擇元件擴充

SuperEggs發表於2022-06-12
套件元件

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 協議》，轉載必須註明作者和本文連結

相關文章