Winny 发表于 2022-4-24 16:54:19

在线表格编辑器自动加载数据绑定字段树

用户在使用数据绑定时,会经常用到右侧的数据源,如下所示:
在最开始设计时,不少用户会使用手动添加的方式,但是这种添加是一次性的,后续如果想要在设计器加载完成后,主动加载自己设置的数据源,这个时候应该怎么做呢?本文会围绕持久化数据绑定字段源,展开详细的介绍。

Step1: 了解绑定Tree的结构;
我们可以自己先手动在设计器中添加几个字段,点击“保存模板结构”按钮,如下所示:

点击后,会弹出一个模态框,需要填写导出的json文件的名称。保存完成后,我们可以发现它其实是一个有特定规则的json,如下所示:

那么其实可以很容易的想到,如果我们不采用手动添加的方式,只需要构建一个这样子的JSON,其实就已经定义好数据源结构了。
在实际项目中,很多客户数据是多源整合而来的,同样也是只需要设计好这个JSON,之后传递给前端去加载就可以了。

Step2:设计器加载绑定数据源JSON;

如果设计的文件保存为ssjson文件,并且直接使用在线表格编辑器的文件Tab下的导入按钮,其实这个绑定字段源会直接展示出来。但是问题是,客户一般文件是存储在服务器端的,需要在文件到达前端之后直接调用spread.fromJSON()来加载文件,这个时候,会发现右侧的数据源字段没有展示,这是因为在线表格编辑器按钮中已经内置了加载数据源字段的代码,而fromJSON()并没有。除此之外,客户一般数据源字段是通用的几种,是公用的,而不是随着文件变化。

这就需要我们在制作模板前,先设计好第一步中的JSON,根据用户当前打开的模板,去加载对应的数据源绑定JSON,加载绑定数据源JSON的代码为:
let designer = new GC.Spread.Sheets.Designer.Designer("designer-container")
designer.setData("treeNodeFromJson",JSON.stringify(bindSchema))
designer.setData("oldTreeNodeFromJson",JSON.stringify(bindSchema))

Step3:默认打开数据绑定面板。
最后一步可选,但根据客户习惯,一般在设计阶段,希望能够在加载完desiger之后直接进入数据源绑定的界面,这时,可以执行:GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.DesignMode).execute(designer)

详细示例参考: https://jscodemine.grapecity.com/share/-UR1lC767UuEWZOIHHMDVw/


页: [1]
查看完整版本: 在线表格编辑器自动加载数据绑定字段树