[发明专利]基于表格组件的数据渲染方法、系统、设备及存储介质

说明书

本申请公开了一种基于表格组件的数据渲染方法、系统、设备及存储介质，所述方法包括以下步骤：获取需要渲染的数据，将所述数据按照数组对象的格式进行组装，获取表格数据；配置表格的行信息和列信息；调用表格组件，将所述表格数据根据所述行信息和列信息传入所述表格组件，完成渲染，获取目标表格；基于表格容器参数对所述目标表格的U I进行重绘，将整个所述目标表格显示在视窗内。通过本申请，能将规范化数据，以良好的交互体验、U I效果进行展示。

技术领域

本发明涉及信息化系统技术领域。更具体的说，本发明涉及一种基于表格组件的数据渲染方法、系统、设备及存储介质。

背景技术

如今，随着网络技术的发展和应用，数据的展示载体也随之发生变化。区别于纸质数据的展示，利用网页展示数据更加直观和方便。而在众多数据展示的网页组件中，表格组件占有重要的地位，表格主要用以展示规范化和规律化的数据。在企业级应用的日常开发中，表格无疑也是最常用到的，快速制作表格和绑定数据的方法即为渲染，执行渲染之前，需要进行表格的数据查询，并绑定表格数据，对数据绑定完成后，即完成了表格的渲染。

React(Web开发框架)是用于构建用户界面的JavaScript库。由于React的设计思想极其独特，具有革命性创新，性能出众，代码逻辑却非常简单，因此被广泛应用。React主要用于构建UI，在React里可以传递多种类型的参数，如声明代码，渲染出UI、传递动态变量、甚至是可交互的应用组件。基于React可以实现数组表格组件，但是在数据渲染的过程中存在以下问题：

1、通常传统表格同一列渲染同一个字段的数据；

2、渲染后可能会造成整个表格容器超出浏览器视窗范围，出现滚动条或者错位等现象。

发明内容

针对上述问题，本发明提供了一种基于表格组件的数据渲染方法，其中，包括：

表格数据获取步骤：获取需要渲染的数据，将所述数据按照数组对象的格式进行组装，获取表格数据；

表格配置步骤：配置表格的行信息和列信息；

表格数据渲染步骤：调用表格组件，将所述表格数据根据所述行信息和所述列信息传入所述表格组件，完成渲染，获取目标表格；

表格UI重绘步骤：基于表格容器参数对所述目标表格的UI进行重绘，将整个所述目标表格显示在视窗内。

作为本发明的进一步改进，所述表格数据渲染步骤具体包括以下步骤：

表格容器创建步骤：创建表格容器；

表格数据接收步骤：接收所述表格数据，并将所述表格数据存储在所述表格组件中的存储容器中；

表格信息接收步骤：接收所述行信息和所述列信息，调用格式化数据的方法，将所述表格数据按照层级以及所述行信息和所述列信息重新组装；

数据解析步骤：解析重新组装后的所述表格数据，对所述表格数据进行预处理；

数据渲染步骤：调用预处理好的所述表格数据，结合渲染层HTML，完成对所述表格数据的渲染。

作为本发明的进一步改进，所述表格UI重绘步骤具体包括以下步骤：

表格特征参数获取步骤：获取所述目标表格的表头参数以及表格特征参数；

显示判断步骤：判断是否显示页码；

重绘步骤：根据所述表格容器参数、所述表头参数、所述表格特征参数以及所述页码的高度，设置所述表格组件的显示效果。

作为本发明的进一步改进，当所述视窗窗口尺寸发生变化时，也需要执行所述表格UI重绘步骤。