表格数据的渲染方法及装置与流程

本发明涉及计算机，尤其涉及一种表格数据的渲染方法及装置。

背景技术：

1、随着计算机技术的发展，web前端技术也发展的越来越快，在web前端对表格数据进行渲染时，所涉及的数据量也越来越多。

2、相关技术中，在web前端对表格数据进行渲染时，通常无论数据量多少，大多是直接对所有数据进行渲染，每当用户进行新的滚动或拖拽操作，那么就需要对全部数据都进行渲染，所需处理的数据量较多，所需内存也较多，从而就可能导致处理时间较长，效率较低，影响用户体验。

3、由此，在对表格数据进行渲染时，如何提高效率，显得至关重要。

技术实现思路

1、针对现有技术中表格数据渲染时，待处理的数据量较多，进而导致处理时间较长，效率较为低下的情形。

2、根据本发明的第一方面，提供一种表格数据的渲染方法，该方法包括：将待处理的数据进行解析，以确定表格数据所需的目标总列宽及所述表格中每列数据对应的第一列宽；获取表格组件对应的第一可视宽度和第一隐藏距离；在所述目标总列宽大于所述第一可视宽度的情况下，基于所述表格组件对应的第一隐藏距离，确定待渲染的目标数据的起始位置；基于所述第一可视宽度、所述起始位置及每个所述第一列宽，确定待渲染的目标数据；将所述目标数据进行渲染。

3、可选的，所述获取表格组件对应的第一可视宽度和第一隐藏距离，包括：基于所述表格组件的标识信息，将所述表格组件进行解析，以确定所述表格组件对应的文档对象模型dom；基于所述dom的第一属性信息，确定所述表格组件对应的第一隐藏距离；基于所述dom的第二属性信息，确定所述表格组件对应的第一可视宽度。

4、可选的，所述基于所述第一可视宽度、所述起始位置及每个所述第一列宽，确定待渲染的目标数据，包括：响应于所述当前的起始位置为预设位置，按照所述表格数据的顺序，将前m列表格数据对应的第一列宽相加以得到第一总列宽，其中，m为正整数；在前m列表格数据对应的第一总列宽大于或等于所述第一可视宽度、且所述前m-1列表格数据对应的列宽之和小于所述第一可视宽度的情况下，将所述前m列表格数据确定为待渲染的目标数据。

5、可选的，所述基于所述第一可视宽度、所述起始位置及每个所述第一列宽，确定待渲染的目标数据，包括：响应于所述当前的起始位置为非预设位置，基于所述非预设位置及所述表格中每列数据对应的第一列宽，确定目标起始数列；按照所述表格数据的顺序，将所述目标起始数列及其后相邻的k列表格数据对应的第一列宽相加以得到第二总列宽，其中，k为正整数；在所述目标起始数列至所述第k+1列表格数据对应的列宽之和大于或等于所述第一可视宽度、且所述第二总列宽小于所述第一可视宽度的情况下，将所述目标起始数列至第k+1列表格数据确定为待渲染的目标数据。

6、可选的，在所述将待处理的数据进行解析，以确定表格数据所需的目标总列宽及所述表格中每列数据对应的第一列宽之后，还包括：在所述目标总列宽小于或等于所述第一可视宽度的情况下，将所述表格数据中的全部数据确定为目标数据。

7、可选的，所述基于所述第一可视宽度、所述起始位置及每个所述第一列宽，确定待渲染的目标数据，包括：在每个所述第一列宽均相同的情况下，将所述第一可视宽度与所述第一列宽的比值，确定为目标列数p，其中，p为正整数；响应于所述起始位置对应的表格数据为第q列，将所述第q列及其后相邻的p-1列所对应的表格数据确定为目标数据，其中，q为正整数。

8、可选的，所述基于所述表格组件对应的第一隐藏距离，确定待渲染的目标数据的起始位置，包括：响应于在预设时长内连续接收到多次滚动请求，在最后一次滚动请求结束后，基于当前所述第一隐藏距离，确定待渲染的目标数据的起始位置。

9、根据本发明的第二方面，提供一种表格数据的渲染装置，其包括：解析模块用于将待处理的数据进行解析，以确定表格数据所需的目标总列宽及所述表格中每列数据对应的第一列宽；获取模块用于获取表格组件对应的第一可视宽度和第一隐藏距离；第一确定模块用于在所述目标总列宽大于所述第一可视宽度的情况下，基于所述表格组件对应的第一隐藏距离，确定待渲染的目标数据的起始位置；第二确定模块用于基于所述第一可视宽度、所述起始位置及每个所述第一列宽，确定待渲染的目标数据；渲染模块用于将所述目标数据进行渲染。

10、可选的，所述获取模块具体用于：基于所述表格组件的标识信息，将所述表格组件进行解析，以确定所述表格组件对应的文档对象模型dom；基于所述dom的第一属性信息，确定所述表格组件对应的第一隐藏距离；基于所述dom的第二属性信息，确定所述表格组件对应的第一可视宽度。

11、可选的，所述第二确定模块具体用于：响应于所述当前的起始位置为预设位置，按照所述表格数据的顺序，将前m列表格数据对应的第一列宽相加以得到第一总列宽，其中，m为正整数；在前m列表格数据对应的第一总列宽大于或等于所述第一可视宽度、且所述前m-1列表格数据对应的列宽之和小于所述第一可视宽度的情况下，将所述前m列表格数据确定为待渲染的目标数据。

12、可选的，所述第二确定模块具体用于：响应于所述当前的起始位置为非预设位置，基于所述非预设位置及所述表格中每列数据对应的第一列宽，确定目标起始数列；按照所述表格数据的顺序，将所述目标起始数列及其后相邻的k列表格数据对应的第一列宽相加以得到第二总列宽，其中，k为正整数；在所述目标起始数列至所述第k+1列表格数据对应的列宽之和大于或等于所述第一可视宽度、且所述第二总列宽小于所述第一可视宽度的情况下，将所述目标起始数列至第k+1列表格数据确定为待渲染的目标数据。

13、可选的，所述第二确定模块还用于：在所述目标总列宽小于或等于所述第一可视宽度的情况下，将所述表格数据中的全部数据确定为目标数据。

14、可选的，所述第二确定模块还具体用于：在每个所述第一列宽均相同的情况下，将所述第一可视宽度与所述第一列宽的比值，确定为目标列数p，其中，p为正整数；响应于所述起始位置对应的表格数据为第q列，将所述第q列及其后相邻的p-1列所对应的表格数据确定为目标数据，其中，q为正整数。

15、可选的，所述第一确定模块具体用于：响应于在预设时长内连续接收到多次滚动请求，在最后一次滚动请求结束后，基于当前所述第一隐藏距离，确定待渲染的目标数据的起始位置。

16、根据本发明的第三方面，提供一种电子设备，电子设备包括：处理器以及存储有计算机程序指令的存储器；

17、处理器执行计算机程序指令时实现上述的任一种表格数据的渲染方法。

18、根据本发明的第四方面，提供一种计算机可读存储介质，其特征在于，计算机可读存储介质上存储有计算机程序指令，计算机程序指令被处理器执行时实现上述的任一种表格数据的渲染方法。

19、综上所述，本发明提供一种表格数据的渲染方法及装置，该方法包括：可以先将待处理的数据进行解析，以确定表格数据所需的目标总列宽及表格中每列数据对应的第一列宽，之后可以获取表格组件对应的第一可视宽度和第一隐藏距离，在目标总列宽大于第一可视宽度的情况下，基于表格组件对应的第一隐藏距离，确定待渲染的目标数据的起始位置，之后可以基于第一可视宽度、起始位置及每个第一列宽，确定待渲染的目标数据，并将目标数据进行渲染。由此，在进行表格数据渲染时，可以在表格数据所需的目标总列宽大于表格组件对应的第一可视宽度的情况下，先基于表格组件对应的第一隐藏距离，确定待渲染的目标数据的起始位置，之后可以基于第一可视宽度、起始位置及每个第一列宽，确定待渲染的目标数据，仅渲染该目标数据部分，无需对全部表格数据进行渲染处理，从而减少了待处理的数据量，提高了数据处理效率，节省了时间，可以给予用户较好的体验。