前几日公司后台开发,使用到select表单联动功能。但表单联动功能实现后发现,重新进行编辑后,联动项在编辑时未选择保存值,故修改原代码实现该功能。
larave-admin中select表单联动功能实现,如下:
实现代码如下:
$form->select('province')->options(...)->load('city', '/api/city');
$form->select('city');
其中load('city', '/api/city');的意思是,在当前select的选项切换之后,会把当前选项的值通过参数q, 调用接口/api/city,并把api返回的数据填充为city选择的选项,其中api/api/city返回的数据格式必须符合:
控制器action的代码示例如下:
public function city(Request $request)
{
$provinceId = $request->get('q');
return ChinaArea::city()->where('parent_id', $provinceId)->get(['id', DB::raw('name as text')]);
}
通过调试发现,默认未选中主要是,页面初始化时,未调用联动数据接口,故只需实现页面初始化时调用联动接口即可。
以下解决默认没选上问题:
首先我们找到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');