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

Question

当SlickGrid设置为:

enableAddRow: false,
enableCellNavigation: true,
autoEdit: true

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

editor: null,
focusable: false,
selectable: false

当试图通过跳出最后一行中倒数第二列的标签来跳出SlickGrid时,我希望将焦点移动到网格外的下一个可聚焦元素,但事实并非如此.

请参阅此示例,并尝试从最后一行跳出网格.我希望焦点转移到网格下面的文本框,但它没有,而是焦点丢失,而网格中的活动单元格没有重置.

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

一个解决方法是制作最后一列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();
    }
  }
});

UPDATE

通过更改插件中的代码来修复它.问题即将来临,我认为它是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());
      }
    }