Kendo Grid：数据源同步后保留导航单元格

Question

这类似于之前的post，我想在用户更改网格中的行时同步我的数据源（就像 Access 保存记录一样）

在上面的帖子中，我展示了当用户按如下方式进入新单元格时如何执行此操作...

function refreshFix1() {
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(); 
      this._lastFocusedUid = $(element).closest("tr").data("uid");

      // Added this For navigation mode
      this._lastNavigationCell = this.tbody.find("tr:last td:last");
    }

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

上面给了我们一个函数，我们可以在同步数据源之后调用（refocusLastEditedCell），看起来效果很好。

我现在想在网格处于 导航 模式时执行相同的操作。按照上面的例子和 doco here ，我添加了以下...

// Call this to go back to a cell in *navigation* mode
kendo.ui.Grid.fn.refocusLastNavigatedCell = function () {
    var self = this;
    if (this._lastNavigationCell) {   
        // try see if calling "async" using setTimeout will help
        setTimeout (function(){
        console.log("going back to navigation cell");
        self.current(this._lastNavigationCell);
        self.table.focus();
    }, 10)
    }
  };

然后我有以下代码在数据源上调用同步...

vm.gridData.sync(); 

if (vm.editMode){
   / Go back to edit cell
  grid.refocusLastEditedCell() 
} else{
   // Go back to navigation  cell
    grid.refocusLastNavigatedCell();
  };    
}

（完整示例here）

不幸的是，我似乎没有回到同一个单元格，它又一次跳到了左上角的单元格。

任何如何让它在这种情况下工作的想法将不胜感激。

提前感谢您的帮助！

Answer 1

您需要使用original code 中所做的行uid 和单元格索引；一旦重新渲染网格，您尝试关注的 <td> 元素将不再存在。所以你可以这样做：

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();
            this._lastFocusedUid = $(element).closest("tr").data("uid");

            // For navigation mode
            var cell = current.call(this, element);
            this._lastNavigationCellIndex = $(cell).index();
            this._lastNavigationCellUid = $(cell).closest("tr").data("uid");
        }

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

并使用它：

kendo.ui.Grid.fn.refocusLastNavigatedCell = function () {
    if (this._lastNavigationCellUid) {
        var row = $(this.tbody).find("tr[data-uid='" + 
                    this._lastNavigationCellUid + "']");
        var cell = $(row).children().eq(this._lastNavigationCellIndex);
        this.current(cell);
    }
};

您现在有很多自定义项，您可能想要扩展网格本身而不是一个一个替换它的方法。

顺便说一句，您可能可以将所有这些都集成到 refresh 方法中，因此您不必显式调用它：

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

        refresh.call(this, e);

        this._refreshing = false;

        if (!this.options.editable) {
            this.refocusLastNavigatedCell();
        } else {
            this.refocusLastEditedCell()
        }
    }
})(kendo.ui.Grid.fn.refresh);

我不明白你为什么要重新聚焦

this.tbody.find("tr:last td:last");

所以我将其更改为 (demo)。