SlickGrid - Editable Grid with Controls Visible by

问题:

The SlickGrid supports editors for a cell that can be configured to be displayed on click or double click. However I don't see an option where, the editor is VISIBLE by default for all cells without having to click/double click on the cell.

• Is it possible to support editors in slick grid where the editors are "init" by default for all cells?
• Is there a known workaround?

Thank you.

回答1:

No. The grid is designed to have one cell editable at a time.

回答2:

I know it's not exactly what you asked for, but I thought I'd add the code below in case anyone finds it useful. It's a semi-workaround and it at least lets the user navigate around the grid and start typing in the cell to edit, without having to "initialise" the edit first by pressing Enter or double-clicking the cell; a bit like editing an MS Excel sheet.

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();
      }
    }
  }
}

回答3:

Below is what I ended up with (improved version njr101's answer) to make this work. I've added a check for CTRL key so it doesn't break the copy paste plugin I use on the grid.

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();
        }
    }
}

};

and dont forget to subscribe:

slickGrid.onKeyDown.subscribe();

回答4:

Update to use editor define in row metadata and not in column definition.

In my case, one row of two contains in cell 1 text editor and one row of two contains nothing.

    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();
                }
            }
        }
    });