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

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


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

1. 使用代码保存模板结构
字段列表设计好后，可以通过代码获取设计好字段列表对应的json，将这个json保存就可以在后续需要使用的时候再次加载出来。

1. let designerBindingPathSchema = designer.getData("updatedTreeNode") || designer.getData("oldTreeNodeFromJson");

复制代码

designerBindingPathSchema就是字段列表对应的json对象了，可以将这个json转成string保存，也可以和spreadJS导出的json一起保存

1. var spread =designer.getWorkbook();
   
2.         let json = spread.toJSON()
   
3.         let designerBindingPathSchema = designer.getData("updatedTreeNode") || designer.getData("oldTreeNodeFromJson");
   
4.         if(designerBindingPathSchema){
   
5.     json.designerBindingPathSchema = JSON.parse(designerBindingPathSchema);
   
6.         }

复制代码

2. 使用代码加载模板结构
如果有已经保存好的模板结构json只需要使用如下代码加载即可

1. designer.setData("treeNodeFromJson", JSON.stringify(designerBindingPathSchema));
   
2. designer.setData("oldTreeNodeFromJson", JSON.stringify(designerBindingPathSchema));

复制代码

designerBindingPathSchema是您之前保存的json，通过api从服务期获取。如果designerBindingPathSchema和spreadJS的json一起保存，那通过下面的代码和spreadjs内容一起导入

1. spread.fromJSON(json);
   
2.               if (json.designerBindingPathSchema) {
   
3.     designer.setData("treeNodeFromJson", JSON.stringify(json.designerBindingPathSchema));
   
4.     designer.setData("oldTreeNodeFromJson", JSON.stringify(json.designerBindingPathSchema));
   
5.               }

复制代码

如果需要根据业务动态生成字段列表，可以动态的的构建designerBindingPathSchema，对于designerBindingPathSchema的结构，可以导出一个模板结构参考一下，下面是一个示例的json，生成这个json，然后setData就可以了

1. {
   
2.     "$schema": "http://json-schema.org/draft-04/schema#",
   
3.     "properties": {
   
4.     "姓名": {
   
5.         "dataFieldType": "text",
   
6.         "type": "string"
   
7.     },
   
8.     "年龄": {
   
9.         "dataFieldType": "text",
   
10.        "type": "string"
    
11.     },
    
12.     "工作经历": {
    
13.        "dataFieldType": "table",
    
14.        "type": "array",
    
15.        "items": {
    
16.        "type": "object",
    
17.        "properties": {
    
18.        "时间": {
    
19.            "type": "string"

复制代码