下拉框如何设置数据绑定？？？

收藏

SpreadJS内置了一种数据绑定的能力，用来简化用户获取或设置数据。可以理解为建立了单元格和某个Key之间的关联关系。在设计模板阶段阶段，借助在线表格编辑器，可以很方便的构建这种绑定关系，详细的操作方式如下所示：

binding.gif175684813.png

在上述设计模板中，name和age代表的是单元格绑定，infos代表表格绑定。设计完成之后，使用如下代码，即可完成历史数据的加载。

//获取要绑定数据的工作表
let sheet = spread.getActiveSheet()
// mock的绑定数据源
let data = {
name: 'lilac',
age: 18,
infos:[
{item: "香蕉",count: 30},
{item:"苹果",count: 50}
]
}
// 获取表格绑定的表格对象
let table = sheet.tables.findByName("gcTable0")
// 设置表格随绑定数据一起扩展
table.expandBoundRows(true)
//封装绑定数据源
let source = new GC.Spread.Sheets.Bindings.CellBindingSource(data)
// 绑定数据
sheet.setDataSource(source)

复制代码

用户也可以自行修改文件中的数据，修改完成之后调用sheet.geDataSource().getSource()可以获取修改完成之后的数据，更多的API如下所示：
image.png647360839.png

到这里，所有关于数据绑定的介绍就已经结束了。可以清晰的看到，数据绑定是key值与单元格之间形成了映射关系，当对应key值得数据加载到前端时，spreadjs会做一个正确得渲染。
有的客户在设计模板时，填写的单元格可能会是一个单选框、复选框或者下拉框，这个时候，总会问下拉框怎么做数据绑定。这里我需要告诉大家：下拉框、单选框、复选框属于单元格类型，与数据绑定没有关联，数据绑定拿到的只是单元格的实际值。
继续上边的案例，我现在需要将姓名所在的单元格做成下拉框。那我需要做如下操作：
dropdown.gif25347899.png

设置完成之后，我们再去获取绑定数据，如下所示：
image.png109761351.png

大家可以看到，绑定的数据源中，key为age的字段对应的是年龄下拉框最终选中的值，也就是说，数据绑定不会去绑定下拉框中下拉项具体是什么，仅仅只是最终选定值的记录。如果想要给一个初始的值，那也是在最开始给key为age的字段设置值即可。

那有客户就会又疑惑，我的下拉框，单选，复选的数据项可能是api动态查询来的，ui上这是静态的，需要手动去添加。这里就需要大家移步看看单元格类型设置的相关API了，还是以下拉框为例，我们可以查看下拉框的学习指南。
image.png176289061.png

和上图中截图所示，下拉选项对应的是items()方法中设置的内容，动态下拉项需要在请求返回之后，再去更新对应的item即可。当然，也可以在集成在线表格编辑器是，结合spreadjs底层的API，自己动手做一个灵活的能结合api返回值的动态单元格类型生成的面板。

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

下拉框如何设置数据绑定？？？

0 个回复