3

我们使用 Kendo Grid 在会计应用程序中进行数据输入。我们需要网格的行为类似于 QuickBooks。具体来说，用户应该能够：

  1. 单元格之间的制表符
  2. 在一行中的最后一个单元格中自动前进到下一行。
  3. 在最后一行的最后一个单元格中自动添加一个新行。

但是，我们很难实现这种行为。在将新行添加到网格底部之前，不会保存最后一行的最后一个单元格。但是，如果我们添加一个虚假的列作为最后一列，则可以实现正确的行为，但是您必须通过一个额外的、不必要的列进行制表符，这是不可接受的。用户需要能够输入并自动添加新行。这是代码：

函数创建网格（）{

var grid: any = $("#" + target).kendoGrid({
    dataSource: gridDs,
    edit: gridCellEdit,
    editable: {
        createAt: 'bottom'
    },
    filterable: true,
    sortable: true,
    navigatable: true,
    resizable: true,
    reorderable: true,
    scrollable: { virtual: true },
    columns: gridColumns,
    dataBound: monitorKeyboard
});

}

功能 gridCellEdit(e) {

var input = e.container.find("input");

input.focus(function (e) {
    input.select();
});

input.focus();

}

功能监视器键盘（e）{

var grid = $('#' + e.sender.wrapper[0].id).data("kendoGrid");

$(grid.tbody).on("keydown", "td", function (e) {

    // Monitor tabbing through columns
    if (e.keyCode == 9) {

        var row: any = $(this).closest("tr");
        var rowIndex: number = $("tr", grid.tbody).index(row);
        var colIndex: number = $("td", row).index(this);
        var count: number = grid.dataSource.total();
        var lastColIndex = row[0].cells.length - 1;

        if (rowIndex == count - 1 && colIndex == lastColIndex) {

            e.stopImmediatePropagation();
            e.preventDefault();
            grid.addRow();
            grid.saveRow();

        }
    }
});

}

4

0 回答 0