剑道网格:在数据源同步后保留导航单元格

Question

这与上一篇文章类似，在该文章中，当用户更改网格中的行时，我想同步我的数据源（就像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);       
  }
};

上面为我们提供了一个在同步数据源后可以调用的函数（rejectLastEditedCell），看起来效果很好。

现在，我想在网格处于导航模式时执行同样的操作。根据上面的例子和这里的文档，我添加了以下。。。

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

然后，我有以下代码来调用数据源上的sync。。。

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

（此处为完整示例）

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

任何关于如何在这种情况下发挥作用的想法都将不胜感激。

提前感谢您的帮助！

Answer 1

您需要像原始代码中那样使用行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);
    }
};

您现在有这么多自定义，您可能希望扩展网格本身，而不是逐个替换其方法。

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

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

所以我为（演示）更改了它。