dojo 如何添加optgroup do dijit.form.Select或其他控件类型

mmvthczy  于 2022-12-16  发布在  Dojo
关注(0)|答案(1)|浏览(190)

我需要在dijit/dojo小部件中创建一个“category”分区,可以是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();
});
sr4lhrrt

sr4lhrrt1#

就我所知,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(MIT许可证)。
SelectOptgroup是Dojo的一个样式化的、可搜索的下拉选择框,它包括选项分组(类似于html元素with)。
A demo is visible here .
用法示例:

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');

替代解决方案:http://vafada.github.io/chosen-dojo/

相关问题