Kendo UI Web - MultiSelect：多次选择一个选项

Question

我目前在使用 Kendo UI MultiSelect 小部件时遇到问题，因为我不止一次地选择了一个选项。例如，在下图中，我想在选择 The Dark Knight 后再次选择 Schindler's List，但不幸的是，MultiSelect 小部件的行为更像是一个集合而不是有序列表，即不允许重复选择。实际上是否有适当的方法来实现这一目标？有什么解决方法吗？

Answer 1

这是多选控件的预期行为，没有简单的方法可以使用可用的配置选项让它按照您的意愿行事。可能的解决方法是...

创建自定义多选小部件

这样的东西应该可以工作（请注意，我没有测试这么多 - 它可以让您添加倍数并保持过滤器完好无损）：

(function ($) {
    var ui = kendo.ui,
        MultiSelect = ui.MultiSelect;

    var originalRender = MultiSelect.fn._render;
    var originalSelected = MultiSelect.fn._selected;

    var CustomMultiSelect = MultiSelect.extend({
        init: function (element, options) {
            var that = this;

            MultiSelect.fn.init.call(that, element, options);
        },

        options: {
            name: 'CustomMultiSelect'
        },

        _select: function (li) {
            var that = this,
                values = that._values,
                dataItem,
                idx;

            if (!that._allowSelection()) {
                return;
            }

            if (!isNaN(li)) {
                idx = li;
            } else {
                idx = li.data("idx");
            }

            that.element[0].children[idx].selected = true;

            dataItem = that.dataSource.view()[idx];

            that.tagList.append(that.tagTemplate(dataItem));
            that._dataItems.push(dataItem);
            values.push(that._dataValue(dataItem));

            that.currentTag(null);
            that._placeholder();

            if (that._state === "filter") {
                that._state = "accept";
            }
            console.log(this.dataSource.view());
        },        

        _render: function (data) {
            // swapping out this._selected keeps filtering functional
            this._selected = dummy;  
            return originalRender.call(this, data);
            this._selected = originalSelected;
        }
    });

    function dummy() { return null; }

    ui.plugin(CustomMultiSelect);
})(jQuery);

演示here.

使用下拉列表

使用一个简单的下拉列表（或 ComboBox）并将选择事件绑定到您的列表（您必须手动创建）。

例如：

var mySelectedList = [];
$("#dropdownlist").kendoDropDownList({
    select: function (e) {
        var item = e.item;
        var text = item.text();
        // store your selected item in the list
        mySelectedList.push({
            text: text
        });
        // update the displayed list
        $("#myOrderedList").append("<li>" + text + "</li>");
    }
});

然后您可以绑定对这些列表元素的点击以从列表中删除元素。这样做的缺点是它需要更多的工作才能让它看起来“漂亮”（你必须创建和组合你自己的 HTML、css、图像等）。