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

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



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

1. //获取要绑定数据的工作表
   
2. let sheet = spread.getActiveSheet()
   
3. // mock的绑定数据源
   
4. let data = {
   
5.     name: 'lilac',
   
6.     age: 18,
   
7.     infos:[
   
8.         {item: "香蕉",count: 30},
   
9.         {item:"苹果",count: 50}
   
10.     ]
    
11. }
    
12. // 获取表格绑定的表格对象
    
13. let table = sheet.tables.findByName("gcTable0")
    
14. // 设置表格随绑定数据一起扩展
    
15. table.expandBoundRows(true)
    
16. //封装绑定数据源
    
17. let source = new GC.Spread.Sheets.Bindings.CellBindingSource(data)
    
18. // 绑定数据
    
19. sheet.setDataSource(source)
    

复制代码

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

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

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

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

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

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