SpreadJS 纯前端表格控件应用案例:MHT

Stella981
• 阅读 564

由明厚天股份研发的数据填报采集平台,提供了便于用户操作的类Excel界面模式,可为用户提供规范、正确、完整的数据采集和填报模型,结合数据自动化抽样,可解析不同数据库、不同数据格式的数据,让数据填报流程更简单、更快速、更顺畅。

下面,让我们一起来看看明厚天股份是如何在“MHT-CP数据填报采集平台”中应用表格技术,实现“数据填报”与数据汇总计算的。

项目背景

近几年,随着计算机技术的发展和办公自动化的建设,简化用户数据采集流程,提供标准化的数据呈现和数据汇总平台已成为企业信息化转型的关键。

由明厚天股份研发的数据填报采集平台,提供了便于用户操作的类Excel界面模式,可为用户提供规范、正确、完整的数据采集和填报模型,结合数据自动化抽样,可解析不同数据库、不同数据格式的数据,让数据填报流程更简单、更快速、更顺畅。

除了数据填报,该平台还可按照预制的报表内容进行数据可视化展示,以实现报表模板自动生成与信息多元化利用,通过将 SpreadJS 纯前端表格控件与系统底层架构集成,不仅保留了 Excel 的数据处理能力,还满足了批量导入导出 Excel 文档、大数据量填报、填报暂存、模板下发、多级上报等多项业务需求。

项目架构图

SpreadJS 纯前端表格控件应用案例:MHT

项目截图

1. 表单设计(样式、填报区域、数据绑定、角色权限等设计)

通过嵌入 SpreadJS 在线表格编辑器,用户可根据具体业务,直接在浏览器中在线填报数据,也可将 Excel 文档作为原始表单模板,导入系统后,进行数据绑定、权限分配等自定义操作,这样不仅保留了 Excel 的数据处理能力,还可将模板数据传输至服务端进行有效的管理和存储。

SpreadJS 纯前端表格控件应用案例:MHT

2. 数据填报

借助 SpreadJS 统一数据存储模型,实现数据标准化录入,可以大幅简化数据多级上报的设计步骤与开发难度。

平台可依据业务流程和用户的实际填报需求,进行数据采集、查阅及汇总。

SpreadJS 纯前端表格控件应用案例:MHT

(调整模板对应数据源)

SpreadJS 纯前端表格控件应用案例:MHT

(自定制Excel模板)

SpreadJS 纯前端表格控件应用案例:MHT

(在线预览模板文件)

3. 同业务域的多表单联合填报

SpreadJS 纯前端表格控件应用案例:MHT

4. 数据单元格透视

SpreadJS 纯前端表格控件应用案例:MHT

5. 数据审核

SpreadJS 纯前端表格控件应用案例:MHT

六、表格技术带来的价值(选择表格控件 SpreadJS 的主要原因)

针对“表单设计”的应用场景,SpreadJS实现了:

  1. 纯前端解析Excel、在线导入导出 Excel、实现过程基本零代码
  2. 多种数据格式校验,如自定义校验规则,更为灵活高效
  3. 单元格级别的角色权限控制
  4. 可通过Sql数据源信息自动生成表单,方便快捷

针对“数据填报”的应用场景,SpreadJS实现了:

  1. 绑定数据模版并动态填充数据
  2. 单元格级别的权限控制
  3. 避免了海量数据引起的性能问题,读写性能高
  4. 类Excel界面,符合大部分用户的使用习惯
  5. 数据公式自动计算,便于数据填报

使用SpreadJS控件,大大节约了开发时间、人力成本,降低了开发难度,且SpreadJS也更符合普通非技术类人员的操作习惯(类 Excel 模式),易于被用户接受。

明厚天股份之所以选择SpreadJS控件开发数据填报系统,主要考虑以下两方面原因:

1. 完全兼容Excel文档,具备在线Excel 导入导出能力

无需后台代码和第三方组件,SpreadJS 不仅提供了在线导入、导出 Excel 报表、导出 PDF 的功能,还支持多种匹配逻辑和自定义导入导出操作,如只导入数据或公式、导入固定行和不定行、将冻结行列转置为行头列头、导出自适应行高、密码保护等,可提供更加灵活、自主可控的导入导出方式。

2. 支持二次扩展,满足客户化开发

SpreadJS 兼容 Angular、React、Vue等前端开发框架,符合 UMD 规范,可按需加载,易于在 VSCode 中使用。通过二次扩展,我司直接将 SpreadJS 作为数据填报模块嵌入到填报平台,实现了批量导入导出 Excel、大数据量填报、填报暂存、多 sheet 填报、多级上报等多项业务需求。

以上就是明厚天股份应用SpreadJS表格控件技术研发的“MHT-CP数据填报采集平台”案例展示,如需查看 SpreadJS 的更多应用案例或需要了解 SpreadJS 的更多功能特性,欢迎访问SpreadJS 产品官网

关于SpreadJS 纯前端表格控件

SpreadJS 是一款基于 HTML5 的纯前端表格控件,兼容 450 种以上的 Excel 公式,具备“高性能、跨平台、与 Excel 高度兼容”的产品特性,备受华为、苏宁易购、天弘基金、远光软件等各领域龙头企业的青睐,并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户带来亲切、易用的使用体验,并满足 Web Excel 组件开发、表格文档协同编辑、 数据填报、 类 Excel 报表设计等业务场景,可极大降低企业研发成本和项目交付风险。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Java修道之路,问鼎巅峰,我辈代码修仙法力齐天
<center<fontcolor00FF7Fsize5face"黑体"代码尽头谁为峰,一见秃头道成空。</font<center<fontcolor00FF00size5face"黑体"编程修真路破折,一步一劫渡飞升。</font众所周知,编程修真有八大境界:1.Javase练气筑基2.数据库结丹3.web前端元婴4.Jav
Stella981 Stella981
2年前
SpreadJS 应用案例:电力自动化在线数据采集报表系统
电力自动化在线数据采集报表系统,由南京畅洋科技有限公司自主研发。使用该系统,用户只需简单的配置,便可轻松获取想要的数据。该系统通过嵌入SpreadJS纯前端表格控件,可应对电力系统中针对数据处理的各项需求,让数据变得更有价值。下面,让我们一起来看看如何在“电力自动化在线数据采集报表系统”中应用表格技术,实现“数据填报(https://www.osch
Stella981 Stella981
2年前
SpreadJS 纯前端表格控件应用案例:资料填报系统
由达美盛研发的资料填报系统,借助SpreadJS纯前端表格控件提供的API,实现了高度类似Excel的数据资料填报审批界面,用户可在线完成打印归档、组卷存储和分析。下面,让我们一起来看看达美盛是如何在“资料填报系统”中应用表格技术,实现“数据填报(https://www.oschina.net/action/GoToLink?urlhttp
Stella981 Stella981
2年前
SpreadJS 纯前端表格控件应用案例:金融业数据智能分析平台
由北京海创研发的金融业数据智能分析平台,通过嵌入SpreadJS,实现了基于Web的数据采集、自助式报表设计与浏览、灵活查询、自主分析和数据预测等功能,简洁、易用,有效解决了用户数据填报、查询和分析需求,支持云部署及企业现场部署等多种方式。下面,让我们一起来看看北京海创是如何在“金融业数据智能分析平台”中应用表格技术,实现“数据填报(https:/
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这