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

SpreadJS中提供了很多单元格类型，这些单元格类型可以在方便用户设置多用不同的填报种类，例如下拉，CheckBox，按钮等等。但是源生的提供比较有限，如果想要有一些特色的实现，就需要用到自定义单元格这个功能了。本次实例会讲解如何用自定义单元格设置一个用来输入密码的填报框。该功能在用户注册之类的需求上非常常见。

首先我们创建一个自定义单元格类型PasswordCellType

1. function PasswordCellType() {
   
2.         }

复制代码

接下来我们需要让它去继承源生的Text类型，在JavaScript需要设置对象的prototype

1. PasswordCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();

复制代码

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

1. PasswordCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
   
2.   if (value) {
   
3.     var starLength = value.toString().length;
   
4.     if(starLength){
   
5.       var starStr = "";
   
6.       for(var i = 0; i < starLength; i++){
   
7.         starStr += "*";
   
8.       }
   
9.       GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, [ctx, starStr, x, y, w, h, style, options]);
   
10.     }else{
    
11.       GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, [ctx, "******", x, y, w, h, style, options]);
    
12.     }  
    
13.   }
    
14.         };

复制代码

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

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

代码如附件所示：