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

权利要求书

1.一种基于JS的数据渲染方法，其特征在于，包含以下步骤：

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

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

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

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

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

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

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

对截取的数据进行渲染；

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

2.根据权利要求1所述的基于JS的数据渲染方法，其特征在于，

所述设定所述盒子容器的高度以及所述滚动条的真实高度的具体方法为：

获取总数据的总条数；

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

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

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

3.根据权利要求2所述的基于JS的数据渲染方法，其特征在于，

所述预保留值小于等于所述预保留值。

4.根据权利要求3所述的基于JS的数据渲染方法，其特征在于，

所述预保留值等于所述预保留值。

5.根据权利要求4所述的基于JS的数据渲染方法，其特征在于，

所述预保留值和所述预渲染值大于等于所述可视区域需要显示的数据的条数。

6.根据权利要求1所述的基于JS的数据渲染方法，其特征在于，

所述开始值的默认值为0；

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

7.根据权利要求1所述的基于JS的数据渲染方法，其特征在于，

所述基于JS的数据渲染方法还包括：

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

8.一种基于JS的数据渲染装置，其特征在于，包括：

数据库，用于存储数据；

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

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

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

第二设定模块，用于设定所述盒子容器的高度以及所述滚动条的真实高度；

第三设定模块，用于设定所述可视区域的显示数据的开始值和终止值；

第四设定模块，用于设定所述可视区域的预保留值和预渲染值；

数据截取模块，用于根据所述开始值、所述终止值、所述预保留至和所述预渲染值从总数据中截取对应的数据；

数据渲染模块，用于对截取的数据进行渲染；

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

9.根据权利要求8所述的基于JS的数据渲染装置，其特征在于，

所述第二设定模块包括：

获取子模块，用于获取总数据的总条数；

第一设定子模块，用于设定每条数据的高度和所述可视区域需要显示的数据的条数；

第一计算子模块，用于计算每条数据的高度和所述可视区域需要显示的数据的条数的乘积；

第二设定子模块，用于将所述第一计算子模块计算得到的结果设定为所述盒子容器的高度；

第二计算子模块，用于计算总数据的总条数与每条数据的高度的乘积；

第三设定子模块，用于将所述第二计算子模块计算得到的结果设定为所述滚动条的真实高度。

10.根据权利要求9所述的基于JS的数据渲染装置，其特征在于，

所述基于JS的提高海量数据表格渲染性能的装置还包括:

定位模块，用于将所述可视区域和所述盒子容器进行相对定位。