在公司的日常业务中,存在不少数据的收集提取需求,大部分公司会采取Excel来完成数据的收集和汇总,但这项工作会让负责信息收集的业务人员相当头大。虽然提前做好了数据收集模板,但最终提交上来的模板会被修改的五花八门,信息填写错误率比较高,无法实现信息填写不完整不允许提交的约束。后期的数据汇总虽然可以采用手动的复制粘贴来实现,但如果想要把这些数据做结构化存储,又需要去研发人员去开发一套解析Excel文档的功能,将这些填报数据提取入库,整个流程比较繁琐且出错率较高。
(图片来源于网络)
如果从最开始将这套数据收集的业务完全做在Web端,整体的数据收集任务下发、填报、数据汇总、数据提取完全自动化,这将会大大的提高业务人员的工作效率。本文会带大家使用纯前端表格控件SpreadJS解决这个问题。该控件具备纯前端、高性能等特点,在浏览器端实现了Excel的大部分功能,使得在线编辑Excel成为可能。使用它,我们不再需要本地安装Office相关的服务,只要具备一个满足H5标准的浏览器,即可在Web端完成之前需要在本地Excel中完成的一系列操作。
数据收集逻辑结合SpreadJS和前后端交互逻辑,即可完成一个数据收集的功能。
在该实例中,使用SpreadJS中的数据绑定设计了数据收集模板与汇总模板;之后开发了数据收据模板下发的功能,将数据收集模板推送给需要填报的相关人员。
对应人员填报后,可以使用SpreadJS中数据绑定获取数据的相关API,获取填写数据。
最终再借助数据绑定,将汇总数据使用数据绑定设置在汇总模板中。通过如上几步,客户的填报数据在提交时,就可以以结构化数据存储在数据库中,汇总时只需要从数据库中查询再设置到汇总模板即可。SpreadJS同时内置了多种数据验证,在数据提交时,结合数据验证,可以在模板中包含异常数据时将请求驳回,建立一套严谨便捷的数据提交汇总流程。
(图片来源于SpreadJS)
项目实战接下来我们可以一起探索SpreadJS中数据绑定的功能究竟该如何使用。
SpreadJS内部支持了三种数据绑定方式,分别是工作表绑定、单元格绑定与表格绑定。
(1)工作表绑定
通常一个Excel文件会包含多张工作表,如下所示,Sheet2与Sheet3分别代表的就是一张工作表: