handsontable-developer guide-cell editor
单元格编辑
cell editor
renderer:展示数据；editor：改变数据；renderer用一个函数表示；后者有一系列的操作，需要用class来表示；
EditorManager
handsontable()--init()--EditorManage实例化
1、选择editor
columns中editor的value可以是alias，也可以是class；每个table，有自己的editor instance； 2、prepare 3、display
trigger：enter，双击，F2；会调用beginEditing 4、close
会调用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
它是一抽象类
common method
BaseEditor已经实现的方法。如果想创建复杂的编辑器，需要override common method，应该调用原生方法。
Handsontable.editors.BaseEditor.prototype.prepare.apply(this, arguments);
prepare(row, col, prop, td, cellProperties); beginEditing(initialValue); 内部调用open() finishEditing(revertToOriginal, ctrlDown, callback); 内部调用saveValue(), discardEditor() discardEditor(validationResult); saveValue(val, ctrlDown); isOpend() extend()
weditor specific method
这些方法在BaseEditor中没有实现，但在其他编辑器（TextEditor）中实现了。 init() 用法：创建编辑器的html结构 geValue() setValue(newValue) open() close() 隐藏editor：this.editorDiv.style.display = 'none'; focus() 选择另一个cell，但是之前的值没有验证： this.editorInput.focus();
editor常用的属性
row, col, prop(数据源是对象数组时，表示属性名), 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()在创建editor时，调用（table）；prepare()--cell 不展示编辑器--和open()有时间间隔；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
想要这样使用
var hot = new Handsontable(document.getElementById('container'), {
data: someData,
columns: [
{
editor: SelectEditor,
selectOptions: ['option1', 'option2', 'option3']
}
]
});
应该在那个函数中处理option?init():使用selectEditor的column，会有相同的option，肯定不行；open():要尽可能快得打开编辑器，如果option值多得话，会很耗时；所以应该放在prepare()中。
override prepare()时，需要调用BaseEditor的原生方法，因为BaseEditor.prototype.prepare()会设置很多属性，这些属性会被其他方法调用。
4、实现特定的方法
SelectEditor.prototype.getValue = function(){
return this.select.value;
};
SelectEditor.prototype.setValue = function(value){
this.seletct.value = value;
};
SelectEditor.prototype.open = function(){
//如下
};
SelectEditor.prototype.close = function(value){
//如下
};
5、override behavior
监听程序
//通过上下箭头，选择值，enter确认选择值，enter保存选择值，最后EditorManager决定什么时候关闭editor
//EditorManager有一beforeKeyDown函数，可以调用stopImmediatePropagation()，来取消默认行为。
//覆盖默认行为的操作，只是针对指定的editor，所以在open中注册监听器，在close中移除监听器，以免影响其他editor的行为
var onBeforeKeyDown = function(event){
//this 是Handsontable.Core,而不是当前的editor
var instance = this;
//获取当前editor，需要使用getActiveEditor()。返回的是最近调用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;
}
};
注册监听器：包含css变换
//open的实现基于的假设是：option的处理函数是放在prepare()中的
//展示列表之前，设定了高和最小宽，以便匹配相应的单元格，这一步可选，但是不这样做的话，editor会根据浏览器来设定大小，不太容易
//把select放在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; //open editor后，需要进行css调整 //cssTransformOffset和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); };
检查监听器
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、注册editor
//如果把别名设为select，之前已经有select的话，就会重写，如果想重写的话，可以这样做；否则，还是用一个其他别名，比如，前缀为github的账号，这样就不容易冲突了。
Handsontable.editors.registerEditor('sfp12.selcet', SelectEditor);
默认的别名和类
| 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 |
自定义编辑器的封装：
//放在立即执行的匿名函数中
(function(Handsontable){ var CustomEditor = Handsontable.editors.BaseEditor.prototype.extend(); // ...rest of the editor code // Put editor in dedicated namespace
//作为全局变量的一个属性（变量） Handsontable.editors.CustomEditor = CustomEditor; // Register alias
//别名 Handsontable.editors.registerEditor('theBestEditor', CustomEditor); })(Handsontable);
使用
//扩展自定义编辑器
var AnotherEditor = Handsontable.editors.CustomEditor.prototype.extend()
//常规使用
var hot = new Handsontable(document.getElementById('container'), {
data: someData,
columns: [
//两种方式
{
editor: Handsontable.editors.CustomEditor
},
{
type: 'my.select'
}
]
});
