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

时间:2013-12-10 23:40:17

标签: javascript jquery web kendo-ui kendo-multiselect

我目前在使用Kendo UI MultiSelect窗口小部件时遇到问题,无法多次选择一个选项。例如,在下面的图片中,我想在选择 The Dark Knight 之后再次选择 Schindler的列表,但不幸的是MultiSelect小部件的行为更像集合而不是有序列表,即不允许重复选择。实际上是否有正确的方法来实现这一目标?任何解决方法?

kmultiselect-repetitiveselectionfailed

1 个答案:

答案 0 :(得分:5)

这是多选控件的预期行为,并且没有简单的方法可以使用可用的配置选项使其执行所需的操作。可能的解决方法是......

创建自定义多选小部件

这样的东西应该可以工作(请注意,我没有测试过这么多 - 它可以让你添加多个并保持过滤器完好无损):

(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)并绑定select事件以附加到列表(您必须手动创建)。

例如:

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,图像等)。