Winny 发表于 2021-8-23 17:17:17

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

本帖最后由 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]
查看完整版本: 使用在线表格编辑器如何设置数据绑定模板