tst*_*cin 4 javascript jquery kendo-ui kendo-grid
我有一个可选择的,可导航和可编辑的网格.在单元格中输入值后,我必须更改更新单元格下单元格中的值.要显示两个单元格的更新值,我必须刷新网格.当我这样做时,编辑的单元格失去焦点.我找到了一种在保存事件期间重新聚焦最后编辑的单元格的方法:
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);
}
Run Code Online (Sandbox Code Playgroud)
问题是这是第一次使用,但是如果我再次尝试重新编辑同一个单元格,则单元格会失去焦点.当我尝试调试时,似乎在第二次尝试中this.current()[0].cellIndex返回0,并且由于该单元格聚焦不再起作用.
有没有人知道为什么this.current()第一次工作,而不是第二次?有没有其他方法重新聚焦细胞?
如果没有在演示中看到它,很难确切地说出发生了什么,所以如果可以,我建议创建一个用于说明.我猜这个调用refresh是删除当前的单元格选择并聚焦第一个单元格,因为网格是可导航的(我不太明白这种行为背后的基本原理,但很难说它是否是一个错误,因为我们不' t阅读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);
}
};
Run Code Online (Sandbox Code Playgroud)
这样,您应该始终能够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);
}
Run Code Online (Sandbox Code Playgroud)