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

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

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

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

只繫結一個資料

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

首先我們建立posts表,裡面包含cate_id欄位，用於儲存分類id，然後建立分類表category, 包含欄位id,name,pid,level,分別儲存分類id，分類名，上級分類id,分類的級別（頂級是 1 ，第二級是 2 以此類推）。

建立Category模型，用於管理分類表，在類中，我們需要引用RelationModel這個trait並且設定類的成員變數parentKey等於pid

namespace DemoApp;
use VoyagerRelationSelector\Traits\RelationModel;
class Category extends Model
{
 use RelationModel;
 protected $parentKey = 'pid';
}

開啟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

建立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框架，檢視文件

每級資料都做繫結的情況

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

建立地址表address, 包含欄位province,city,zone,address,分別為省市區以及詳細地址，建立地域表region,包含欄位id,name,parent_id,level分別用於儲存區域編號，區域名，對應的上級id，區域級別（省市區分別是1，2，3）
建立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';
}

開啟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

建立address表對應的BREAD，開啟BREAD編輯頁，找到zone欄位，將其輸入型別選擇為Relation Selector,在可選細項中，新增如下記錄
```
{
 "relation":["province","city"],
 "resources_url":"/region/__pid__"
}
```

relation 放置存放省，市資訊的欄位
resources_url 放置第二部中建立的 ajax 請求路由，其中__pid__是一個佔位符

在BREAD編輯頁中，把province,city欄位的輸入型別設定為Relation Selector Parent，主要作用是，在新增和編輯頁，不使用預設的修改方式修改這兩個欄位

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

省市區選擇器

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

在安裝本外掛的時候，會建立一個區域表region包含了id,name,parent_id,level等多個欄位
在外掛中，我們定義了一個路由/vrs/region/__pid__,我們可以使用這個進行層級查詢
建立address表對應的 BREAD ，開啟 BREAD 編輯頁，找到zone欄位，將其輸入型別選擇為Region Selector,在可選細項中，新增如下記錄
```
{
 "relation":["province","city"],
}
```

relation 放置存放省，市資訊的欄位

在BREAD編輯頁中，把province,city欄位的輸入型別設定為Relation Selector Parent，主要作用是，在新增和編輯頁，不使用預設的修改方式修改這兩個欄位

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

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

大多數知識，不需要我們記住，只需要認知即可

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

只繫結一個資料

每級資料都做繫結的情況

省市區選擇器

相關文章