2

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

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

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

是否应该为checkedMultiSelect更改css或H​​TML或其他东西？

提前致谢。

4

4 回答 4

10

至于你的第二个问题，你必须扩展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/

于 2012-05-16T07:31:28.720 回答
4

除了@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');
}

所以你会得到：

在此处输入图像描述

我将此添加到我之前帮助您的 jsFiddle 中：http: //jsfiddle.net/phusick/894af/

于 2012-05-16T06:52:34.073 回答
0

设置为 trueCheckedMultiSelect时不提供复选框。dropDown它只是允许用户单击以单击多个项目进行选择。

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

通过继承 _HasDropdown 和 _AutoCompleterMixin 自定义 dojo Dropdown 小部件

在MyCustomDropDown中，您需要将复选框和项目列表构建为自定义小部件。我建议查看dojox.form._CheckedMultiSelectMenu并dojox.form._CheckedMultiSelectMenuItem模仿那里的功能，并提供不同的用户界面（带有复选框）。

于 2012-05-15T18:14:36.763 回答
0

dojox.form.CheckedMultiSelect 应该已经显示了复选框，这张票解决了这个问题。https://bugs.dojotoolkit.org/ticket/17103

于 2013-07-09T15:00:31.093 回答