javascript - 在 Laravel 中使用 AJAX 填充 Selectize optgroup 列
问题描述
我正在尝试使用Selectize
. 在Laravel
,根据Ajax
请求,我JSON
从 Controller 返回一个对象,如下所示:
$attribs = AttributeClass::find($request->id)->attributes;
$attributes = array();
foreach($attribs as $attrib){
$options = array();
foreach($attrib->options as $opt){
$options[] = array(
'id' => $opt->id,
'name' => $opt->name
);
}
$attributes[] = array(
'id' => $attrib->id,
'name' => $attrib->name,
'options' => $options
);
}
return response()->json([
'attributes' => $attributes
]);
JSON
输出看起来像这样:
"{"attributes":[
{"id":15,
"name":"Color",
"options":[
{"id":63,"name":"Red"},
{"id":64,"name":"Black"},
{"id":65,"name":"White"},
]},
{"id":16,
"name":"Material",
"options":[
{"id":69,"name":"Leather"},
{"id":70,"name":"Rubber"},
{"id":71,"name":"Suede"},
]},
{"id":17,
"name":"Size",
"options":[
{"id":73,"name":"40"},
{"id":74,"name":"41"},
{"id":75,"name":"42"},
{"id":76,"name":"43"},
{"id":77,"name":"44"}
]}
]}"
在 DOM 中,我有一个div
id 的容器#attributesContainer
。我正在select
内部创建一个新元素div
并尝试在 ajax 响应中populate and selectize
提及,如下所示:select
$('#attributesContainer').empty().append(
'<label class="col-md-3 control-label">Attributes</label>'+
'<div class="col-md-9">'+
'<select id="inputAttributes" name="inputAttributes" multiple></select>'+
'<span class="help-block">Choose product attributes</span>'+
'</div>'
);
var optGroups = [];
var options = [];
$.each(data.attributes, function(index, attribute) {
var newElement = {};
newElement['id'] = attribute.id;
newElement['name'] = attribute.name;
optGroups.push(newElement);
$.each(attribute.options, function(index, option){
var newElement = {};
newElement['id'] = option.id;
newElement['attribute'] = attribute.name;
newElement['name'] = option.name;
options.push(newElement);
});
});
$('#inputAttributes').selectize({
options: options,
optgroups: optGroups,
labelField: 'name',
valueField: 'id',
optgroupField: 'attribute',
optgroupLabelField: 'name',
optgroupValueField: 'id',
searchField: ['name'],
plugins: ['optgroup_columns', 'remove_button']
});
预期的行为是多列,例如 Selectize docs 中的此示例:
我在这里错过了什么或做错了什么?请指导。
PS:我还想限制用户从每一列中只选择一个值。API 支持吗?有什么功能可以做到这一点吗?我怎样才能实现这种行为Selectize.js
?
解决方案
出于某种原因,提供 optgroups 和选项selectize
对我不起作用。通过首先在 DOM 中创建一个select
元素并通过所有 optgroups 和选项填充它来解决它。
我通过替换来做到这一点:
var optGroups = [];
var options = [];
$.each(data.attributes, function(index, attribute) {
var newElement = {};
newElement['id'] = attribute.id;
newElement['name'] = attribute.name;
optGroups.push(newElement);
$.each(attribute.options, function(index, option){
var newElement = {};
newElement['id'] = option.id;
newElement['attribute'] = attribute.name;
newElement['name'] = option.name;
options.push(newElement);
});
});
$('#inputAttributes').selectize({
options: options,
optgroups: optGroups,
labelField: 'name',
valueField: 'id',
optgroupField: 'attribute',
optgroupLabelField: 'name',
optgroupValueField: 'id',
searchField: ['name'],
plugins: ['optgroup_columns', 'remove_button']
});
和:
$.each(data.attributes, function(i, optgroups) {
$.each(optgroups, function(groupName, options) {
var $optgroup = $("<optgroup>", {
label: groupName
});
$optgroup.appendTo('#inputAttributes');
$.each(options, function(j, option) {
var $option = $("<option>", {
text: option.name,
value: option.id
});
$option.appendTo($optgroup);
});
});
});
$('#inputAttributes').selectize({
sortField: 'text',
plugins: ['optgroup_columns', 'remove_button']
});
仍在寻找我的第二个问题,即如何限制用户从每个 optgroup 列中仅选择一个选项?
编辑:
我已经像这样从每个 optgroup 中实现了单个选项选择,此代码还显示带有所选选项的 optgroup 名称,例如Size > Small
or Color > Black
,希望对某人有所帮助。这是完整的代码:
var vals = {};
$.each(data.attributes, function(i, optgroups) {
$.each(optgroups, function(groupName, options) {
var $optgroup = $("<optgroup>", {
label: groupName
});
$optgroup.appendTo('#inputAttributes');
$.each(options, function(j, option) {
var $option = $("<option>", {
text: option.name,
value: option.id,
});
vals[option.id] = groupName;
$option.appendTo($optgroup);
});
});
});
var $select = $('#inputAttributes').selectize({
sortField: 'text',
placeholder: 'Select attributes...',
lockOptgroupOrder: true,
plugins: ['optgroup_columns', 'remove_button']
});
var selectize = $select[0].selectize;
var selections = [];
selectize.on('item_add', function(value, $item){
var group = vals[value];
var v_text = $item.text();
v_text = v_text.substring(v_text.indexOf(">") + 1);
v_text = group+' > '+v_text.substring(0, v_text.length-1);
$item.html(v_text+
'<a href="javascript:void(0)" class="remove" tabindex="-1" title="Remove">×</a>'
);
// $item.text(group+' > '+$item.text());
if(selections.find(x => x.group === group)){
var v_index = selections.findIndex(x => x.group === group);
var v = selections[v_index].value;
selectize.removeItem(v, silent = true);
}
var newSelection = {};
newSelection['group'] = group;
newSelection['value'] = value;
selections.push(newSelection);
});
selectize.on('item_remove', function(value, $item){
var v_index = selections.findIndex(x => x.value === value);
selections.splice(v_index, 1);
});
PS:如果有更好的解决方案,请指导。
推荐阅读
- python - Windows 和 Linux 上的差异 Python:datetime.datetime 对象没有属性 total_seconds
- git - macOS Big Sur 更新后,Visual Studio Code 不起作用
- notepad++ - 如何在记事本++中替换所有行尾?
- json - 所选行的 Sharepoint 自定义行格式
- javascript - React Hooks setState 正在更新,但 View 没有
- apache - 您能否通过专用连接为 Kubernetes 活性端点提供服务,这些连接在常规连接池耗尽时可用?
- sql - SSIS - 如何在 Where 语句中使用 ID 的平面文件?
- javascript - 这个表达式在js中可能吗?
- android - Lambda 与 Android API 21-24 的兼容性
- winapi - 检测工具栏按钮上的 WM_LBUTTONDBLCLK