基于表格组件的数据渲染方法、系统、设备及存储介质技术方案

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

Data rendering method, system, device and storage medium based on table component

【技术实现步骤摘要】
基于表格组件的数据渲染方法、系统、设备及存储介质


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

技术介绍

[0002]如今，随着网络技术的发展和应用，数据的展示载体也随之发生变化。区别于纸质数据的展示，利用网页展示数据更加直观和方便。而在众多数据展示的网页组件中，表格组件占有重要的地位，表格主要用以展示规范化和规律化的数据。在企业级应用的日常开发中，表格无疑也是最常用到的，快速制作表格和绑定数据的方法即为渲染，执行渲染之前，需要进行表格的数据查询，并绑定表格数据，对数据绑定完成后，即完成了表格的渲染。
[0003]React(Web开发框架)是用于构建用户界面的JavaScript库。由于React的设计思想极其独特，具有革命性创新，性能出众，代码逻辑却非常简单，因此被广泛应用。React主要用于构建UI，在React里可以传递多种类型的参数，如声明代码，渲染出UI、传递动态变量、甚至是可交互的应用组件。基于React可以实现数组表格组件，但是在数据渲染的本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于表格组件的数据渲染方法，其特征在于,包括如下步骤：表格数据获取步骤：获取需要渲染的数据，将所述数据按照数组对象的格式进行组装，获取表格数据；表格配置步骤：配置表格的行信息和列信息；表格数据渲染步骤：调用表格组件，将所述表格数据根据所述行信息和所述列信息传入所述表格组件，完成渲染，获取目标表格；表格UI重绘步骤：基于表格容器参数对所述目标表格的UI进行重绘，将整个所述目标表格显示在视窗内。2.如权利要求1所述的基于表格组件的数据渲染方法，其特征在于，所述表格数据渲染步骤具体包括以下步骤：表格容器创建步骤：创建表格容器；表格数据接收步骤：接收所述表格数据，并将所述表格数据存储在所述表格组件中的存储容器中；表格信息接收步骤：接收所述行信息和所述列信息，调用格式化数据的方法，将所述表格数据按照层级以及所述行信息和所述列信息重新组装；数据解析步骤：解析重新组装后的所述表格数据，对所述表格数据进行预处理；数据渲染步骤：调用预处理好的所述表格数据，结合渲染层HTML，完成对所述表格数据的渲染。3.如权利要求2所述的基于表格组件的数据渲染方法，其特征在于，所述表格UI重绘步骤具体包括以下步骤：表格特征参数获取步骤：获取所述目标表格的表头参数以及表格特征参数；显示判断步骤：判断是否显示页码；重绘步骤：根据所述表格容器参数、所述表头参数、所述表格特征参数以及所述页码的高度，设置所述表格组件的显示效果。4.如权利要求1所述的基于表格组件的数据渲染方法，其特征在于，当所述视窗窗口尺寸发生变化时，也需要执行所述表格UI重绘步骤。5.如权利要求2所述的基于表格组件的数据渲染方法，其特征在于，所述表格数据渲染步骤还包括配置表格组件功能，所述表格组件功能包括但不限于：实现行数据嵌套、支持带层级的数据展开、以层级为界展示不同字段来源的数据。...

【专利技术属性】
技术研发人员：杨春霞，
申请(专利权)人：北京明略昭辉科技有限公司，
类型：发明
国别省市：