Voyager 級聯選擇器外掛，可以方便的維護省市區資訊

tu6ge-php發表於2020-02-24

github地址
本外掛為Voyager建立了三個表單域，您可以根據自己的需要，選用

  • Region Selector (地區選擇器)
  • Relation Selector (級聯選擇器)
  • Relation Selector Parent (級聯選擇器對應的父級)

通常級聯選擇器與目標資料進行關聯，有兩種方式，一種是一級一級選擇，把最後一級的結果跟資料進行繫結，另外一個種是把選擇的每個級別，都關聯到目標資料中，這一塊省市區選擇器用的比較多，接下來我們將以此為例說明這兩種選擇器的用法。

只繫結一個資料

在這裡，假設我們需要做一個部落格系統，有兩級分類，文章需要關聯到第二級分類上

  1. 首先我們建立posts表,裡面包含cate_id欄位，用於儲存分類id，然後建立分類表category, 包含欄位id,name,pid,level,分別儲存分類id，分類名，上級分類id,分類的級別（頂級是 1 ，第二級是 2 以此類推）。
  2. 建立Category模型，用於管理分類表，在類中，我們需要引用RelationModel這個trait並且設定類的成員變數parentKey等於pid
    namespace DemoApp;
use VoyagerRelationSelector\Traits\RelationModel;
class Category extends Model
{
 use RelationModel;
 protected $parentKey = 'pid';
}
  3. 開啟route/web.php或者你喜歡的其他路由配置檔案，新增如下記錄用來定義一個 ajax 介面，
use DemoApp\Category;

Route::get('category/{parent_id?}', function($parent_id=0){
    return Category::where('pid', $parent_id)->get()->map(function($res){
        return [
            'value' => $res->id,
            'label' => $res->name,
            'leaf' => $res->pid > 0,
        ];
    });
})->where([
    'parent_id' => '[0-9]+'
]);

返回值需要有如下固定格式：

  • value 放置分類的 id
  • label 放置分類顯示名
  • leaf 如果最終的分類，返回true否則返回false,本例中:第一級分類返回false,第二級分類返回true
  1. 建立post表對應的BREAD，開啟BREAD編輯頁，找到cate_id欄位，將其輸入型別選擇為Relation Selector,在可選細項中，新增如下記錄
    {
 "model":"\\DemoApp\\Category",
 "resources_url":"/category/__pid__",
 "level":2
}
  • model 放置第一步中建立的模型類
  • resources_url 放置第二部中建立的ajax請求路由，其中__pid__是一個佔位符
  • level 用於設定級聯選擇器的級別

至此，級聯選擇器的設定就完成了，開啟post的新增頁面，即可看到一個類似於圖片中樣式的級聯選擇器

前端我們使用的國內知名的element-ui框架，檢視文件

每級資料都做繫結的情況

在這裡，假設我們需要做一個收穫地址表

  1. 建立地址表address, 包含欄位province,city,zone,address,分別為省市區以及詳細地址，建立地域表region,包含欄位id,name,parent_id,level分別用於儲存區域編號，區域名，對應的上級id，區域級別（省市區分別是1，2，3）
  2. 建立Region模型，用於管理區域表，在類中，我們需要引用RelationModel這個trait並且設定類的成員變數parentKey等於parent_id
namespace DemoApp;

use Illuminate\Database\Eloquent\Model;
use VoyagerRelationSelector\Traits\RelationModel;

class Region extends Model
{
    use RelationModel;

    protected $table = 'regions';

    protected $parentKey = 'parent_id';
}
  1. 開啟route/web.php或者你喜歡的其他路由配置檔案，新增如下記錄用來定義一個ajax介面:
    use DemoApp\Region;
Route::get('region/{parent_id?}', function($parent_id=0){
 return Region::where('parent_id', $parent_id)->get()->map(function($res){
     return [
         'value' => $res->id,
         'label' => $res->name,
         'leaf' => $res->level>=3,
     ];
 });
})->where([
 'parent_id' => '[0-9]+'
]);
    返回值需要有如下固定格式：
  • value 放置分類的id
  • label 放置分類顯示名
  • leaf 如果最終的分類，返回true否則返回false,本例中:第一級分類返回false,第二級分類返回true
  1. 建立address表對應的BREAD，開啟BREAD編輯頁，找到zone欄位，將其輸入型別選擇為Relation Selector,在可選細項中，新增如下記錄
    {
 "relation":["province","city"],
 "resources_url":"/region/__pid__"
}
  • relation 放置存放省，市資訊的欄位
  • resources_url 放置第二部中建立的 ajax 請求路由，其中__pid__是一個佔位符
  1. 在BREAD編輯頁中，把province,city欄位的輸入型別設定為Relation Selector Parent，主要作用是，在新增和編輯頁，不使用預設的修改方式修改這兩個欄位

至此，級聯選擇器的設定就完成了，開啟address的新增頁面，即可看到一個圖片中的級聯選擇器

省市區選擇器

由於省市區選擇器很常用，除了我們上面那種設定方式外，我們對該型別做了封裝

  1. 在安裝本外掛的時候，會建立一個區域表region包含了id,name,parent_id,level等多個欄位
  2. 在外掛中，我們定義了一個路由/vrs/region/__pid__,我們可以使用這個進行層級查詢
  3. 建立address表對應的 BREAD ，開啟 BREAD 編輯頁，找到zone欄位，將其輸入型別選擇為Region Selector,在可選細項中，新增如下記錄
    {
 "relation":["province","city"],
}
  • relation 放置存放省，市資訊的欄位
  1. 在BREAD編輯頁中，把province,city欄位的輸入型別設定為Relation Selector Parent，主要作用是，在新增和編輯頁，不使用預設的修改方式修改這兩個欄位

至此，省市區選擇器的設定就完成了，開啟address的新增頁面，即可看到一個圖片中的級聯選擇器

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章