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

时间:2012-01-24 00:58:42

标签: slickgrid

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

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

谢谢。

4 个答案:

答案 0 :(得分:2)

我知道这并不是你要求的,但我想我会在下面添加代码以防万一有人发现它有用。这是一个半解决方案,它至少让用户在网格中导航并开始在单元格中进行编辑,而不必通过按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();
      }
    }
  }
}

答案 1 :(得分:1)

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

答案 2 :(得分:1)

以下是我最终的结果(改进版本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();

答案 3 :(得分:0)

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

在我的例子中,一行两行包含在单元格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();
                }
            }
        }
    });