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

收藏

用户在使用数据绑定时，会经常用到右侧的数据源，如下所示： image.png137043150.png

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

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

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

那么其实可以很容易的想到，如果我们不采用手动添加的方式，只需要构建一个这样子的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/

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

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

0 个回复