SpreadJS 自定义单元格实现密码输入(二）

收藏

上一期我们讲解了如何用自定义单元格实现密码输入，上一期我们能做到将输入内容显示为“*”的操作，但是通常现实业务在填报密码的过程中，密码的显示也不是明文，这个时候我们就需要在上面的基础上继续改造。在上一期的基础上，首先，我们需要重写createEditorElement方法。方法的意思是创建编辑元素，因为在每次进入编辑状态是都会创建编辑框，这个时候就会触发createEditorElement来创建编辑框相关元素。在该方法中我们一般将编辑框的基本dom元素建立起来，并作为上下文return出去。这里我们直接设置一个password类型的input。

PasswordCellType.prototype.createEditorElement = function (context) {
//Create input presenter.
var passwordInput = document.createElement("INPUT");
passwordInput.setAttribute("type", "password");
return passwordInput;
};

复制代码

接着，我们需要重写activateEditor方法。该方法在每次激活编辑状态时触发，触发的顺序是先触发createEditorElement之后再触发activateEditor，并且activateEditor中可以获取到editorContext这个上下文，该上下文就是createEditorElement返回的结果。

PasswordCellType.prototype.activateEditor = function (editorContext, cellStyle, cellRect, context) {
//Initialize input editor.
if (editorContext) {
$editor = $(editorContext);
GC.Spread.Sheets.CellTypes.Text.prototype.activateEditor.apply(this, arguments);
$editor.css("position", "absolute");
$editor.attr("gcUIElement", "gcEditingInput");
}
}

复制代码

这样我们就可以串联起来，在activateEditor中获取上下文，然后在dom上做对应的设置。这里面我们实际不需要再上面做其他设置所以直接调用apply，执行text的源生逻辑。需要注意的是最后这句代码$editor.attr("gcUIElement", "gcEditingInput");声明了这个属性之后，该dom会被SpreadJS认为是SpreadJS本身的一部分，这样在SpreadJS本身的生命周期做处理的时候也会包含该dom。
接着，我们需要设置setEditorValue和getEditorValue，保证editor与表格之间的值传递正确通畅。

PasswordCellType.prototype.setEditorValue = function (editor, value, context) {
//Sync value from Cell value to editor value.
$(editor).val(value);
};
PasswordCellType.prototype.getEditorValue = function (editor, context) {
//Sync value from editor value to cell value.
return $(editor).val();
};

复制代码

最后，还需要有一些收尾的工作，例如在表格宽度变化后调整editor编辑框的大小。

PasswordCellType.prototype.updateEditor = function (editorContext, cellStyle, cellRect, context) {
if (editorContext) {
$editor = $(editorContext);
$editor.css("width", cellRect.width - 1);
$editor.css("height", cellRect.height - 3);
}
};

复制代码

实现效果如下：
表格显示：
image.png160487975.png