javascript - Kendo Grid 如何以编程方式聚焦网格单元格并阻止选择文本

Question

我有一个剑道网格，编辑模式设置为 incell。

以编程方式聚焦特定单元格以强制其进入编辑模式的最优雅方法是什么？

假设我有一个网格，其中第 1 列和第 6 列是可编辑的。一旦用户在第 1 列中完成输入内容，我希望第 6 列文本框自动聚焦并启用编辑，这样用户就不必手动单击同一行的下一个可编辑网格单元。

这就是我现在正在做的事情:

//Focuses the editable cell at given row/column index.
//Closes the previously editing cell
//EX: setGridFocus(SALE_01_DIV_GRID,0,0) --> Focuses SALE_01_DIV_GRID (0,0)
function setGridFocus(gridID, rowIndex, colIndex)
{
    var grid = $('#' + gridID).data('kendoGrid');
    grid.closeCell();

    setTimeout(function(){
        var cell = $('#' + gridID).find('tbody tr:eq('+rowIndex+') td:eq('+colIndex+')');
        grid.editCell(cell);
        var editTextCell = cell.find("input.k-formatted-value");

        editTextCell.focus(function() {
            $(this).select().mouseup(function (e) {
                e.preventDefault();
                $(this).unbind("mouseup");
                e.select();
            });
        });
        cell.find("input[type=text]").select();
        editTextCell.selectall();
    },50); 
}

首先，我使用 setTimeout 来实现看似微不足道的功能，因此这似乎不是理想的方法。

其次，上面的函数只在感觉合适的时候才起作用(从测试来看，只有一半的时间起作用。可能是 setTimeout 函数预期的)。我觉得这与 Kendo Grid 内部调用的事件顺序有关。

第三，我想阻止选择被聚焦的单元格内的文本。 editTextCell.selectall();不适用于此目的。

如有任何指导，我将不胜感激。

Answer 1

这是实现您想要的目标的可靠方法。它仍然使用 setTimeout，因此它可以可靠地聚焦不同的剑道输入 (Docs source for focusing kendo inputs):

function setGridFocus(gridID, rowIndex, colIndex) {
  var grid = $('#' + gridID).data('kendoGrid');
  grid.closeCell();

  var cell = $('#' + gridID).find('tbody tr:eq(' + rowIndex + ') td:eq(' + colIndex + ')');
  grid.editCell(cell);
  var editTextCell = cell.find('input');

  var selectTimeId;

  editTextCell
    .on('focus', function() {
      var input = $(this);
      clearTimeout(selectTimeId); // stop started time out if any

      selectTimeId = setTimeout(function() {
        input.select();
        // To make this work on iOS, too, replace the above line with the following one. Discussed in https://stackoverflow.com/q/3272089
        // input[0].setSelectionRange(0, 9999);
      });
    })
    .blur(function(e) {
      clearTimeout(selectTimeId); // stop started timeout
    });


  editTextCell.focus();
}