实现密码输入单元格

问题：如何自定义单元格实现密码输入

背景

SpreadJS中提供了很多单元格类型，这些单元格类型可以在方便用户设置多用不同的填报种类，例如下拉，CheckBox，按钮等等。

但是原生的提供毕竟有限，如果想要有一些特色的实现，就需要用到自定义单元格这个功能了。

本次实例会讲解如何用自定义单元格设置一个用来输入密码的填报框。该功能在用户注册之类的需求上非常常见。

实现思路

1、首先我们创建一个自定义单元格类型 PasswordCellType，然后让它去继承源生的单元格类型。

function PasswordCellType() {}
PasswordCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();

2、重写其中的 paint 方法，该方法在每次单元格重绘的时候去触发，这里可以规定需要重绘的内容，因为密码类型的填报需要给用户展示的是****的密码显示。所以在 paint 方法中我们需要将结果重绘成“*”来展示。

PasswordCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
  if (value) {
    var starLength = value.toString().length;
    if(starLength){
      var starStr = "";
      for(var i = 0; i < starLength; i++){
        starStr += "*";
      }
      GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, [ctx, starStr, x, y, w, h, style, options]);
    }else{
      GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, [ctx, "******", x, y, w, h, style, options]);
    }  
  }
};

上述代码中，我们对结果的长度做了判断，根据结果的长度将内容以“*”来代替重绘。

最终结果展示如下：

表格中会根据用户输入的内容展示成“*”。当用户进入编辑状态输入时，提供正常的编辑框供编辑。

但是通常现实业务在填报密码的过程中，密码的显示也不是明文，这个时候我们就需要在上面的基础上继续改造。

在上文的基础上，我们需要重写 createEditorElement 方法。

这个方法的是创建编辑元素的屠苏，因为在每次进入编辑状态是都会创建编辑框，这个时候就会触发 createEditorElement 来创建编辑框相关元素。

在该方法中我们一般将编辑框的基本 DOM 元素建立起来，并作为上下文返回。

这里我们直接设置一个 password 类型的输入框。

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，执行单元格的源生逻辑。

需要注意的是最后这句代码 $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);
    }
};

实现效果如下：

表格显示：

进入编辑状态编辑:

作者: GrapeCity China | 审核：AlexZ | 更新时间：2023.09.26