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和cell索引;一旦网格被重新渲染，您尝试聚焦的<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）。

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

1 个答案: