Question

我需要在每个选项前面带有复选框的组合框，以选择多个选项。我尝试使用“dropdown：true”，

使用CheckedMultiSelect

当我选择项目时，它显示组合框中的值，选择了2个项目，选择了1个项目等。

如何显示在由分隔符分隔的组合框文本区域中选择的值??

是否必须为checkedMultiSelect更改css或HTML或其他内容？

提前致谢。

Answer 1

关于第二个问题，您必须延长dojox.form.CheckedMultiSelect课程并覆盖_updateSelection和startup方法：

var MyCheckedMultiSelect = declare(CheckedMultiSelect, {

    startup: function() {
        this.inherited(arguments);  
        setTimeout(lang.hitch(this, function() {
            this.dropDownButton.set("label", this.label);            
        }));
    },

    _updateSelection: function() {
        this.inherited(arguments);                
        if(this.dropDown && this.dropDownButton) {
            var label = "";
            array.forEach(this.options, function(option) {
                if(option.selected) {
                    label += (label.length ? ", " : "") + option.label;
                }
            });

            this.dropDownButton.set("label", label.length ? label : this.label);
        }
    }

});

使用MyCheckedMultiSelect代替dojox.form.CheckedMultiSelect：

var checkedMultiSelect = new MyCheckedMultiSelect ({
    dropDown: true,
    multiple: true,
    label: "Select something...",
    store: dataStore
}, "placeholder");

checkedMultiSelect.startup();

再次，我将此添加到jsFiddle：http://jsfiddle.net/phusick/894af/

Answer 2

除了@ Craig的解决方案之外，还有一种方法可以通过CSS添加复选框的外观和感觉。如果检查生成的HTML，则可以看到每行都表示为具有多个表格单元<tr>的表行<td>。所选项目的表格行获取CSS类.dojoxCheckedMultiSelectMenuItemChecked，因此我建议更改始终具有类.dijitMenuItemIconCell的第一个单元格的样式：

td.dijitMenuItemIconCell {
    width: 16px;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url('some-unchecked-image-here.png');
}

tr.dojoxCheckedMultiSelectMenuItemChecked td.dijitMenuItemIconCell {
    background-image: url('some-checked-image-here.png');
}

所以你会得到：

enter image description here

我把它添加到我之前帮助过你的jsFiddle：http://jsfiddle.net/phusick/894af/

Answer 3

CheckedMultiSelect设置为true时，dropDown不提供复选框。它只是允许用户单击以单击要选择的多个项目。

要实现您想要的，请在此处查看我的答案：

Custom dojo Dropdown widget by inheriting _HasDropdown and _AutoCompleterMixin

在MyCustomDropDown中，您需要将复选框和项目列表构建为自定义窗口小部件。我建议查看dojox.form._CheckedMultiSelectMenu和dojox.form._CheckedMultiSelectMenuItem并模仿其中的功能，然后给出不同的ui（带复选框）。

Answer 4

dojox.form.CheckedMultiSelect应该一直显示复选框，此票证可以解决问题。 https://bugs.dojotoolkit.org/ticket/17103

dojo中的MultiSelectCombobox问题

4 个答案: