javascript - 剑道 ui 网格 excel 类行为

Question

有没有办法让 kendo ui 网格上的数据输入表现得像 excel？

即使用箭头键，无需按回车键即可输入数据。

我正在使用 kendo ui grid 的 javascript 版本。我们的用户有excel背景，所以我们正在努力使过渡变得容易。

提前致谢

Answer 1

没有默认方式，但您可以通过向某些关键导航操作添加自定义行为来在一定程度上模拟它。

此答案将模拟 Excel 中的以下内容:

1. Excel 导航 - 网格应该可以通过箭头键导航
2. 自动单元格输入 - 当导航到网格单元格时，输入将自动开始编辑单元格
3. 下一个单元格导航 - 完成单元格编辑后，按回车键将退出单元格，然后如果数据类型相同则导航到下一行对应的单元格(以便用户可以继续输入有关某个单元格的数据)具体数据列)

这是一个DEMO ，解释如下。

Excel 导航

让您的网格可导航，这允许用户像 excel 一样使用箭头键移动到每个单元格。还要确保您的网格的可编辑属性设置为“incell”。这会将网格设置为逐个单元格编辑模式。

navigatable: true,
editable: "incell",

自动单元格输入

Excel 允许在不按 Enter 的情况下编辑数据。通常，Kendo Grid 只允许您在按回车键后开始编辑。只要单元格获得焦点，此代码将允许用户立即开始键入而无需 Enter 步骤。把它放在你的网格初始化之后，绑定(bind)按键事件:

var grid = $("#grid").data("kendoGrid");
grid.table.bind("keypress", function (e) {
    if (e.which !== 0 && e.charCode !== 0 && !e.ctrlKey && !e.metaKey && !e.altKey) {

        //get currently navigated cell, this id follows user's navigation
        var activeCell = $("#grid_active_cell");

        //don't do anything if already editing cell        
        if (activeCell.hasClass("k-edit-cell")) return;

        grid.editCell(activeCell);
        var input = activeCell.find("input");

        //number datatype editor loses key press character when entering edit
        if (input.last().attr('data-type')==='number') {
            input.val(String.fromCharCode(e.keyCode | e.charCode));
        } else {
            input.val("");
        }
    }
});

基本上，我只是确保按下的键是文本字符，而不是诸如“ALT”或“ESC”之类的东西。然后我以编程方式将单元格设置为编辑模式。

不同的数据类型和不同的列编辑器存在一些怪癖。我发现数字数据类型编辑器丢失了按键值，这就是为什么我必须为它做一个特例并重新输入按键字符。

下一个单元格导航

在 Excel 中，当您对数据编辑感到满意并按 Enter 键后，导航将转到其正下方的单元格。这允许用户连续向下查看项目列表并编辑特定的信息列。要使用 Kendo Grid 执行此操作，请添加以下代码:

//Kendo "Enter" key input is captured through this binding
$("#grid table").on("keydown", "tr", function (e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 13) { //If key is ENTER
        //find index of the td element
        var tdIndex = $(e.target).closest('td').index();

        //get the next row's cell
        var nextRow = $(e.target).closest('tr').next();
        var nextRowCell = $(nextRow).find('td:eq(' + tdIndex + ')');

        //focus the next cell on a different context
        setTimeout(function () {
            var grid = $("#grid").data("kendoGrid");
            grid.current(nextRowCell);
        }, 0);
    }
});

之所以这是不同的函数绑定(bind)，是因为 Kendo Grid 在表对象上有一个默认的 keydown 绑定(bind)，所以我们必须在事件冒泡之前将我们的自定义功能添加到 tr 元素。

注意事项

• 这是一个基线演示，更复杂的事情很可能会破坏此代码，例如自定义数据编辑器、网格分组等...在这种情况下，您将不得不添加更多代码来处理所有必要的情况。
• 按键事件用于自动单元格输入，因为它在字符代码确定方面更可靠。
• Keypress 事件可能无法在移动设备上运行，在这种情况下，keyup 可能是更好的替代事件绑定(bind)。
• 如果您在我的演示中使用鼠标编辑网格，它仍然可以像普通的 Kendo Grids 一样工作，但您错过了我演示的要点。