dexteryao 发表于 2021-10-13 11:36:01

SpreadJS在线表格编辑器自定义字段列表

SpreadJS在线表格编辑器提供了数据绑定的在线设计功能,通过拖拽字段列表中的属性到单元格来实现单元格绑定路径的设置。
那么在加载编辑器组件后可以点击工具栏的数据 - 模板启动字段列表面板,字段列表默认为空,可以在线添加和删除属性,也可以将设计好的字段列表配置导出为json文件保存(点击工具栏“保存模板结构按钮”),也可点击加载模板结构导入一个之前保存的json文件。


如果想要通过代码完成以上操作请参考如下内容

1. 使用代码保存模板结构
字段列表设计好后,可以通过代码获取设计好字段列表对应的json,将这个json保存就可以在后续需要使用的时候再次加载出来。
let designerBindingPathSchema = designer.getData("updatedTreeNode") || designer.getData("oldTreeNodeFromJson");designerBindingPathSchema就是字段列表对应的json对象了,可以将这个json转成string保存,也可以和spreadJS导出的json一起保存
var spread =designer.getWorkbook();
      let json = spread.toJSON()
      let designerBindingPathSchema = designer.getData("updatedTreeNode") || designer.getData("oldTreeNodeFromJson");
      if(designerBindingPathSchema){
    json.designerBindingPathSchema = JSON.parse(designerBindingPathSchema);
      }2. 使用代码加载模板结构
如果有已经保存好的模板结构json只需要使用如下代码加载即可
designer.setData("treeNodeFromJson", JSON.stringify(designerBindingPathSchema));
designer.setData("oldTreeNodeFromJson", JSON.stringify(designerBindingPathSchema));designerBindingPathSchema是您之前保存的json,通过api从服务期获取。如果designerBindingPathSchema和spreadJS的json一起保存,那通过下面的代码和spreadjs内容一起导入
spread.fromJSON(json);
            if (json.designerBindingPathSchema) {
    designer.setData("treeNodeFromJson", JSON.stringify(json.designerBindingPathSchema));
    designer.setData("oldTreeNodeFromJson", JSON.stringify(json.designerBindingPathSchema));
            }

如果需要根据业务动态生成字段列表,可以动态的的构建designerBindingPathSchema,对于designerBindingPathSchema的结构,可以导出一个模板结构参考一下,下面是一个示例的json,生成这个json,然后setData就可以了
{
    "$schema": "http://json-schema.org/draft-04/schema#",
    "properties": {
    "姓名": {
      "dataFieldType": "text",
      "type": "string"
    },
    "年龄": {
      "dataFieldType": "text",
       "type": "string"
    },
    "工作经历": {
       "dataFieldType": "table",
       "type": "array",
       "items": {
       "type": "object",
       "properties": {
       "时间": {
         "type": "string"







页: [1]
查看完整版本: SpreadJS在线表格编辑器自定义字段列表