[发明专利]基于JS的数据渲染方法及装置

说明书

本发明公开了一种基于JS的数据渲染方法及装置，该方法包含：获取需要展示的总数据；在web页面中生成一个盒子容器；在盒子容器内部设定一个可视区域和一个滚动条；设定盒子容器的高度以及滚动条的真实高度；设定可视区域的显示数据的开始值和终止值；设定可视区域的预保留值和预渲染值；根据开始值、终止值、预保留至和预渲染值从总数据中截取对应的数据；对截取的数据进行渲染；通过可视区域显示渲染后的位于开始值和终止值之间的数据。本发明的基于JS的数据渲染方法及装置，解决了海量数据渲染时，页面结构中出现大量DOM节点对页面展示及滑动时造成的卡顿，减少了数据从请求到展示出的时间，优化了用户体验。

技术领域

本发明涉及一种基于JS的数据渲染方法及装置。

背景技术

在PC或移动设备的web页面中，经常会出现一种获取的数据条数很多，并且需要展示到对应的表格或列表中的需求。目前现有市场上的解决方案为通过对数据进行循环处理后统一渲染到页面中，对应的现象为渲染及等待时间过长，滑动的时候不顺畅，在页面结构中添加了大量的DOM节点，造成页面运行不畅，极度影响用户感官和体验。

发明内容

本发明提供了一种基于JS的数据渲染方法及装置，采用如下的技术方案：

一种基于JS的数据渲染方法，包含以下步骤：

从数据库中获取需要展示的总数据；

在web页面中生成一个用于存放渲染表格的固定大小的盒子容器；

在盒子容器内部设定一个用于显示渲染数据的可视区域和一个用于滚动数据且能够指示当前显示的数据占据总数据的位置的滚动条；

设定盒子容器的高度以及滚动条的真实高度；

设定可视区域的显示数据的开始值和终止值；

设定可视区域的预保留值和预渲染值；

根据开始值、终止值、预保留至和预渲染值从总数据中截取对应的数据；

对截取的数据进行渲染；

通过可视区域显示渲染后的位于开始值和终止值之间的数据。

进一步地，设定盒子容器的高度以及滚动条的真实高度的具体方法为：

获取总数据的总条数；

设定每条数据的高度和可视区域需要显示的数据的条数；

计算每条数据的高度和可视区域需要显示的数据的条数的乘积，并将计算结果设定为盒子容器的高度；

计算总数据的总条数与每条数据的高度的乘积，并将计算结果设定滚动条的真实高度。

进一步地，预保留值小于等于预保留值。

进一步地，预保留值等于预保留值。

进一步地，预保留值和预渲染值大于等于可视区域需要显示的数据的条数。

进一步地，开始值的默认值为0；

终止值的默认值等于可视区域需要显示的数据的条数。

进一步地，基于JS的数据渲染方法还包括：

将可视区域和盒子容器进行相对定位。

一种基于JS的数据渲染装置，包括：

数据库，用于存储数据；

数据获取模块，用于从数据库中获取需要展示的总数据；

生成模块，用于在web页面中生成一个用于存放渲染表格的固定大小的盒子容器；