在此前的学习笔记中,相信大家已经学会并熟练掌握了 spreadjs 的表单、函数、工作簿及产品的基本使用方法。在之后的学习阶段,我们将更进一步,深入了解 spreadjs 的数据绑定、单元格类型及前端导入导出 excel 等核心功能,充分体验“仅需100多行代码,就可将 excel 嵌入 web 应用系统” 的全过程。
spreadjs 学习笔记的配套视频资料,请在文末点击了解更多获取下载。
spreadjs 的数据绑定spreadjs 作为一个类 excel 的纯前端表格控件,有着和 excel 高度类似的功能和用户体验,但同时也有很多 excel 所没有的独特功能,数据绑定就是其中之一。
数据绑定作为 spreadjs 最常用的功能,主要分为表单级别的绑定、单元格级别的绑定和整个表格的数据绑定。
1. 表单级别绑定
使用 setdatasource 和 getdatasource 方法实现绑定数据源、获取数据源。
绑定列时可以通过设置 formatter 指定列的展示样式,例如数据源的出生日期格式为:date_of_birth:1958-10-26 00:00:00,设置 formatter:yyyy/m/d 后出生日期显示为:
此外,还可自定义设置某列的样式为 checkbox(单选框)等,例如下图“过敏史”一列:
2. 单元格级别的绑定
使用 getbindingpath 方法,用于获取指定单元格的绑定信息。
点击单元格,如果该单元格绑定了数据源,则可以获取该单元格的绑定信息:
3. 表格绑定
表格绑定,实质上是一种特殊的单元格级别绑定。使用表格绑定,可以给表格绑定不同的数据,例如下图,通过点击按钮,即可实现给表格绑定不同的数据源:
点击按钮,绑定新的数据源,结果如下图:
spreadjs 数据绑定示例:databind.zip
spreadjs 的导航、脏数据和单引号前缀1.spreadjs 单元格导航行为
在 spreadjs 中,按下 tab 键,默认是移动到下一个单元格。当然,在 gc.spread.sheets.commands 中可以定义这些导航操作,如下图:切换下拉框的内容,可以重新定义按下 tab 键时的行为。
当选择先单元格再控件时,选中项移动到最后一个单元格时会再次选中页面的其他控件。
2.spreadjs 如何处理脏数据
在 spreadjs 中,使用 getdirtyrows 和 getdirtycells 可以获取表单上发生数据变更的单元格或行,使用 clearpendingchanges ,可以清除值变更、插入/删除行的状态。
脏数据的定义:
当单元格的值变更时,该单元格为脏数据; 当单元格的值变更时,该单元格所在行均为脏数据; 当插入一行,并在单元格中设置值时,该行与该单元格不是脏数据举例:如图所示,插入一行,并在a1中输入123,点击获取插入行,显示新插入的行号为0。此时,点击获取行脏数据、获取单元格脏数据均无反应。
3.spreadjs单引号前缀
当你输入的值带有单引号前缀,输入的值会被转换并存储为字符串。如下图:
spreadjs 导航、脏数据、单引号前缀示例:editcell.zip
ok,今天先记录到这里,下一周学习计划: spreadjs 的复制粘贴、单元格格式和单元格类型。
ps:点击了解更多,获取文中提到的学习视频和示例源码。
关于葡萄城赋能开发者!葡萄城公司成立于 1980 年,是全球领先的集开发工具、商业智能解决方案、管理系统设计工具于一身的软件和服务提供商。西安葡萄城是其在中国的分支机构,面向全球市场提供软件研发服务,并为中国企业的信息化提供国际先进的开发工具、软件和研发咨询服务。葡萄城的控件和软件产品在国内外屡获殊荣,在全球被数十万家企业、学校和政府机构广泛应用。