从左到右处理这些并在剑道网格上输入键？答案

【问题标题】：Handle these up left right down and enter keys on kendo grid?从左到右处理这些并在剑道网格上输入键？
【发布时间】：2015-06-01 17:40:41
【问题描述】：

我使用剑道网格

我需要重写键盘事件来修改网格导航的行为。如果事实上当用户按下键盘上的向上或向下键时，我想用焦点更改选定的行（而不仅仅是现在的焦点）。

这是我的网格和我的脚本：

<div id="my-grid">
    <div class="widget" id="grid" kendo-grid
        data-navigatable="true"
        data-scrollable='{"virtual":"true"}'
        ...
    </div>
</div>

<script type="text/javascript">
    $("#my-grid").keypress(function () {
        console.log("Handler for .keypress() called.");
    });
</script>

该脚本适用于除剑道网格中已使用的键之外的所有键。当我按左上右下输入空格键时，不会执行 console.log。

您能解释一下为什么以及如何使用剑道网格处理这些特定键吗？谢谢。

【问题讨论】：

标签： javascript kendo-ui kendo-grid

【解决方案1】：

将您的事件附加到 Grid 的 tbody 元素。

  $('#my-grid').data().kendoGrid.tbody.on('keydown',function(){alert('foo')})

【讨论】：

在剑道版本 v2014.2.926 上，我不得不使用“kendoGrid.table”而不是“kendoGrid.tbody”

【解决方案2】：

我做了一个工作示例，所以在剑道网格批量编辑模式下，当用户在剑道列的可编辑文本框中时，用户单击向上/向下箭头在行之间向上/向下移动并选择相应的行：

<code>

            $("#LatestLinesGrid").on("keydown", "#FinalShip", function (e) {

                var arrows = [38, 40]; // Down and Up arrow keys
                var key = e.keyCode;

                if (arrows.indexOf(key) >= 0) {
                    //alert('arrow' + key);
                    e.preventDefault();
                    debugger;

                    var grid = $("#LatestLinesGrid").data("kendoGrid");

                    var row = $(this).closest("tr");
                    //get current row index
                    var rowIdx = $("tr", grid.tbody).index(row);

                    // to check first row and proceed further else exit - index start from 0 (first row)
                    // 38 - Up key, 40 - Down key
                    if (key == 38 && rowIdx == 0) {
                        return false;
                    }

                    //get total number of records in grid
                    var count = grid.dataSource.total();

                    // to check last row and proceed further else exit - index start from 0 (first row)
                    if (key == 40 && rowIdx == (count-1)) {
                        return false;
                    }

                    this.blur();
                    row.removeClass('k-state-selected');

                    row.trigger("change");

                    if (key == 40) {
                        var nextCell = $(this).closest("tr").next("tr[role='row']").find("td").eq(10);
                        $(this).closest('tr').next().addClass('k-state-selected');
                    }
                    else if (key == 38) {
                        var nextCell = $(this).closest("tr").prev("tr[role='row']").find("td").eq(10);
                        $(this).closest('tr').prev().addClass('k-state-selected');
                    }

                    var id = grid.dataItem(grid.select());

                    grid.closeCell();
                    grid.editCell(nextCell);

                    //alert(id.PlanID);
                    LatestLine_PreSelect();
                }
            });

【讨论】：