Question

我正在努力使我的Kendo UI Grid仅可用于键盘。我有一个布尔列的突出问题。我配置了网格，以便他们可以从一个字段切换到下一个字段并继续编辑网格中的项目。我正在使用kendoMobileSwitch为布尔值提供一个漂亮的接口（该页面必须同时适用于移动和桌面）。我创建了一个keydown监听器，我正在使用它进行跳转，我想在空格键被击中时切换（似乎是切换开关的逻辑方式），但我似乎无法弄清楚如何以编程方式拨动开关。

这是一个小提琴：http://jsfiddle.net/omnius/j42mfb9y/

Kendo UI网格的一列是一个布尔列，定义如下：

{
    field: element.Field,
    title: element.Title,
    width: 50,
    attributes: { class: "editable-cell" },
    template: "<span>#= " + element.Field + " ? 'Yes' : 'No' #</span>",
    editor: (container, options) =>
    {
        $("<input class='YesNoSwitch' data-role='switch' data-bind='checked: " + element.Field + "'/>")
        .appendTo(container)
        .kendoMobileSwitch({ onLabel: "Yes", offLabel: "No" });
    },
}

我在网格上有一个键盘监听器：

$("#grid").on("keydown", onGridKeydown);

听众看起来像这样：

function onGridKeydown(e)
{
    // if the user hits a tab, skip any fields that should not be edited.
    // Note that this function currently fails if the last column on the last row
    // is editable.
    if (e.keyCode === kendo.keys.TAB)
    {
        var grid = $(this).closest("[data-role=grid]").data("kendoGrid");
        var current = grid.current();
        if (!current.hasClass("editable-cell"))
        {
            var nextCell = current.nextAll(".editable-cell");
            if (!nextCell[0]) // End of a row, jump to the next row, first editable field
            {
                nextCell = current.parent().next().children(".editable-cell:first");
                if (nextCell.length === 0) // End of the table, jump to the first row, first editable field
                {
                    nextCell = current.parent().parent().children("tr:first").children(".editable-cell:first");
                }
            }

            grid.current(nextCell);
            grid.editCell(nextCell[0]);
        }
    }

    if (e.keyCode === kendo.keys.SPACEBAR)
    {
        var grid = $(this).closest("[data-role=grid]").data("kendoGrid");
        var switchChild = $(this).children(".YesNoSwitch:first");
        if (switchChild != null)
        {
            // What do I put here?  Do I have the right element at all?
        }
    }
};

提前感谢任何建议。

Answer 1

当你在你的小提琴中发表评论时，你应该使用当前选择器和代码：

if (e.keyCode === kendo.keys.SPACEBAR)
{
    var grid = $(this).closest("[data-role=grid]").data("kendoGrid");
    var current = grid.current();

    var sw = current.find(".YesNoSwitch:first").data("kendoMobileSwitch");
    sw.toggle();

}

使用键盘更改网格

1 个答案: