Question

当SlickGrid设置为：

时

enableAddRow: false,
enableCellNavigation: true,
autoEdit: true

并且SlickGrid中的最后一列配置为：

editor: null,
focusable: false,
selectable: false

当尝试通过跳出最后一行中倒数第二列的标签来跳出SlickGrid时，我希望焦点移动到网格外的下一个可聚焦元素，但它没有。

See this example，并尝试从最后一行跳出网格。我希望焦点转移到网格下面的文本框，但它没有，而是焦点丢失，而网格中的活动单元格没有重置。

有没有办法解决这个问题？为了确保在从不可编辑的不可聚焦单元格后面的可编辑单元格中跳出时，该焦点是否移出网格？

解决方法是制作最后一列focusable: true，但这不是一个选项，因为它会破坏用户体验，迫使用户在到达可编辑单元格之前切换到不可编辑的单元格。

Answer 1

如果适合您，可以尝试以下。

yourGrid.onKeyDown.subscribe(function(event) {
  if (event.keyCode === 9 && event.shiftKey === false) { // check its only tab not shift tab
    if (yourGrid.getActiveCell().cell === lastCol) { // check if the current cell is the last editable column 
      $("#b").trigger('focus'); // this or below line should work for focus, "b" is your text input
      document.getElementById("b").focus(); // either this or above line
      event.stopImmediatePropagation();
    }
  }
});

<强>更新

通过更改插件中的代码来修复它。问题即将来临，我认为它是Slickgrid中的一个错误。在下面的功能更改后，您的示例正在我的本地工作。请更换以下功能代码，如果这对您有用，请告诉我。

function setActiveCellInternal(newCell, opt_editMode) {
      var lastActiveCell = null;
      var lastActiveRow = null;
      if (activeCellNode !== null) {
        makeActiveCellNormal();
        $(activeCellNode).removeClass("active");
        if (rowsCache[activeRow]) {
          $(rowsCache[activeRow].rowNode).removeClass("active");
        }
        var lastActiveCell = getCellFromNode(activeCellNode); // my added
        lastActiveRow = activeRow;
      }

      var activeCellChanged = (activeCellNode !== newCell);


      activeCellNode = newCell;

      if (activeCellNode != null) {
          //alert('1-3')
        activeRow = getRowFromNode(activeCellNode.parentNode);
        activeCell = activePosX = getCellFromNode(activeCellNode);

        if (opt_editMode == null) {
          opt_editMode = (activeRow == getDataLength()) || options.autoEdit;
        }

        $(activeCellNode).addClass("active");
        $(rowsCache[activeRow].rowNode).addClass("active");
        //alert(options.editable +' - '+ opt_editMode);
        if (options.editable && opt_editMode && isCellPotentiallyEditable(activeRow, activeCell) && ((lastActiveCell !== activeCell || lastActiveRow !== activeRow) ) ) { // not sure if need acheck on row also
          clearTimeout(h_editorLoader);

          if (options.asyncEditorLoading) {
            h_editorLoader = setTimeout(function () {
              makeActiveCellEditable();
            }, options.asyncEditorLoadDelay);
          } else {
            makeActiveCellEditable();
          }
          //alert('1-4')
        }
      } else {
        activeRow = activeCell = null;
        //alert('1-5')
      }

      if (activeCellChanged) {
          //alert('1-6')
        trigger(self.onActiveCellChanged, getActiveCell());
      }
    }

Answer 2

请参阅以下链接。 https://github.com/mleibman/SlickGrid/issues/104

由于您无法跳出最后一个单元格，因此您可以在单击保存更改时尝试提交更改

if（Slick.GlobalEditorLock.isActive（）＆amp;＆amp; ！Slick.GlobalEditorLock.commitCurrentEdit（））return;

这会起作用吗？

Answer 3

您可以尝试使用slick.grid.js文件中的以下代码替换gotoRight函数并尝试。

function gotoRight(row, cell, posX) {
  if (cell >= columns.length) {
    return null;
  }
  do {
    cell += getColspan(row, cell);
  }
  while (cell < columns.length && !canCellBeActive(row, cell));
  if(cell == columns.length && !canCellBeActive(row, cell)) {
    setActiveCell(row,cell-1)
  }
  if (cell < columns.length) {
    return {
      "row": row,
      "cell": cell,
      "posX": cell
    };
  }
  return null;
}

当从最后一个可编辑的单元格中跳出时，SlickGrid不会将焦点从网格移开

3 个答案: