8

我有一个编辑模式设置为 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(); 不适用于此目的。

我会很感激任何指导。

4

1 回答 1

1

这是实现您想要的可靠方法。它仍然使用setTimeout,因此它可以可靠地聚焦不同的剑道输入(用于聚焦剑道输入的文档源):

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();
}
于 2019-01-14T13:30:18.643 回答