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

收藏

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

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

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"

复制代码

		自动登录	找回密码
密码			立即注册

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

0 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章