前幾日公司后臺開發(fā)歉铝,使用到select表單聯(lián)動功能盈简。但表單聯(lián)動功能實(shí)現(xiàn)后發(fā)現(xiàn),重新進(jìn)行編輯后太示,聯(lián)動項(xiàng)在編輯時未選擇保存值柠贤,故修改原代碼實(shí)現(xiàn)該功能。
larave-admin中select表單聯(lián)動功能實(shí)現(xiàn)类缤,如下:
實(shí)現(xiàn)代碼如下:
$form->select('province')->options(...)->load('city', '/api/city');
$form->select('city');
其中l(wèi)oad('city', '/api/city');的意思是臼勉,在當(dāng)前select的選項(xiàng)切換之后,會把當(dāng)前選項(xiàng)的值通過參數(shù)q, 調(diào)用接口/api/city餐弱,并把a(bǔ)pi返回的數(shù)據(jù)填充為city選擇的選項(xiàng)宴霸,其中api/api/city返回的數(shù)據(jù)格式必須符合:
控制器action的代碼示例如下:
public function city(Request $request)
{
$provinceId = $request->get('q');
return ChinaArea::city()->where('parent_id', $provinceId)->get(['id', DB::raw('name as text')]);
}
通過調(diào)試發(fā)現(xiàn),默認(rèn)未選中主要是岸裙,頁面初始化時猖败,未調(diào)用聯(lián)動數(shù)據(jù)接口,故只需實(shí)現(xiàn)頁面初始化時調(diào)用聯(lián)動接口即可降允。
以下解決默認(rèn)沒選上問題:
首先我們找到select的js恩闻,路徑:跟目錄/vendor/encore/laravel-admin/src/Form/Field下的Select.php文件,找到下面代碼:
$script = <<<EOT
$(document).on('change', "{$this->getElementClassSelector()}", function () {
var target = $(this).closest('.fields-group').find(".$class");
$.get("$sourceUrl?q="+this.value, function (data) {
target.find("option").remove();
$(target).select2({
data: $.map(data, function (d) {
d.id = d.$idField;
d.text = d.$textField;
return d;
})
}).trigger('change');
});
});
EOT;
然后在'EOT;'前加入如下代碼:
$('{$this->getElementClassSelector()}').trigger('change');