使用在线表格编辑器如何设置数据绑定模板
本帖最后由 Winny 于 2021-8-30 09:26 编辑不少用户在初次接触数据绑定的概念时,总会一脸茫然,不知道数据绑定是什么?怎么去做数据绑定?
SpreadJS在设置数据绑定时分为两类:
1. 使用js代码设置数据绑定的路径,之后将查询出的数据根据绑定路径显示到SpreadJS当中;
参考资源:
https://www.grapecity.com.cn/developer/spreadjs/learnvideo
2. 使用在线表格编辑器设计数据绑定路径
(1) 切换到数据tab,点击模板按钮,弹出右侧设置面板;
(2)右侧面板添加绑定字段 操作详情见附件资源souce.gif
右侧数据字段列表也可从数据库查询而来,它本质上其实就是一个json结构,设计完成之后可以点击“保存模板结构”将当前数据源结构的json保存到本地分析一下,之后从数据库查询出来的字段拼接成类似的结构,再设置到当前设计器上即可。
以当前结构为例,其导出的json结构如下:
{
"$schema":"http://json-schema.org/draft-04/schema#",
"properties":{
"region":{
"dataFieldType":"text",
"type":"string"
},
"date":{
"dataFieldType":"text",
"type":"string"
},
"scales":{
"dataFieldType":"table",
"type":"array",
"items":{
"type":"object",
"properties":{
"name":{
"type":"string"
},
"sex":{
"type":"string"
},
"age":{
"type":"string"
},
"count":{
"type":"string"
}
}
}
}
},
"type":"object"
}
将此json加载到当前designer的api为:designer.setData('treeNodeFromJson',JSON.stringfy(jsonSchema))
designer.setData('oldTreeNodeFromJson',JSON.stringfy(jsonSchema)) (3)设计模板
数据源字段结构加载完成后,接下来就需要设计模板的样式,并设置绑定路径,这里以一个设计简单的销售表为例,操作详情见附件资源designer.gif。
(4)加载数据
点击数据下模板按钮,隐藏右侧弹出面板,此时模板结构已经设计完成,可以将该模板导出ssjson存储至数据库。接下来就是需要将从后端查询拿到的数据加载到当前模板中。
(5)修改数据后获取数据源
这里日期格式获取的是OADate,这一点在设置的时候将单元格类型设置为时间格式,就不会存在该问题啦
页:
[1]