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

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

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

复制代码

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

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

复制代码

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

1. PasswordCellType.prototype.setEditorValue = function (editor, value, context) {
   
2.             //Sync value from Cell value to editor value.
   
3.             $(editor).val(value);
   
4.         };
   
5.         PasswordCellType.prototype.getEditorValue = function (editor, context) {
   
6.             //Sync value from editor value to cell value.
   
7.             return $(editor).val();
   
8.         };

复制代码

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

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

复制代码

实现效果如下：
表格显示：

进入编辑状态编辑:

完整demo,参考附件