基于JS的数据渲染方法及装置制造方法及图纸

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

【技术实现步骤摘要】
基于JS的数据渲染方法及装置
本专利技术涉及一种基于JS的数据渲染方法及装置。
技术介绍
在PC或移动设备的web页面中，经常会出现一种获取的数据条数很多，并且需要展示到对应的表格或列表中的需求。目前现有市场上的解决方案为通过对数据进行循环处理后统一渲染到页面中，对应的现象为渲染及等待时间过长，滑动的时候不顺畅，在页面结构中添加了大量的DOM节点，造成页面运行不畅，极度影响用户感官和体验。
技术实现思路
本专利技术提供了一种基于JS的数据渲染方法及装置，采用如下的技术方案：一种基于JS的数据渲染方法，包含以下步骤：从数据库中获取需要展示的总数据；在web页面中生成一个用于存放渲染表格的固定大小的盒子容器；在盒子容器内部设定一个用于显示渲染数据的可视区域和一个用于滚动数据且能够指示当前显示的数据占据总数据的位置的滚动条；设定盒子容器的高度以及滚动条的真实高度；设定可视区域的显示数据的开始值和终止值；设定可视区域的预保留值和预渲染值；根据开始值、终止值、预保留至和预本文档来自技高网...

【技术保护点】
1.一种基于JS的数据渲染方法，其特征在于，包含以下步骤：/n从数据库中获取需要展示的总数据；/n在web页面中生成一个用于存放渲染表格的固定大小的盒子容器；/n在所述盒子容器内部设定一个用于显示渲染数据的可视区域和一个用于滚动数据且能够指示当前显示的数据占据总数据的位置的滚动条；/n设定所述盒子容器的高度以及所述滚动条的真实高度；/n设定所述可视区域的显示数据的开始值和终止值；/n设定所述可视区域的预保留值和预渲染值；/n根据所述开始值、所述终止值、所述预保留至和所述预渲染值从总数据中截取对应的数据；/n对截取的数据进行渲染；/n通过所述可视区域显示渲染后的位于所述开始值和所述终止值之间的数...

【技术特征摘要】
1.一种基于JS的数据渲染方法，其特征在于，包含以下步骤：
从数据库中获取需要展示的总数据；
在web页面中生成一个用于存放渲染表格的固定大小的盒子容器；
在所述盒子容器内部设定一个用于显示渲染数据的可视区域和一个用于滚动数据且能够指示当前显示的数据占据总数据的位置的滚动条；
设定所述盒子容器的高度以及所述滚动条的真实高度；
设定所述可视区域的显示数据的开始值和终止值；
设定所述可视区域的预保留值和预渲染值；
根据所述开始值、所述终止值、所述预保留至和所述预渲染值从总数据中截取对应的数据；
对截取的数据进行渲染；
通过所述可视区域显示渲染后的位于所述开始值和所述终止值之间的数据。


2.根据权利要求1所述的基于JS的数据渲染方法，其特征在于，
所述设定所述盒子容器的高度以及所述滚动条的真实高度的具体方法为：
获取总数据的总条数；
设定每条数据的高度和所述可视区域需要显示的数据的条数；
计算每条数据的高度和所述可视区域需要显示的数据的条数的乘积，并将计算结果设定为所述盒子容器的高度；
计算总数据的总条数与每条数据的高度的乘积，并将计算结果设定所述滚动条的真实高度。


3.根据权利要求2所述的基于JS的数据渲染方法，其特征在于，
所述预保留值小于等于所述预保留值。


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


5.根据权利要求4所述的基于JS的数据渲染方法，其特征在于，
所述预保留值和所述预渲染值大于等于所述可视区域需要显示的数据的条数。


6.根据权利要求1所述的基于JS的数据渲染方法，其特征在于，
所述开始值的默认值为0；
所述终止值的默认值等于所述可视区域需要显示的数据的条数。


7.根据权利要求1所述的基于JS的数...

【专利技术属性】
技术研发人员：刘文旭，袁海，聂富强，涂庭银，耿明，龚徐建，沈辉，
申请(专利权)人：杭州天宽科技有限公司，
类型：发明
国别省市：浙江;33