Tom-Select（或 Selectize.js）选项组的远程数据

Question

我正在尝试使用远程数据进行 tom-select (https://tom-select.js .org/examples/optgroups/）。我不知道如何使用远程数据配置选项组。我选择加载远程数据，如下所示：

"optgroup": "1 Materials | 1.2 Gravel",
"value": 65,
"label": "1.2.1 Tanks"

从文档中我得到的印象是您设置了 optgroupField: 'optgroup' 并且选项组将自动设置。我需要将 optgroups 数组添加到我的 JSON 数据中吗？我似乎在任何地方都找不到带有选项组的远程数据的任何示例。

tom-select 共享 Selectize.js 中的大部分代码，因此我也对其进行交叉标记。

Answer 1

我在 selectize 世界中找到了一个解决方案：

https://github.com /selectize/selectize.js/issues/151#issuecomment-111056161

我添加了一个组 ID：

"optgroup_id": 13,
"optgroup": "1 Materials | 1.1 Pipe, valves & fittings",
"value": 5,
"label": "1.1.1 Line Pipe"

重置组字段：optgroupField： 'optgroup_id' 然后在 load 中的 json 回调之后添加了这个：

json.items.forEach((item) => {
this.addOptionGroup(item['optgroup_id'], { label: item['optgroup'] } );
  });
this.refreshItems()

我还在尝试添加第二个 optgroups json 数组，其中仅包含组以避免循环通过所有选项。

我希望有一个更好的答案 - 对此将保持开放。希望这对其他人有帮助。

Answer 2

使用 TomSelect，您可以将远程数据格式化为选项组，如下所示：

new TomSelect('#id', {
  // these are the defaults
  optgroupField: 'optgroup',
  optgroupValueField: 'value',
  optgroupLabelField: 'label',
  // specify your option groups
  optgroups: [
    {value: 'foo', label: 'Foo Group'},
    {value: 'bar', label: 'Bar Group'},
  ],
});

然后，您的数据应包含每个项目的 optgroup 属性。

[
  {
    id: 1,
    name: "Result",
    optgroup: "foo",
  }
]