我需要在 dijit/dojo 小部件中创建一个“类别”划分,可以是 dijit.form.Select
或其他类型。
视觉效果应该类似于(使用 optgroup 时):
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
我的代码:
require(["dijit/form/Select", "dojo/_base/window", "dojo/domReady!"], function(Select, win){
new Select({
name: "select2",
options: [
{ label: "Volvo", value: "volvo" },
{ label: "Saab", value: "saab", selected: true },
{ label: "Mercedes", value: "mercedes" },
{ label: "Audi", value: "audi" }
]
}).placeAt(win.body()).startup();
});
最佳答案
据我所知optgroup
dijit 不应直接支持它。
但是您可以在属性 label
中添加 HTML 标记来实现视觉上类似的效果。 .
使用 <i>
的示例标签,使小部件中的条目变为斜体(您可以添加您真正喜欢的内容,甚至是图像并使用 CSS 对其进行样式设置):
require(["dijit/form/Select", "dojo/_base/window", "dojo/domReady!"], function(Select, win){
new Select({
name: "select2",
options: [
{ label: "<i>Swedish Cars</i>", value: "" },
{ label: "Volvo", value: "volvo" },
{ label: "Saab", value: "saab", selected: true },
{ label: "<i>German Cars</i>", value: "" },
{ label: "Mercedes", value: "mercedes" },
{ label: "Audi", value: "audi" }
]
}).placeAt(win.body()).startup();
});
<小时/>
编辑:
为了为我的一个项目找到此问题的解决方案,我创建了一个专用的新组件 dijit-select-optgroup (麻省理工学院许可证)。
SelectOptgroup is a styleable, searchable drop down select box for Dojo which includes grouping of options (similar to html element with ).
使用示例:
var instance = new SelectOptgroup({
options: [
{
label: 'Optgroup item',
value: '',
optgroup: true // mark menu item as optgroup
},
{
label: 'Option item',
value: 'option '// mark menu item as option
},
{
label: '', // empty strings mark menu item as separator
value: ''
},
{
label: '<div class="SelectOptgroup__nested"><span class="select__icon">Icon Text</span></div>', // html allowed in menu item
value: 'grunt'
}
]
}, 'domId');
<小时/>
关于javascript - 如何添加 optgroup do dijit.form.Select 或其他小部件类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43784623/