javascript - Kendo 网格 - 如何通过 UP/DOWN 键盘键使整行选择可导航？

Question

鼠标单击选定行后，我有以下带有彩色行的网格。

如果用户使用键盘上的向上和向下行，我想添加相同的功能，在事件中，键盘实际选择的行将被传递，就像下面的更改函数一样。

请问我如何使用 Kendo 做到这一点？

change: function (e) {
              var selectedRows = this.select();
              var selectedDataItems = [];
              for (var i = 0; i < selectedRows.length; i++) {
                  var dataItem = this.dataItem(selectedRows[i]);
                  selectedDataItems.push(dataItem);
              }
              console.log(selectedDataItems);
              $scope.setDetailToScope(selectedDataItems, "row_select");
          },

编辑:

我也试过这个功能:

$(function () {
    var arrows = [38, 40];
    var grid = $("#grid").data("kendoGrid");
    grid.table.on("keydown", function (e) {
        if (arrows.indexOf(e.keyCode) >= 0) {
            setTimeout(function () {
                grid.select($("#rowSelection_active_cell").closest("tr"));
            });
        }
    })
});

向上/向下按钮被识别，但我无法获取下一个选定行并为其着色。

Answer 1

您可以简单地启用 Kendo navigatable 功能:

$("#grid").kendoGrid({
    ...
    selectable: "row",
    navigatable: true,
    ...
});

类似于:http://demos.telerik.com/kendo-ui/grid/keyboard-navigation

编辑:要在没有重影突出显示的情况下导航，您应该手动处理:

  var data = $("#grid").data('kendoGrid');
  var arrows = [38, 40];
  data.table.on("keydown", function (e) {
    if (arrows.indexOf(e.keyCode) >= 0) {
        setTimeout(function () {
            data.select($("#grid_active_cell").closest("tr"));
        },1);
    }
  }

https://jsfiddle.net/bzm5dwvo/