SlickGrid - 默认情况下带有可见控件的可编辑网格答案

【问题标题】：SlickGrid - Editable Grid with Controls Visible by defaultSlickGrid - 默认情况下带有可见控件的可编辑网格
【发布时间】：2012-01-24 00:58:41
【问题描述】：

SlickGrid 支持可配置为在单击或双击时显示的单元格的编辑器。但是我没有看到一个选项，默认情况下，编辑器对所有单元格都是可见的，而无需单击/双击单元格。

是否可以在编辑器所在的光滑网格中支持编辑器所有单元格默认为“init”？
是否有已知的解决方法？

谢谢。

【问题讨论】：

标签： slickgrid

【解决方案1】：

我知道这并不完全符合您的要求，但我想我会在下面添加代码，以防有人发现它有用。这是一种半解决方法，它至少可以让用户在网格中导航并开始在单元格中输入进行编辑，而不必先通过按 Enter 或双击单元格来“初始化”编辑；有点像编辑 MS Excel 工作表。

myGrid.onKeyDown.subscribe(function (e, args) {
  var keyCode = $.ui.keyCode,
      col,
      activeCell = this.getActiveCell();

  /////////////////////////////////////////////////////////////////////
  // Allow instant editing like MS Excel (without presisng enter first
  // to go into edit mode)
  if (activeCell) {
    col = activeCell.cell;

    // Only for editable fields and not if edit is already in progress
    if (this.getColumns()[col].editor && !this.getCellEditor()) {
      // Ignore keys that should not activate edit mode
      if ($.inArray(e.keyCode, [keyCode.LEFT, keyCode.RIGHT, keyCode.UP,
                               keyCode.DOWN, keyCode.PAGE_UP, keyCode.PAGE_DOWN,
                               keyCode.SHIFT, keyCode.CONTROL, keyCode.CAPS_LOCK,
                               keyCode.HOME, keyCode.END, keyCode.INSERT,
                               keyCode.TAB, keyCode.ENTER]) === -1) {
        this.editActiveCell();
      }
    }
  }
}

【讨论】：

嗨，Njr，不完全是我们想要的，但是是的，这很有趣。谢谢你分享这个。我们也许可以在其他项目中很好地利用它。

【解决方案2】：

没有。网格设计为一次可编辑一个单元格。

【讨论】：

感谢 Tin 的回复...我目前正在尝试一种将格式化程序模拟为编辑器的解决方案 - 比需要的复杂一点，但我想它应该可以解决问题。
只要确保你没有将任何事件监听器直接附加到由 SlickGrid 生成的 DOM 或以任何方式在外部修改它。 SlickGrid 在您滚动时销毁并重新创建行节点。使用网格提供的事件或侦听容器（即使用事件委托）。
当然感谢 Tin，我们实际上是通过艰难的方式学到了一些……因为我们需要将事件与一些 DOM 节点相关联。我们可能不得不为此执行一些抱歉的解决方法。我们在 Formatter 的返回值中打开了 DOM Support 的功能请求，我相信它会在 GitHib 网站上回复您：D 我不确定该建议是否 100% 可能，但我们已提出票证（功能请求）。票务：github.com/mleibman/SlickGrid/issues/269

【解决方案3】：

以下是我最终完成的（改进版本 njr101 的答案）以完成这项工作。我添加了对 CTRL 键的检查，因此它不会破坏我在网格上使用的复制粘贴插件。

function (e) {
var keyCode = $.ui.keyCode,
    col,
    activeCell = this.getActiveCell(),
    activeCellNode = this.getActiveCellNode();

var isInEditMode = $(activeCellNode).hasClass("editable");

if (activeCell && !isInEditMode) {
    col = activeCell.cell;

    if (this.getColumns()[col].editor  && !e.ctrlKey) {
        if ($.inArray(e.keyCode, [keyCode.LEFT, keyCode.RIGHT, keyCode.UP,
            keyCode.DOWN, keyCode.PAGE_UP, keyCode.PAGE_DOWN,
            keyCode.SHIFT, keyCode.CONTROL, keyCode.CAPS_LOCK,
            keyCode.HOME, keyCode.END, keyCode.INSERT,
            keyCode.TAB, keyCode.ENTER]) === -1) {

            this.editActiveCell();
        }
    }
}

};

别忘了订阅：

slickGrid.onKeyDown.subscribe();

【讨论】：

【解决方案4】：

更新为在行元数据中使用编辑器定义，而不是在列定义中。

在我的例子中，一排二包含在单元格 1 文本编辑器中，一排二不包含任何内容。

    grid.onKeyDown.subscribe( function ( e, args ) {
        var keyCode = $.ui.keyCode;
        var activeCell = this.getActiveCell();

        if( activeCell ) {

            // get metadata
            var columnDefinition = grid.getColumns()[ activeCell.cell ];
            var rowMetadata = dataView.getItemMetadata && dataView.getItemMetadata( activeCell.row );
            var rowColMetadata = rowMetadata && rowMetadata.columns;
            rowColMetadata = rowColMetadata && ( rowColMetadata[ columnDefinition.id ] || rowColMetadata[ activeCell.cell ] ); 

            if ( rowColMetadata && rowColMetadata.editor && !this.getCellEditor() ) {

                if( $.inArray( e.keyCode, [keyCode.LEFT, keyCode.RIGHT, keyCode.UP, keyCode.DOWN, keyCode.PAGE_UP, keyCode.PAGE_DOWN,
                                       keyCode.SHIFT, keyCode.CONTROL, keyCode.CAPS_LOCK, keyCode.HOME, keyCode.END, keyCode.INSERT,
                                       keyCode.TAB, keyCode.ENTER]) === -1 ) {
                    this.editActiveCell();
                }
            }
        }
    });

【讨论】：