javascript - 使用 Tab 键进行剑道多选

Question

我正在尝试实现一项功能，通过服务器过滤在剑道的多选控件中选择一个项目。当用户在所选项目上按 Tab 时。这是我的 kepdown 事件代码:

if (e.keyCode === 9) {
       var selectedItem = multiSelect.current();

       if (selectedItem) {

            var selectedIndex = selectedItem.data("idx");

            if (selectedIndex >= 0) {

                var currentValue = multiSelect.value().slice();    
                var dataitems = multiSelect.dataSource.view();
                var selectedDataItem = dataitems[selectedIndex];

                multiSelect.dataSource.filter({});
                currentValue.push(selectedDataItem.relatedId);
                multiSelect.value(currentValue);

                multiSelect.trigger("change");
            }
         }
      }

但只要我在同一数据 View 中搜索，它就可以正常工作，也就是说，我选择两个以 Cloud 开头的值，然后选择一个以 App 开头的值，然后 kendo 将删除前两个以​​ Cloud 开头的值，并且控件将包含仅最后选择一个值。

我调试了kendo的代码，发现kendo的函数_index存在问题，因为它在dataSource.view中找到了值

我已在 http://dojo.telerik.com/OtAvi 重新创建了该问题

Answer 1

您的代码不起作用，因为您在数据源中将 serverFiltering 设置为 true:

dataSource: {
    type: "odata",
    serverFiltering: true,
    transport: {
        read: {
            url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
        }
    }
},

由于数据是在服务器上过滤的，因此调用 multiSelect.dataSource.filter({}); 仅清除已过滤的数据。话虽如此，当您调用 multiSelect.value(currentValue); 时，只能选择当前已过滤数据源中的值。这导致选择仅包含当前数据 View 中的项目。

除非您有充分的理由不这样做，否则最简单的解决方法是将 serverFiltering 设置为 false。