使用在线表格编辑器如何设置数据绑定模板

收藏

本帖最后由 Winny 于 2021-8-30 09:26 编辑

不少用户在初次接触数据绑定的概念时，总会一脸茫然，不知道数据绑定是什么？怎么去做数据绑定？
SpreadJS在设置数据绑定时分为两类：
1. 使用js代码设置数据绑定的路径，之后将查询出的数据根据绑定路径显示到SpreadJS当中；
      参考资源:
         https://www.grapecity.com.cn/developer/spreadjs/learnvideo
2. 使用在线表格编辑器设计数据绑定路径
   （1）切换到数据tab,点击模板按钮，弹出右侧设置面板；
       image.png13232726.png

   （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。
   image.png445390929.png

（4）加载数据
点击数据下模板按钮，隐藏右侧弹出面板，此时模板结构已经设计完成，可以将该模板导出ssjson存储至数据库。接下来就是需要将从后端查询拿到的数据加载到当前模板中。
image.png720625915.png

（5）修改数据后获取数据源
image.png915223998.png

这里日期格式获取的是OADate，这一点在设置的时候将单元格类型设置为时间格式，就不会存在该问题啦

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

使用在线表格编辑器如何设置数据绑定模板

0 个回复