自定义单元格导出显示

背景

在自定义单元格的时候将其导出为 ssjson，然后导入到外部的 SpreadJS 或者别的表单中。这时候会发现，导入的自定义单元格样式（或类型）无法自动导入。

如下图，自定义的下标无法在新的页面显示，那么如何在导出后继续保持自定义单元格？

实现思路

其实，自定义单元格存储为ssjson然后导出到外部页面也是需要在外部的页面定义自定义单元格，因为自定义单元格生效是由于你执行了自定义的代码，但是导出的ssjson文件没有这个代码逻辑。

要想使其生效，必须在外部的 SpreadJS 或者导入的表单中也需要去定义该类型的自定义单元格。

因此我们想在新的页面或者外部页面显示该自定义单元格时，就需要在外部页面也定义该单元格类型。

除了需要重新自定义单元格外，那么新的页面在什么时候该去识别这个自定义单元格呢？这时候需要通过原页面的 typeName 字段匹配。这个 typeName 相当于一个记号，告诉新的页面这是一个自定义单元格。

在新的页面上，ssjson标记的自定义单元格也会显示。

如下代码正是为原始页面中的自定义单元格添加上这么一个标记。

function HTMLCellType(items, size, isHorizontal) {
  spreadNS.CellTypes.Text.apply(this, arguments);
  this.typeName = "HTMLCellType"; //typeName属性标记
  this.allowOverflow = false;
  this._size = size;
}

在原始的页面添加上标记后，如果自定义类型定义在一个闭包中，换句话说，你不希望将自定义类型定义在 window 对象上， 你需要在新的页面上重写 getTypeFromString 函数来手动解析类型的字符串。

var oldFun = GC.Spread.Sheets.getTypeFromString; // Private types can not be accessed from window, so override getTypeFromString method.
GC.Spread.Sheets.getTypeFromString = function (typeString) {
  switch (typeString) {
    case "HTMLCellType":
      return HTMLCellType;
    default:
      return oldFun.apply(this, arguments);
  }
};

最后在新的页面再加上自定义单元格的代码便大功告成，导入新的页面便会展示自定义的下标（如下图）。

另外还可以参考自定义特性序列化的简介，这里也会做一个介绍。

具体的Demo可以参考该链接。

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