Handsontable-developer Guide-cell Editor

Cell editing

Cell Editor

Renderer: Display data; Editor: change data; renderer is represented by a function; the latter has a series of operations that need to be represented by class;

Editormanager

Handsontable ()--init ()--editormanage instantiation

1. Select Editor
The value of editor in columns can be alias or class, and each table has its own editor instance;2, Prepare3, display
Trigger:enter, double-click, F2; call BeginEditing4, close
Will call finishediting

Custom Editor

Enchance Existing Editor

var PasswordEditor = Handsontable.editors.TextEditor.prototype.extend();
PasswordEditor.prototype.createElements = function(){
Handsontable.editors.TextEditor.prototype.createElements.apply(this, arguments);
this.TEXTAREA = document.createElement(‘input‘);
this.TEXTAREA.setAttribute(‘type‘, ‘password‘);
this.TEXTAREA.className = ‘handsontableInput‘;
this.textareaStyle = this.TEXTAREA.style;
this.textareaStyle.width = 0;
this.textareaStyle.height = 0;

Handsontable.Dom.empty(this.TEXTAREA_PARENT);
this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);
};

Baseeditor

It is an abstract class

Common method

Baseeditor the method that has been implemented. If you want to create a complex editor that requires the override common method, you should call the native methods.

Handsontable.editors.BaseEditor.prototype.prepare.apply (this, arguments);

prepare (row, col, prop, td, cellProperties);
beginEditing (initialValue); call open () internally
finishEditing (revertToOriginal, ctrlDown, callback); internally calls saveValue (), discardEditor ()
discardEditor (validationResult);
saveValue (val, ctrlDown);
isOpend ()
extend ()

Weditor Specific method

These methods are not implemented in BaseEditor, but are implemented in other editors (TextEditor).
init () Usage: Create the html structure of the editor
geValue ()
setValue (newValue)
open ()
close () hide the editor: this.editorDiv.style.display = ‘none’;
focus () selects another cell, but the previous value is not verified: this.editorInput.focus ();

Editor's Common Properties

Row, col, prop (when the data source is an array of objects, representing the property name), TD, Cellproperties ' object '

Extends an existing editor

Passwordeditor (input type= ' password ') extends TextEditor (textarea),

var PasswordEditor = Handsontable.editors.TextEditor.prototype.extend();

PasswordEditor.prototype.createElements = function () {
  // Call the original createElements method
  Handsontable.editors.TextEditor.prototype.createElements.apply(this, arguments);

  // Create password input and update relevant properties
  this.TEXTAREA = document.createElement(‘input‘);
  this.TEXTAREA.setAttribute(‘type‘, ‘password‘);
  this.TEXTAREA.className = ‘handsontableInput‘;
  this.textareaStyle = this.TEXTAREA.style;
  this.textareaStyle.width = 0;
  this.textareaStyle.height = 0;

  // Replace textarea with password input
  Handsontable.Dom.empty(this.TEXTAREA_PARENT);
  this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);
};

Create Editor Form Scratch

1. Create new editor

var selecteditor = Handsontable.editors.BaseEditor.prototype.extend ();

2. Select

Init () is called (table) when creating editor, prepare ()--cell does not show editor--and open () has a time interval; open ()--css

SelectEditor.prototype.init = function() {
  // Create detached node, add CSS class and make sure its not visible
  this.select = document.createElement(‘SELECT‘);
  Handsontable.Dom.addClass(this.select, ‘htSelectEditor‘);
  this.select.style.display = ‘none‘;

  // Attach node to DOM, by appending it to the container holding the table
  this.instance.rootElement.appendChild(this.select);
};

3. Option

Want to use this

var hot = new Handsontable(document.getElementById(‘container‘), {
  data: someData,
  columns: [
    {
      editor: SelectEditor,
      selectOptions: [‘option1‘, ‘option2‘, ‘option3‘]
    }
  ]
});

It should be handled in that function Option?init (): Using the Selecteditor column, there will be the same option, certainly not; open (): The editor can be opened as soon as possible, and if the option value is too much time-consuming ; So it should be placed in prepare ().

When you override prepare (), you need to call the native method of Baseeditor, because BaseEditor.prototype.prepare () sets a number of properties that are called by other methods.

4. Implement a specific method

SelectEditor.prototype.getValue = function () {
     return this.select.value;
};
SelectEditor.prototype.setValue = function (value) {
     this.seletct.value = value;
};
SelectEditor.prototype.open = function () {
     //as follows
};
SelectEditor.prototype.close = function (value) {
     //as follows
};

5. Override Behavior

Listener Program

// Use the up and down arrows to select a value and enter to confirm the selected value. Enter saves the selected value. Finally, EditorManager decides when to close the editor
// EditorManager has a beforeKeyDown function. You can call stopImmediatePropagation () to cancel the default behavior.
// The operation to override the default behavior is only for the specified editor, so register the listener in open and remove the listener in close to avoid affecting the behavior of other editor
var onBeforeKeyDown = function (event) {
    // this is Handsontable.Core, not the current editor
    var instance = this;
    // To get the current editor, you need to use getActiveEditor (). Returns the editor that most recently called prepare ()
    var editor = instance.getActiveEditor ();
    var selectedIndex = editor.select.selectedIndex;

    Handsontable.Dom.enableImmediatePropagation (event);
    switch (event.keyCode) {
        case Handsontable.helper.keyCode.ARROW_UP:
            var previousOption = editor.select.options [selectedIndex-1];
            if (previousOption) {
                editor.select.value = previousOption.value;
            }
            event.stopImmediatePropagation ();
            event.preventDefault ();
            break;
        case Handsontable.helper.keyCode.ARROW_DOWN:
            var nextOption = editor.select.options [selectedIndex + 1];
            if (nextOption) {
                editor.select.value = nextOption.value;
            }
            event.stopImmediatePropagation ();
            event.preventDefault ();
            break;
    }
};

Register listener: Include CSS transformations

// The implementation of open is based on the assumption that the option processing function is placed in prepare ()
// Before displaying the list, set the height and minimum width to match the corresponding cells. This step is optional, but if you do not do this, the editor will set the size according to the browser, which is not easy
// Put select on the cell
SelectEditor.prototype.open = function () {
var width = Handsontable.Dom.outerWidth (this.TD);
var height = Handsontable.Dom.outerHeight (this.TD);
var rootOffset = Handsontable.Dom.offset (this.instance.rootElement);
var tdOffset = Handsontable.Dom.offset (this.TD);
var editorSection = this.checkEditorSection ();
var cssTransformOffset;

// After opening the editor, you need to make css adjustments
// cssTransformOffset and resetCssTransform
switch (editorSection) {
    case ‘top’: cssTransformOffset = Handsontable.Dom.getCssTransform (this.instance.view.wt.wtScrollbars.vertical.clone.wtTable.holder.parentNode);
    break;
    case ‘left’: cssTransformOffset = Handsontable.Dom.getCssTransform (this.instance.view.wt.wtScrollbars.horizontal.clone.wtTable.holder.parentNode);
    break;
    case ‘corner’: cssTransformOffset = Handsontable.Dom.getCssTransform (this.instance.view.wt.wtScrollbars.corner.clone.wtTable.holder.parentNode);
    break;
}

var selectStyle = this.select.style;
if (cssTransformOffset && cssTransformOffset! == -1) {
    selectStyle [cssTransformOffset [0]] = cssTransformOffset [1];
} else {
    Handsontable.Dom.resetCssTransform (this.select);
}

this.select.style.height = height + ‘px’;
this.select.style.minWidth = width + ‘px’;
this.select.style.top = tdOffset.top-rootOffset.top + ‘px’;
this.select.style.margin = ‘0’;

this.select.style.display = ‘‘;

// register listener
this.instance.addHook (‘beforeKeyDown’, onBeforeKeyDown);

};
SelectEditor.prototype.close = function () {
this.select.style.display = ‘none’;

// remove listener
this.instance.removeHook (‘beforeKeyDown’, onBeforeKeyDown);
};

Check Listener

SelectEditor.protoype.checkEditorSection = function(){
if(this.row < this.instance.getSetting().fixedRowsTop){
    if(this.row < this.instance.getSetting().fixedColumnsLet){
        return ‘corner‘;
    }else{
        return ‘top‘;
    }
}else{
    if(this.row < this.instance.getSetting().fixedColumnsLeft){
        return ‘left‘;
    }
}
};

6. Register Editor

// If the alias is set to select, if there is a selection before, it will be rewritten. If you want to rewrite, you can do this; otherwise, use another alias, such as an account with the prefix github, which is not easy Conflict.
Handsontable.editors.registerEditor (‘sfp12.selcet’, SelectEditor);

Default aliases and Classes

Editor Alias	Editor class
Text	Handsontable.editors.TextEditor
Numeric	Handsontable.editors.NumericEditor
Date	Handsontable.editors.DateEditor
AutoComplete	Handsontable.eitors.AutocompleteEditor
CheckBox	Handsontable.editors.CheckboxEditors
Hansontable	Handsontable.editors.HandsontableEditor

Packaging for custom Editors:

// placed in an anonymous function that executes immediately
(function (Handsontable) {
   var CustomEditor = Handsontable.editors.BaseEditor.prototype.extend ();

   // ... rest of the editor code

   // Put editor in dedicated namespace
   // As a property of a global variable (variable)
   Handsontable.editors.CustomEditor = CustomEditor;

   // Register alias
// alias
   Handsontable.editors.registerEditor (‘theBestEditor’, CustomEditor);

}) (Handsontable);

Use

// Extend custom editor
var AnotherEditor = Handsontable.editors.CustomEditor.prototype.extend ()
// General use
var hot = new Handsontable (document.getElementById (‘container’), {
   data: someData,
   columns: [
// two ways
     {
       editor: Handsontable.editors.CustomEditor
     },
     {
       type: ‘my.select’
     }
   ]
}); 

Handsontable-developer Guide-cell Editor