刷新后的Kendo网格单元重新聚焦
我有一个可选择的、可导航的、可编辑的网格。在单元格中输入值后，必须更改更新单元格下单元格中的值。要显示两个单元格的更新值，我必须刷新网格。当我这样做时，编辑的单元格失去焦点。我找到了一种在保存事件期间重新调整上次编辑的单元格焦点的方法：
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似乎在第二次尝试中返回，因为单元格聚焦不再有效。
有没有人知道为什么this.current()第一次工作，而不是第二次？还有其他方法来调整细胞的聚焦吗？
回答 2
Stack Overflow用户
发布于 2014-04-09 17:10:06
如果没有在演示中看到它，那么很难准确地说出正在发生的事情，所以如果可以的话，我建议创建一个作为演示。我猜想，对refresh的调用是删除当前单元格选择并聚焦第一个单元格，因为网格是可导航的(我不太理解这种行为背后的原理，但很难说它是否是一个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);
}Stack Overflow用户
发布于 2014-06-06 23:55:12
我没有足够的声誉来评论这个答案，但我要感谢拉尔斯·霍普纳的回答。它极大地帮助了我解决Kendo网格令人讨厌的刷新导航问题。
我还想补充一点，对于具有水平滚动条的网格，您的解决方案仍然会导致滚动尽可能地向左移动，同时保持上次编辑的单元格在视图中。为了防止这种不良行为，我做了以下工作：
grid.closeCell();
grid.refresh();
grid.refocusLastEditedCell();在刷新前关闭单元格，保持滚动条的位置，现在一切都很好。希望这能帮助其他人查看你的答案。
https://stackoverflow.com/questions/22709698
复制相似问题
腾讯云开发者
