kendo ui grid excel就像行为一样

Question

有没有办法在ken​​do ui网格上进行数据输入,就像excel一样？

即使用箭头键,只需输入数据而无需按回车键.

我使用的是kendo ui网格的javascript版本.我们的用户具有卓越的背景,因此我们正在尝试简化过渡.

提前致谢

Answer 1

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

这个答案将模仿Excel中的以下内容:

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

这是一个DEMO,解释如下.

Excel导航

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

navigatable: true,
editable: "incell",

自动单元格输入

Excel允许数据编辑而无需按Enter键.通常,Kendo Grid只允许您在按Enter 后开始编辑.只要单元格被聚焦,此代码将允许用户在没有Enter步骤的情况下立即开始键入.在你的网格初始化之后把它绑定,绑定按键事件:

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"那样.然后我以编程方式将单元格设置为编辑模式.

存在一些具有不同数据类型和不同列编辑器的怪癖.我发现numeric数据类型编辑器丢失了keypress值,这就是为什么我必须为它创建一个特殊情况并重新输入关键字符的原因.

下一代小区导航

在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);
    }
});

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

笔记

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