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