Question

我正在尝试覆盖Kendo列表视图的默认键盘导航。

默认情况下，Kendo键盘导航会区分所选项目和当前项目。键盘导航将当前项目与所选项目分开移动。所选项目将突出显示，当前项目具有边框。

我希望所选项目与当前项目一起移动。

我已经尝试禁用Kendo keydown处理程序并将其替换为我自己的处理程序。

$('#listView').off('keydown.kendoListView');
$('#listView').on('keydown.kendoListView', function (e) {
    var listView = $('#listView').data('kendoListView');
    switch (e.which) {
        case 40:
            var newSelection = listView.select().next();
            listView.select(newSelection);
            listView.current(newSelection);
            break;
        case 38:
            var newSelection = listView.select().prev();
            listView.select(newSelection);
            listView.current(newSelection);
            break;
        }
});

这会成功匹配当前和所选项目，但滚动不会排列。按下显示按多个元素滚动列表视图。因此，当前项目最终会在视图之外。

我尝试过的一个例子是： http://jsfiddle.net/blutter/ULLu8/19/

有没有办法修复滚动？或者更改Kendo Listview键盘导航的更好方法是什么？

Answer 1

keydown处理程序需要返回false以防止额外滚动。

所以处理程序是：

  $('#listView').on('keydown.kendoListView', function (e) {
      var listView = $('#listView').data('kendoListView');
      switch (e.which) {
          case 40:
              var newSelection = listView.select().next();
              listView.select(newSelection);
              listView.current(newSelection);
              break;
          case 38:
              var newSelection = listView.select().prev();
              listView.select(newSelection);
              listView.current(newSelection);
              break;
      }
      return false;
  });

请参阅http://jsfiddle.net/blutter/ULLu8/23/了解工作小提琴

Answer 2

很好的解决方案。您可以使用listview selectable: multiple增强代码，使用更多键盘按钮单击事件 - HOME, END, PageDown, PageUp，并使用自动滚动模式进行长列表视图。

var div = document.getElementById(lv1);   
var line_height = 26;
$('#lv1').off('keydown.kendoListView');
$('#lv1').on('keydown.kendoListView', function(e) {
    var listView = $('#lv1').data('kendoListView');
    switch (e.which) {
      case 33: //page up
        var newSelection = listView.select().index() > 10 ?
          listView.items()[listView.select().index() - 10] :
          listView.items()[0];
        if (listView.options.selectable == 'multiple')
          listView.clearSelection();

        listView.select(newSelection);
        listView.current(newSelection);

        div.scrollTop = 0;
        break;
      case 34: //page down
        var newSelection = listView.items().length - listView.select().index() > 10 ?
          listView.items()[listView.select().index() + 10] :
          listView.items()[listView.items().length - 1];
        if (listView.options.selectable == 'multiple')
          listView.clearSelection();

        listView.select(newSelection);
        listView.current(newSelection);

        div.scrollTop = listView.items().length * line_height;
        break;
      case 35: // END button
        listView.clearSelection();
        var newSelection = listView.items()[listView.items().length - 1];
        listView.select(newSelection);
        listView.current(newSelection);

        div.scrollTop = listView.items().length * line_height;
        break;
      case 36: // HOME button
        listView.clearSelection();
        var newSelection = listView.items()[0];
        listView.select(newSelection);
        listView.current(newSelection);

        div.scrollTop = 0;
        break;
      case 38: //arrow up
        var newSelection = listView.select().prev();
        if (listView.options.selectable == 'multiple')
          listView.clearSelection();
        listView.select(newSelection);
        listView.current(newSelection);
        break;
      case 40: // arrow down
        var newSelection = listView.select().next();
        if (listView.options.selectable == 'multiple')
          listView.clearSelection();
        listView.select(newSelection);
        listView.current(newSelection);
        break;
    }
    return false;
  });

检查我的例子： http://jsfiddle.net/snir/ffan5v86/7/

如何覆盖Kendo UI列表视图的默认键盘导航

2 个答案: