CN112182444A - 数据渲染系统、方法及电子设备 - Google Patents

Abstract

本申请提供一种数据渲染系统、方法及电子设备，包括建立具有显示区的虚拟数据表，执行行垂直高度转换处理以获得目标数据的渲染行垂直高度，再根据滚动条的当前位置计算最小显示行垂直高度和最大显示行垂直高度，据以提取渲染行垂直高度介于最小显示行垂直高度和最大显示行垂直高度之间的目标数据并渲染至显示区中以最终呈现给用户，借此，本申请能按需渲染网页中的表格数据，可以改善浏览器的渲染性能并节省计算机资源。

Description

数据渲染系统、方法及电子设备

技术领域

本申请实施例涉及一种数据渲染技术，尤指一种针对网页中的表格数据进行渲染的数据渲染系统、方法及电子设备。

背景技术

在浏览网页中，通过会用表格显示服务端返回的数据，但如果服务端返回的数据过大，又或者是一个树结构的数据，则容易造成网页渲染过多的元素而导致性能低下，特别是在浏览器重绘以及回流的过程中会导致浏览器卡死，其主要原因是因为大多数浏览器设备的刷新频率是60次/秒，也就说是浏览器对每一帧画面的渲染工作要在16ms完成，如果网页表格中显示的元素过多，造成渲染的时间超出这个时间，则页面的渲染就会出现卡顿现象。

再者，随着移动设备功能的越来越强大，人们开始习惯使用移动设备以替代传统电脑来浏览网页，然而，由于移动设备的处理能力有限，导致上述所提及的网页渲染时存在的卡顿现象在移动设备中显得尤为明显，极大影响了用户的使用体验。

有鉴于此，如何克服此技术问题，即为本申请待解决的技术问题。

发明内容

鉴于上述问题，本申请的主要目的在于提供一种数据渲染方法、系统及电子设备，可以改善浏览器的渲染性能，并节省计算机的资源。

本申请的另一目的在于提供一种数据渲染方法、系统及电子设备，可提升使用者的使用感受。

为达上述目的及其它相关目的，本申请的一实施例提供一种数据渲染方法，用于针对网页中的表格数据进行渲染，其包括：建立虚拟数据表，并于所述虚拟数据表中定义显示区、顶部隐藏区、以及底部隐藏区，且针对所述显示区设定显示高度；获取待渲染的目标数据，并针对所述目标数据执行行垂直高度转换处理，以获得各所述目标数据的渲染行垂直高度，其中，所述渲染行垂直高度用于定义所述目标数据的所在数据行在所述虚拟数据表中的绝对高度位置；获取滚动条的当前位置，并根据所述显示区的所述显示高度，计算最小显示行垂直高度和最大显示行垂直高度；以及提取所述渲染行垂直高度大于等于所述最小显示行垂直高度且小于等于所述最大显示行垂直高度的所述目标数据，并将所述目标数据渲染至所述显示区中；提取所述渲染行垂直高度小于所述最小显示行垂直高度的所述目标数据，并累计各所述目标数据的所述渲染行垂直高度以生成顶部行垂直高度累计变量，并将所述顶部行垂直高度累计变量作为所述顶部隐藏区的高度值；提取所述渲染行垂直高度大于所述最大显示行垂直高度的所述目标数据，并累计各所述目标数据的所述渲染行垂直高度以生成底部行垂直高度累计变量，并将所述底部行垂直高度累计变量作为所述底部隐藏区的高度值。

可选地，在本申请的实施例中，所述方法还包括借由显示屏幕显示被渲染至所述显示区的所述目标数据。

可选地，在本申请的实施例中，所述方法还包括设定所述虚拟数据表的显示宽度，其中，所述显示宽度用于定义所述虚拟数据表中的各数据行可显示的所述目标数据的数量；以及获取所述目标数据的总数量，并依据所述显示宽度对所述目标数据执行所述行垂直高度转换处理。

可选地，在本申请的实施例中，所述显示区的所述显示高度和/或所述显示宽度为固定参数。

可选地，在本申请的实施例中，所述显示区的所述显示高度和/或所述显示宽度为可变参数，且所述方法还包括设定与所述显示屏幕的显示规格相对应的所述显示区的所述显示高度和/或所述显示宽度；以及识别所述显示屏幕的显示规格，据以获取所述显示区的所述显示高度和/或所述显示宽度。

可选地，在本申请的实施例中，所述目标数据包括多种数据类型，且不同数据类型的所述目标数据对应的渲染行高为不同，所述方法还包括设定单位渲染行高，并以所述单位渲染行高为基数，定义各所述数据类型的所述目标数据所对应的所述渲染行高；以及识别所述目标数据的所述数据类型，以获取与所述数据类型所对应的所述渲染行高，并据以针对所述目标数据执行所述行垂直高度转换处理。

可选地，在本申请的实施例中，所述方法还包括累加所述虚拟数据表中的所述单位渲染行垂直高度，以计算所述虚拟数据表的总高度。

可选地，在本申请的实施例中，当所述虚拟数据表的总高度大于所述显示区的显示高度时，可在所述显示区中生成侧边栏及所述滚动条，其中，所述滚动条在所述侧边栏所定义的滚动范围内滚动，且所述方法还包括渲染所述滚动条相对于所述侧边栏的占比大小，通过将所述显示区的所述显示高度除以所述虚拟数据表的总高度以得到高度比例，再将所述高度比例乘以所述显示区的所述显示高度，以定义所述滚动条相对于所述侧边栏的占比大小。

可选地，在本申请的实施例中，所述方法还包括将所述滚动条的所述当前位置作为所述最小显示行垂直高度值；以及计算所述最小行垂直高度值与所述显示区的所述显示高度之和，以获得所述最大显示行垂直高度值。

可选地，在本申请的实施例中，所述目标数据为一维数组，且所述方法还包括判断所述目标数据是否为树结构数据；以及当判断所述目标数据为树结构数据时，将所述目标数据递归转换为一维数组。

可选地，在本申请的实施例中，所述方法还包括异步监听所述滚动条，以判断所述滚动条的所述当前位置是否发生改变。

可选地，在本申请的实施例中，所述顶部隐藏区与所述底部隐藏区为分别设置于所述虚拟数据表的顶端以及底端的一个占位符，且所述顶部隐藏区与所述底部隐藏区的高度随着所述滚动条的所述当前位置的改变而变化。

此外，本申请还提供一种数据渲染系统，用于针对网页中的表格数据进行渲染，其包括：设定模块，其用于建立虚拟数据表，其中，所述虚拟数据表中定义有预设有显示高度的显示区、顶部隐藏区、和底部隐藏区；获取模块，其用于获取待渲染的目标数据，以及用于获取滚动条的当前位置；转换模块，其用于针对所述目标数据执行行垂直高度转换处理，以获得各所述目标数据的渲染行垂直高度，其中，所述渲染行垂直高度用于定义所述目标数据的所在数据行在所述虚拟数据表中的绝对高度位置；以及渲染模块，其用于根据所述滚动条的所述当前位置以及所述显示区的所述显示高度，计算最小显示行垂直高度和最大显示行垂直高度，并提取所述渲染行垂直高度大于等于所述最小显示行垂直高度且小于等于所述最大显示行垂直高度的所述目标数据，并将所述目标数据渲染至所述显示区中；提取所述渲染行垂直高度小于所述最小显示行垂直高度的所述目标数据，并累计各所述目标数据的所述渲染行垂直高度以生成顶部行垂直高度累计变量，并将所述顶部行垂直高度累计变量作为所述顶部隐藏区的高度值；提取所述渲染行垂直高度大于所述最大显示行垂直高度的所述目标数据，并累计各所述目标数据的所述渲染行垂直高度以生成底部行垂直高度累计变量，并将所述底部行垂直高度累计变量作为所述底部隐藏区的高度值。

可选地，在本申请的实施例中，所述数据渲染系统还包括显示屏幕，其用于显示被渲染至所述显示区的所述目标数据。

可选地，在本申请的实施例中，所述设定模块还包括设定所述虚拟数据表的显示宽度，其中，所述显示宽度用于定义所述虚拟数据表中的各数据行可显示的所述目标数据的数量；所述转换模块还包括统计所述目标数据的总数量，并依据所述显示宽度对所述目标数据执行所述行垂直高度转换处理。

可选地，在本申请的实施例中，所述显示区的所述显示高度和/或所述显示宽度为固定参数。

可选地，在本申请的实施例中，所述显示区的所述显示高度和/或所述显示宽度为可变参数，且其中：所述设定模块还包括设定与所述显示屏幕的显示规格相对应的所述显示区的所述显示高度和/或所述显示宽度；所述获取模块还包括识别所述显示屏幕的显示规格，以提供所述渲染模块确定所述显示区的所述显示高度和/或提供所述转换模块确定所述显示区的所述显示宽度。

可选地，在本申请的实施例中，所述目标数据包括多种数据类型，且不同所述数据类型的所述目标数据对应的渲染行高为不同，且其中：所述设定模块还包括设定单位渲染行高，并以所述单位渲染行高为基数，定义各所述数据类型的所述目标数据所对应的所述渲染行高；所述转换模块还包括识别所述目标数据的所述数据类型，以获取与所述数据类型所对应的所述渲染行高，并据以针对所述目标数据执行所述行垂直高度转换处理。

可选地，在本申请的实施例中，所述转换模块还包括累加所述虚拟数据表中的所述单位渲染行垂直高度，以计算所述虚拟数据表的总高度。

可选地，在本申请的实施例中，所述渲染模块还包括当判断所述虚拟数据表的总高度大于所述显示区的显示高度时，在所述显示区中生成侧边栏及所述滚动条，且所述滚动条在所述侧边栏所定义的滚动范围内滚动；以及渲染所述滚动条相对于所述侧边栏的占比大小，通过将所述显示区的所述显示高度除以所述虚拟数据表的总高度以得到高度比例，再将所述高度比例乘以所述显示区的所述显示高度，以定义所述滚动条相对于所述侧边栏的占比大小。

可选地，在本申请的实施例中，所述渲染模块还包括将所述滚动条的所述当前位置作为所述最小显示行垂直高度值，并通过计算所述最小行垂直高度值与所述显示区的所述显示高度之和，而获得所述最大显示行垂直高度值。

可选地，在本申请的实施例中，所述获取模块还包括判断所获取的所述目标数据是否为树结构数据，并当判断所述目标数据为树结构数据时，将所述目标数据递归转换为一维数组。

可选地，在本申请的实施例中，所述系统还包括监听模块，其用于异步监听所述滚动条，以判断所述滚动条的所述当前位置是否发生改变，并当判断所述滚动条的所述当前位置发生改变时，触发所述获取模块获取所述滚动条的所述当前位置。

可选地，在本申请的实施例中，所述顶部隐藏区与所述底部隐藏区为分别设置于所述虚拟数据表的顶端以及底端的占位符，且所述顶部隐藏区与所述底部隐藏区的高度随着所述滚动条的所述当前位置的改变而变化。

本申请还提供一种电子设备，其内存储有数据渲染处理程序，其中，当所述电子设备载入所述数据渲染处理程序并执行后，完成所述的数据渲染方法。

由以上技术方案可见，本申请实施例通过建立具有数据可视区和数据隐藏区的虚拟数据表，以根据滚动条的当前位置，仅渲染处于可视范围内的目标数据以呈现给用户，可有效改善浏览器在渲染过程中由于内存开销所带来的瓶颈，并改善了用户的使用体验。

再者，本申请的虚拟数据表的总高度是通过遍历所有待渲染的目标数据以累计每一行的高度计算获得，以适应表格在使用过程中存在的行高不一致的情况，并提升数据的渲染效果。

另外，通过在虚拟数据表的顶端和底端设置两个占位符，以替代无需显示部分数据的高度，可以模拟出真实的滚动条位置，以进一步提高用户的使用感受。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请实施例中记载的一些实施例，对于本领域普通技术人员来讲，还可以根据这些附图获得其他的附图。

图1为显示本申请的数据渲染系统的基本框架示意图；

图2A及图2B为显示本申请的虚拟数据表的不同实施例示意图；以及

图3为显示本申请的数据渲染方法的基本流程示意图。

元件标号

100 数据渲染系统

110 设定模块

111 虚拟数据表

112 显示区

113 顶部隐藏区

114 底部隐藏区

115 滚动条

116 侧边栏

120 获取模块

130 转换模块

140 渲染模块

150 监听模块

2 电子设备

21 显示屏幕

S31～S38 步骤

具体实施方式

为了使本领域的人员更好地理解本申请实施例中的技术方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本申请实施例一部分实施例，而不是全部的实施例。基于本申请实施例中的实施例，本领域普通技术人员所获得的所有其他实施例，都应当属于本申请实施例保护的范围。

诚如上述，当前在网页浏览过程中，当需渲染大批量数据或树结构数据时，容易出现网页卡顿的问题，然而，在我们的终端设备中，例如电脑、平板、智能手机等，通过浏览器在一屏中所能看到的内容其实是有限的，因此，没有必要一次性把所有的数据都渲染到网页中，有鉴于此，本申请提出了一种数据渲染技术，该技术在符合W3C标准情况下，依托于浏览器环境，使用网页技术(例如：HTML,CSS,Javascript)在内存中虚拟一个表格并自定义一个表格滚动条，并以滚动条的位置坐标值为条件，按照用户的实际浏览操作而自动计算出当前可视范围内的数据，并仅将此范围内的数据渲染到浏览器上以呈现给客户，借以改善浏览器的渲染性能，以有效解决网页卡顿的问题。

如图1所示，其为显示本申请的数据渲染系统100的基本架构示意图。如图所示，本申请的数据渲染系统100用于针对网页中的表格数据(包括大批量数据或树结构数据)进行渲染，其可适用于各种具有显示屏幕21的电子设备2，例如电脑、平板、智能手机等。如图1所示，数据渲染系统100主要包括设定模块110、获取模块120、转换模块130、和渲染模块140。

设定模块110用于提供建立虚拟数据表111(请配合参阅图2A及图2B)，并在虚拟数据表111中定义一显示区112、一顶部隐藏区113、以及一底部隐藏区114，并针对显示区112定义显示高度。于实际应用中，上述的虚拟数据表111可以是通过HTML Table实现，也可以通过HTML DOM元素与CSS绘制具备表格功能的表格组件。

于本实施例中，可在电子设备2的内存(未示出)中生成上述的虚拟数据表111，针对显示区112所设定的显示高度可以与显示设备2的显示屏幕21的分辨率相适配，于实际应用中，显示区112的显示高度可以设定为固定参数。较佳者，有鉴于在不同规格电子设备2上，显示屏幕21的显示规格亦各有不同，因此，显示高度也可设置为可变参数，以适配于不同显示规格(例如分辨率)的显示屏幕21。

于其他实施例中，设定模块110还可提供针对显示区112的显示宽度进行设定，其中，显示宽度用于定义虚拟数据表111中的各数据行可显示的所述目标数据的数量，于上述的显示高度的设定相类似，显示区112的显示宽度也可以设定为固定参数或可变参数中的任一者。

再者，顶部隐藏区113与底部隐藏区114为分别设置于虚拟数据表111的顶端以及底端的两个占位符。具体而言，可在虚拟数据表111的顶端和底端通过HTML DOM元素定义两个占位符，以分别代表顶部隐藏区113与底部隐藏区114。

获取模块120用于获取待渲染的目标数据(例如网页中的表格数据)以及获取滚动条115的当前位置(scrollTop)，即显示区112内的滚动条115的当前位置(请容后详述)。于本申请中，虚拟数据表111中所存储的数据例如为一维数组，有鉴于此，本申请的获取模块120还包括判断待渲染的目标数据是否为树结构数据，并当判断目标数据为树结构数据时，则将目标数据递归转换为一维数组(如图2B所示)。

于其他实施例中，当显示区112所设定的显示高度和/或显示宽度为根据显示屏幕21的不同显示规格而各有不同时，获取模块120还用于识别显示屏幕21的显示规格，以供后续渲染模块140据以确定显示区112的显示高度而执行相应的渲染处理，或者提供转换模块130据以确定显示区112的显示宽度而执行相应的转换处理。

于一实施例中，数据渲染系统100还可包括监听模块150，其可用于异步监听显示区111中滚动条115，以判断滚动条115的当前位置是否发生改变，并当判断滚动条115的当前位置发生改变时，触发获取模块120获取滚动条115的当前位置。

转换模块130用于针对获取模块120所获取的目标数据执行行垂直高度转换处理，以获得各目标数据的渲染行垂直高度(top)，于本申请中，目标数据的渲染行垂直高度用于定义目标数据的所在数据行在虚拟数据表111中的绝对高度位置，转换模块130可通过遍历所有目标数据，且根据每一数据行的行高，取得当前数据行之前的所有数据行的行高并累计相加，以获得目标数据当前所在数据行的绝对高度位置(top值)。

于本申请中，转换模块130例如根据虚拟数据表111中针对显示区112所设定的显示宽度而针对目标数据执行行垂直高度转换处理，具体而言，转换模块130可通过统计待渲染的目标数据的总数量，并依据所设定的显示宽度对目标数据执行行垂直高度转换处理。

此外，本申请的目标数据可以包括不同的数据类型(例如文字类型或图片类型)，当数据类型为不同时，目标数据在虚拟数据表111中的所在数据行的渲染行高(即单个数据行的高度)可能为相同亦可能为不同，假设在不同数据类型的目标数据所对应的渲染行高为不同的情况下，本申请的设定模块110还包括提供设定单位渲染行高，并以单位渲染行高为基数，定义各数据类型的目标数据所对应的渲染行高。例如，假设单位渲染行高设定为10px，并将文字类型的目标数据的渲染行高定义为单位渲染行高的1倍，而将图片类型的目标数据的渲染行高定义为单位渲染行高的2倍，因此，文字类型的目标数据的渲染行高即为10px，图片类型的目标数据的渲染行高即为20px。需说明的是，上述的单位渲染行高的设定参数仅为示例性说明，并不以此为限，其可视依实际需求而任意变更。再者，转换模块130还用于识别待渲染的目标数据的数据类型，以自设定模块110中获取与所述数据类型所对应的渲染行高，并据以针对目标数据执行行垂直高度转换处理。

此外，转换模块130还用于累加虚拟数据表111中的单位渲染行垂直高度以计算出虚拟数据表111的总高度，亦即，在本申请中，所有待渲染的目标数据所占用的虚拟数据表111的总高度是通过遍历所有待渲染的目标数据以累计每一数据行的高度(行高)而获得，而非简单通过行高乘以行数的方式获得，因此，尤其适用于表格中每一数据行的行高存在不一致的情况，可有效提高滚动条的滚动使用体验。

请配合参阅图1、图2A及图2B，渲染模块140用于根据滚动条115的当前位置(scrollTop)以及显示区112的显示高度，计算最小显示行垂直高度(min)和最大显示行垂直高度(max)。于本实施例中，渲染模块140可将滚动条115的当前位置作为最小显示行垂直高度值(min)，并通过计算最小行垂直高度值(min)与显示区112的显示高度之和，而获得最大显示行垂直高度值(max)。

而后，渲染模块140可根据上述计算结果，提取渲染行垂直高度(top)大于等于最小显示行垂直高度且小于等于最大显示行垂直高度(即min≤top≤max)的目标数据；并提取渲染行垂直高度小于最小显示行垂直高度(即top＜min)的目标数据，并累计此范围内的各目标数据的渲染行垂直高度以生成顶部行垂直高度累计变量(headerHeight)，并将顶部行垂直高度累计变量作为顶部隐藏区113的高度值；以及提取渲染行垂直高度大于最大显示行垂直高度(即top＞max)的目标数据，并累计此范围内的各目标数据的渲染行垂直高度以生成底部行垂直高度累计变量(footerHeight)，并将底部行垂直高度累计变量作为底部隐藏区114的高度值。

如图2A所示，于本实施例中，top值介于max值和min值范围内目标数据被视为当前需要显示的目标数据(即介于数据行第1001行和数据行第1011行之间的目标数据)，因此，渲染模块140会将此部分的目标数据缓存到虚拟数据表111的显示区112内，而top值不属于上述范围内的目标数据即视为无需显示的数据，则渲染模块140会将此部分的目标数据的top值分别累计到需要渲染占位符的两个变量中(即顶部隐藏区113和底部隐藏区114)。如图所示，于本实施例中，顶部隐藏区113的高度为数据行第1001行之前的所有目标数据的高度，而底部隐藏区114的高度则为数据行第1011行之后的所有目标数据的高度，且顶部隐藏区113与底部隐藏区114的高度会随着滚动条115的当前位置的改变而变化。

再者，于其他实施例中，当渲染的目标数据属于树结构数据时，首先需要通过递归算法把树结构数据转换为一维数组，并每一数据行中保留父节点的层级信息。在得到一维数组以后，按需渲染目标数据的逻辑即与处理上述大规模数据的逻辑大致相同，亦即，计算占位符(即顶部隐藏区113和底部隐藏区114)，计算显示区112需要渲染的目标数据。不同之处在于，在计算过程中，还需要判断当前的数据节点是否被展开，如果没有，则不计入需要渲染的目标数据的数组中。此外，在渲染树节点的时候，通过数据行中所保留的父节点的层级信息，可以渲染出树结构的相对位置。

此外，为了减少对HTML DOM频繁操作，可以采用Virtual DOM的Diff算法比较数据的变化，然后再局部虚拟数据表111。

再者，本申请的数据渲染系统100还包括通过电子装置2的显示屏幕21以显示被渲染至显示区112的目标数据，并隐藏顶部隐藏区113和底部隐藏区114的部分。

于另一实施例中，渲染模块140还包括当判断虚拟数据表111的总高度大于显示区112的显示高度时，在显示区112中生成侧边栏116及滚动条115，其中，滚动条115可在侧边栏116所定义的滚动范围内滚动。此外，渲染模块140还用于渲染滚动条115相对于侧边栏116的占比大小，具体而言，渲染模块140首先将显示区112的显示高度除以虚拟数据表111的总高度以得到高度比例，再将所得到的高度比例乘以显示区112的显示高度，据以定义滚动条115相对于侧边栏116的占比大小。也就是说，仅当顶部隐藏区113和底部隐藏区114内存在需要缓存的数据时，显示区112内才出现侧边栏116与滚动条115，且待渲染的目标数据的数量越多，滚动条115相对于侧边栏116的占比就越小，反之，待渲染的目标数据的数量越少，滚动条115相对于侧边栏116的占比就越大。

请配合参阅图3，其为显示本申请的数据渲染方法的基本流程示意图。本申请的数据渲染方法主要用于针对网页中的表格数据进行渲染，其处理步骤主要包括：

首先执行步骤S31，建立虚拟数据表，并于虚拟数据表中定义显示区、顶部隐藏区、以及底部隐藏区，且针对述显示区设定显示高度，接着执行步骤S32。

于本实施例中，顶部隐藏区与底部隐藏区为分别设置于虚拟数据表的顶端以及底端的一个占位符。于另一实施例中，本步骤还可进一步设定虚拟数据表的显示宽度，于本申请中，显示区的显示高度和/或显示宽度可例如为固定参数抑或例如为可变参数，具体而言，可以根据显示屏幕的显示规格而设定与之相对应的显示区的显示高度和/或显示宽度，并当需执行数据渲染操作时，先行识别显示屏幕的显示规格，据以获取虚拟数据表中的显示区)的显示高度和/或显示宽度。

再者，本申请中待渲染的目标数据可以包括多种数据类型，其中，不同数据类型的目标数据所对应的渲染行高可以为相同抑或为不同。当不同数据类型的目标数据所对应的渲染行高为不同的情况下，本步骤还可设定单位渲染行高，并以所设定的单位渲染行高为基数，定义各数据类型的目标数据所对应的渲染行高。例如，假设单位渲染行高设定为10px，并将文字类型的目标数据的渲染行高定义为单位渲染行高的1倍，而将图片类型的目标数据的渲染行高定义为单位渲染行高的2倍，则文字类型的目标数据的渲染行高即为10px，而图片类型的目标数据的渲染行高即为20px。需说明的是，上述的单位渲染行高的设定参数仅为示例性说明，其可视依实际需求而任意变更。

于步骤S32中，获取待渲染的目标数据，并针对目标数据执行行垂直高度转换处理，以获得各目标数据的渲染行垂直高度(top)，其中，渲染行垂直高度用于定义目标数据的所在数据行在虚拟数据表111中的绝对高度位置，接着执行步骤S33。

于本实施例中，待渲染的目标数据为一维数组，有鉴于此，本步骤还可包括判断目标数据是否为树结构数据，并当判断目标数据为树结构数据时，将目标数据递归转换为一维数组。

此外，针对目标数据所执行的行垂直高度转换处理可包括多种方式，例如，可通过获取待渲染的目标数据的总数量，并依据步骤31中所设定的显示宽度，对目标数据执行行垂直高度转换处理。于另一实施例中，可以通过识别待渲染的目标数据的数据类型(文字类型或图片类型)，以获取与数据类型所对应的渲染行高，并据以针对目标数据执行行垂直高度转换处理。需说明的是，于实际应用中，上述不同的行垂直高度转换处理方式可同时执行抑或单独执行，视依实际需求而定。

于步骤S33中，获取滚动条的当前位置，并根据显示区的显示高度，计算最小显示行垂直高度(min)和最大显示行垂直高度(max)，于本实施例中，可通过将滚动条的当前位置作为最小显示行垂直高度值(min)，并计算最小行垂直高度值(min)与显示区的显示高度之和，以获得最大显示行垂直高度值(max)。再者，本步骤还可包括异步监听滚动条，以判断滚动条的当前位置是否发生改变，并当判断滚动条的当前位置发生改变时即获取其当前最新的位置，接着执行步骤S34。

于步骤S34中，判断目标数据的渲染行垂直高度(top)是否大于等于最小显示行垂直高度(min)且小于等于最大显示行垂直高度(max)(即min≤top≤max)，若是，则进行步骤S35，若否则进行步骤S36。

于步骤S35中，提取渲染行垂直高度大于等于最小显示行垂直高度且小于等于最大显示行垂直高度(即min≤top≤max？)的目标数据，并将此范围内的目标数据渲染至虚拟数据表的显示区中(参考图2A或图2B)。其中，被渲染至显示区的目标数据可在后续通过电子装置的显示屏幕予以显示，以最终呈现给用户。

于步骤S36中，判断目标数据的渲染行垂直高度是否大于最大显示行垂直高度(即top＞max？)，若是，则执行步骤S37，否则，执行步骤S38。

于步骤S37中，提取渲染行垂直高度大于最大显示行垂直高度(即top＞max)的目标数据，并累计此范围内的各目标数据的渲染行垂直高度以生成底部行垂直高度累计变量(footerHeight)，并将底部行垂直高度累计变量(footerHeight)作为底部隐藏区的高度值。

于步骤S38中，提取剩余的目标数据，亦即，渲染行垂直高度小于最小显示行垂直高度(即top＜min)的目标数据，并累计此范围内的各目标数据的渲染行垂直高度以生成顶部行垂直高度累计变量(headerHeight)，并将顶部行垂直高度累计变量(headerHeight)作为顶部隐藏区的高度值。

其中，上述步骤S37和步骤S38中顶部隐藏区和底部隐藏区内的缓存数据将不会在电子装置的显示屏幕予以显示，并顶部隐藏区和底部隐藏区为两个变量，用于在虚拟数据表中代替无需显示部分的目标数据的高度，此设计可以模拟出真实的滚动条位置，以提供使用者更好的操作体验。

再者，于其他实施例中，本申请所提供的数据渲染方法还包括渲染滚动条的处理步骤，具体而言，本申请的方法还包括：累加虚拟数据表中的单位渲染行垂直高度，以计算虚拟数据表的总高度，并当判断虚拟数据表的总高度大于显示区的显示高度时，即在虚拟数据表的显示区中生成侧边栏及滚动条(参考图2A及图2B)，也就是说，仅当顶部隐藏区和底部隐藏区内存在需要缓存的数据时，显示区内才出现侧边栏与滚动条，且滚动条可在侧边栏所定义的滚动范围内滚动。

此外，本申请的数据渲染方法还可针对滚动条相对于侧边栏的占比大小进行渲染，其具体包括：首先，将显示区的显示高度除以虚拟数据表的总高度以得到高度比例，而后，再将所计算出的高度比例乘以显示区的显示高度，借以定义出滚动条相对于侧边栏的占比大小。例如，当待渲染的目标数据的数量越多时，滚动条115相对于侧边栏116的占比就越小，反之，当待渲染的目标数据的数量越少，滚动条115相对于侧边栏116的占比就越大。

此外，本申请还一种电子设备，其内存储有数据渲染处理程序，其中，当电子设备载入所述数据渲染处理程序并执行后，可完成上述的数据渲染方法。

综上所述，本申请可以实现按需渲染目标数据，可以减少大量DOM树的渲染，降低网页处理资源的消耗，以避免或缓解网页卡顿现象。

再者，本申请通过遍历所有待渲染的目标数据以累计每一行的高度，而获得虚拟数据表的总高度，因此，可适应表格在使用过程中存在的行高不一致的情况，并提升数据的渲染效果。

另外，本申请通过设置两个占位符以代替无需显示部分的目标数据的高度，可以模拟出真实的滚动条位置，让滚动的体验更好。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理模块，即可以位于一个地方，或者也可以分布到多个网络模块上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，所述计算机可读记录介质包括用于以计算机(例如计算机)可读的形式存储或传送信息的任何机制。例如，机器可读介质包括只读存储器(ROM)、随机存取存储器(RAM)、磁盘存储介质、光存储介质、闪速存储介质、电、光、声或其他形式的传播信号(例如，载波、红外信号、数字信号等)等，该计算机软件产品包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

本领域的技术人员应明白，本发明实施例的实施例可提供为方法、装置(设备)、或计算机程序产品。因此，本发明实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明实施例是参照根据本发明实施例的方法、装置(设备)和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

最后应说明的是：以上实施例仅用以说明本申请实施例的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。

Claims (25)

1.一种数据渲染方法，用于针对网页中的表格数据进行渲染，其特征在于，包括：

建立虚拟数据表，并于所述虚拟数据表中定义显示区、顶部隐藏区、以及底部隐藏区，且针对所述显示区设定显示高度；

获取待渲染的目标数据，并针对所述目标数据执行行垂直高度转换处理，以获得各所述目标数据的渲染行垂直高度，其中，所述渲染行垂直高度用于定义所述目标数据的所在数据行在所述虚拟数据表中的绝对高度位置；

获取滚动条的当前位置，并根据所述显示区的所述显示高度，计算最小显示行垂直高度和最大显示行垂直高度；以及

提取所述渲染行垂直高度大于等于所述最小显示行垂直高度且小于等于所述最大显示行垂直高度的所述目标数据，并将所述目标数据渲染至所述显示区中；提取所述渲染行垂直高度小于所述最小显示行垂直高度的所述目标数据，并累计各所述目标数据的所述渲染行垂直高度以生成顶部行垂直高度累计变量，并将所述顶部行垂直高度累计变量作为所述顶部隐藏区的高度值；提取所述渲染行垂直高度大于所述最大显示行垂直高度的所述目标数据，并累计各所述目标数据的所述渲染行垂直高度以生成底部行垂直高度累计变量，并将所述底部行垂直高度累计变量作为所述底部隐藏区的高度值。

2.根据权利要求1所述的数据渲染方法，其特征在于，所述方法还包括借由显示屏幕显示被渲染至所述显示区的所述目标数据。

3.根据权利要求2所述的数据渲染方法，其特征在于，所述方法还包括：

设定所述虚拟数据表的显示宽度，其中，所述显示宽度用于定义所述虚拟数据表中的各数据行可显示的所述目标数据的数量；以及

获取所述目标数据的总数量，并依据所述显示宽度对所述目标数据执行所述行垂直高度转换处理。

4.根据权利要求3所述的数据渲染方法，其特征在于，所述显示区的所述显示高度和/或所述显示宽度为固定参数。

5.根据权利要求3所述的数据渲染方法，其特征在于，所述显示区的所述显示高度和/或所述显示宽度为可变参数，且所述方法还包括：

设定与所述显示屏幕的显示规格相对应的所述显示区的所述显示高度和/或所述显示宽度；以及

识别所述显示屏幕的显示规格，据以获取所述显示区的所述显示高度和/或所述显示宽度。

6.根据权利要求1所述数据渲染方法，其特征在于，所述目标数据包括多种数据类型，且不同数据类型的所述目标数据对应的渲染行高为不同，所述方法还包括：

设定单位渲染行高，并以所述单位渲染行高为基数，定义各所述数据类型的所述目标数据所对应的所述渲染行高；以及

识别所述目标数据的所述数据类型，以获取与所述数据类型所对应的所述渲染行高，并据以针对所述目标数据执行所述行垂直高度转换处理。

7.根据权利要求6所述的数据渲染方法，其特征在于，所述方法还包括：

累加所述虚拟数据表中的所述单位渲染行垂直高度，以计算所述虚拟数据表的总高度。

8.根据权利要求7所述的数据渲染方法，其特征在于，当所述虚拟数据表的总高度大于所述显示区的显示高度时，可在所述显示区中生成侧边栏及所述滚动条，其中，所述滚动条在所述侧边栏所定义的滚动范围内滚动，且所述方法还包括：

渲染所述滚动条相对于所述侧边栏的占比大小，通过将所述显示区的所述显示高度除以所述虚拟数据表的总高度以得到高度比例，再将所述高度比例乘以所述显示区的所述显示高度，以定义所述滚动条相对于所述侧边栏的占比大小。

9.根据权利要求1所述的数据渲染方法，其特征在于，所述方法还包括：

将所述滚动条的所述当前位置作为所述最小显示行垂直高度值；以及

计算所述最小行垂直高度值与所述显示区的所述显示高度之和，以获得所述最大显示行垂直高度值。

10.根据权利要求1所述的数据渲染方法，其特征在于，所述目标数据为一维数组，且所述方法还包括：

判断所述目标数据是否为树结构数据；以及

当判断所述目标数据为树结构数据时，将所述目标数据递归转换为一维数组。

11.根据权利要求1所述的数据渲染方法，其特征在于，所述方法还包括：

异步监听所述滚动条，以判断所述滚动条的所述当前位置是否发生改变。

12.根据权利要求11所述的数据渲染方法，其特征在于，所述顶部隐藏区与所述底部隐藏区为分别设置于所述虚拟数据表的顶端以及底端的一个占位符，且所述顶部隐藏区与所述底部隐藏区的高度随着所述滚动条的所述当前位置的改变而变化。

13.一种数据渲染系统，用于针对网页中的表格数据进行渲染，其特征在于，包括：

设定模块，其用于建立虚拟数据表，其中，所述虚拟数据表中定义有预设有显示高度的显示区、顶部隐藏区、和底部隐藏区；

获取模块，其用于获取待渲染的目标数据，以及用于获取滚动条的当前位置；

转换模块，其用于针对所述目标数据执行行垂直高度转换处理，以获得各所述目标数据的渲染行垂直高度，其中，所述渲染行垂直高度用于定义所述目标数据的所在数据行在所述虚拟数据表中的绝对高度位置；以及

渲染模块，其用于根据所述滚动条的所述当前位置以及所述显示区的所述显示高度，计算最小显示行垂直高度和最大显示行垂直高度，并提取所述渲染行垂直高度大于等于所述最小显示行垂直高度且小于等于所述最大显示行垂直高度的所述目标数据，并将所述目标数据渲染至所述显示区中；提取所述渲染行垂直高度小于所述最小显示行垂直高度的所述目标数据，并累计各所述目标数据的所述渲染行垂直高度以生成顶部行垂直高度累计变量，并将所述顶部行垂直高度累计变量作为所述顶部隐藏区的高度值；提取所述渲染行垂直高度大于所述最大显示行垂直高度的所述目标数据，并累计各所述目标数据的所述渲染行垂直高度以生成底部行垂直高度累计变量，并将所述底部行垂直高度累计变量作为所述底部隐藏区的高度值。

14.根据权利要求13所述的数据渲染系统，其特征在于，所述数据渲染系统还包括显示屏幕，其用于显示被渲染至所述显示区的所述目标数据。

15.根据权利要求14所述的数据渲染系统，其特征在于，

所述设定模块还包括设定所述虚拟数据表的显示宽度，其中，所述显示宽度用于定义所述虚拟数据表中的各数据行可显示的所述目标数据的数量；

所述转换模块还包括统计所述目标数据的总数量，并依据所述显示宽度对所述目标数据执行所述行垂直高度转换处理。

16.根据权利要求15所述的数据渲染系统，其特征在于，所述显示区的所述显示高度和/或所述显示宽度为固定参数。

17.根据权利要求15所述的数据渲染系统，其特征在于，所述显示区的所述显示高度和/或所述显示宽度为可变参数，且其中：

所述设定模块还包括设定与所述显示屏幕的显示规格相对应的所述显示区的所述显示高度和/或所述显示宽度；

所述获取模块还包括识别所述显示屏幕的显示规格，以提供所述渲染模块确定所述显示区的所述显示高度和/或提供所述转换模块确定所述显示区的所述显示宽度。

18.根据权利要求13所述的数据渲染系统，其特征在于，所述目标数据包括多种数据类型，且不同所述数据类型的所述目标数据对应的渲染行高为不同，且其中：

所述设定模块还包括设定单位渲染行高，并以所述单位渲染行高为基数，定义各所述数据类型的所述目标数据所对应的所述渲染行高；

所述转换模块还包括识别所述目标数据的所述数据类型，以获取与所述数据类型所对应的所述渲染行高，并据以针对所述目标数据执行所述行垂直高度转换处理。

19.根据权利要求18所述的数据渲染系统，其特征在于，所述转换模块还包括累加所述虚拟数据表中的所述单位渲染行垂直高度，以计算所述虚拟数据表的总高度。

20.根据权利要求18所述的数据渲染系统，其特征在于，所述渲染模块还包括：

当判断所述虚拟数据表的总高度大于所述显示区的显示高度时，在所述显示区中生成侧边栏及所述滚动条，且所述滚动条在所述侧边栏所定义的滚动范围内滚动；以及

渲染所述滚动条相对于所述侧边栏的占比大小，通过将所述显示区的所述显示高度除以所述虚拟数据表的总高度以得到高度比例，再将所述高度比例乘以所述显示区的所述显示高度，以定义所述滚动条相对于所述侧边栏的占比大小。

21.根据权利要求13所述的数据渲染系统，其特征在于，所述渲染模块还包括将所述滚动条的所述当前位置作为所述最小显示行垂直高度值，并通过计算所述最小行垂直高度值与所述显示区的所述显示高度之和，而获得所述最大显示行垂直高度值。

22.根据权利要求13所述的数据渲染系统，其特征在于，所述获取模块还包括判断所获取的所述目标数据是否为树结构数据，并当判断所述目标数据为树结构数据时，将所述目标数据递归转换为一维数组。

23.根据权利要求13所述的数据渲染系统，其特征在于，所述系统还包括监听模块，其用于异步监听所述滚动条，以判断所述滚动条的所述当前位置是否发生改变，并当判断所述滚动条的所述当前位置发生改变时，触发所述获取模块获取所述滚动条的所述当前位置。

24.根据权利要求23所述的数据渲染系统，其特征在于，所述顶部隐藏区与所述底部隐藏区为分别设置于所述虚拟数据表的顶端以及底端的占位符，且所述顶部隐藏区与所述底部隐藏区的高度随着所述滚动条的所述当前位置的改变而变化。

25.一种电子设备，其内存储有数据渲染处理程序，其中，当所述电子设备载入所述数据渲染处理程序并执行后，完成如权利要求1至12项中任一项所述的数据渲染方法。

Images