Winny 发表于 2022-9-28 15:35:14

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

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



在上述设计模板中,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如下所示:

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

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

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

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

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



页: [1]
查看完整版本: 下拉框如何设置数据绑定???