Question

我有一个kendo网格，编辑模式设置为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();
}

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

1 个答案: