javascript - 剑道网格 : Retaining navigational cell after a datasource sync

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

你现在有这么多的定制，你可能想要扩展网格本身而不是一个一个地替换它的方法。

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

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)。