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]