Question

我有一个可选择的，可导航和可编辑的网格。在单元格中输入值后，我必须更改更新单元格下单元格中的值。要显示两个单元格的更新值，我必须刷新网格。当我这样做时，编辑的单元格失去焦点。我找到了一种在保存事件期间重新聚焦最后编辑过的单元格的方法：

save: function (e) {
    var focusedCellIndex = this.current()[0].cellIndex;    //gets the cell index of the currently focused cell

    //...some dataItem saving (dataItem.set()) logic...

    this.refresh();    //refreshing the grid instance

    setTimeout(function () {    //refocusing the cell
        return function () {
            var focusedCell = $("#grid tr[data-uid='" + dataItem.uid + "'] td:nth-child(" + (focusedCellIndex + 1) + ")");
            $('#grid').data('kendoGrid').editCell(focusedCell);
        }
    }(), 200);
}

问题是这是第一次有效，但是如果我再次尝试重新编辑同一个单元格，则单元格会失去焦点。当我尝试调试时，似乎this.current()[0].cellIndex在第二次尝试时返回 0 ，并且由于该细胞聚焦不再起作用。

有没有人知道为什么this.current()第一次有效，而不是第二次？有没有其他方法可以重新聚焦细胞？

Answer 1

如果没有在演示中看到它，很难确切地说出发生了什么，所以如果可以的话，我建议创建一个用于说明。我猜测对refresh的调用是删除当前的单元格选择并聚焦第一个单元格，因为网格是可导航的（我不太了解这种行为背后的基本原理，但它＆＃39}很难说它是否是一个bug，因为我们无法阅读Telerik的代码评论。）

可能有效的一种方法是修改current方法以存储当前的单元格索引：

kendo.ui.Grid.fn.refresh = (function(refresh) {
    return function(e) {
        this._refreshing = true;

        refresh.call(this, e);

        this._refreshing = false;
    }
})(kendo.ui.Grid.fn.refresh);

kendo.ui.Grid.fn.current = (function(current) {
    return function(element) {
        // assuming element is td element, i.e. cell selection
        if (!this._refreshing && element) {
            this._lastFocusedCellIndex = $(element).index(); // note this might break with grouping cells etc, see grid.cellIndex() method
            this._lastFocusedUid = $(element).closest("tr").data("uid");
        }

        return current.call(this, element);
    }
})(kendo.ui.Grid.fn.current);

kendo.ui.Grid.fn.refocusLastEditedCell = function () {
    if (this._lastFocusedUid ) {
        var row = $(this.tbody).find("tr[data-uid='" + this._lastFocusedUid + "']");
        var cell = $(row).children().eq(this._lastFocusedCellIndex);
        this.editCell(cell);
    }
};

这样，您应该始终能够在需要时使用grid.refocusLastEditedCell()。

另一个想法：

save: function (e) {
    var focusedCell = this.current();
    var focusedCellIndex = focusedCell.index();    //gets the cell index of the currently focused cell

    //...some dataItem saving (dataItem.set()) logic...

    this.refresh();    //refreshing the grid instance

    // reset current cell..
    this.current(focusedCell);

    setTimeout(function () {    //refocusing the cell
        return function () {
            var focusedCell = $("#grid tr[data-uid='" + dataItem.uid + "'] td:nth-child(" + (focusedCellIndex + 1) + ")");
            $('#grid').data('kendoGrid').editCell(focusedCell);
        }
    }(), 200);
}

Answer 2

我没有足够的声誉对答案发表评论，但我要感谢Lars Hoppner的回答。它帮助我极大地解决了剑道网格令人烦恼的刷新导航问题。

我还想补充一点，对于带有水平滚动条的网格，您的解决方案仍然会使滚动尽可能向左移动，同时保持最后编辑的单元格在视图中。为了防止这种不良行为，我做了以下事情：

grid.closeCell();
grid.refresh();
grid.refocusLastEditedCell();

在刷新之前关闭单元格使滚动条保持原位，现在一切都很好。希望这有助于其他人查看您的答案。

剑道网格细胞刷新后重新聚焦

2 个答案: