[發(fā)明專利]基于JS的數(shù)據(jù)渲染方法及裝置

在審

• 申請(qǐng)?zhí)枺?/td>: 202010914892.1
• 申請(qǐng)日: 2020-09-03
• 公開(kāi)（公告）號(hào): CN112068834A
• 公開(kāi)（公告）日: 2020-12-11
• 發(fā)明（設(shè)計(jì)）人: 劉文旭;袁海;聶富強(qiáng);涂庭銀;耿明;龔徐建;沈輝
• 申請(qǐng)（專利權(quán)）人: 杭州天寬科技有限公司
• 主分類號(hào): G06F8/38
• 分類號(hào): G06F8/38;G06F16/248;G06F16/25;G06F16/957;G06F16/958
• 代理公司: 杭州裕陽(yáng)聯(lián)合專利代理有限公司 33289
• 代理人: 田金霞

本發(fā)明公開(kāi)了一種基于JS的數(shù)據(jù)渲染方法及裝置，該方法包含：獲取需要展示的總數(shù)據(jù)；在web頁(yè)面中生成一個(gè)盒子容器；在盒子容器內(nèi)部設(shè)定一個(gè)可視區(qū)域和一個(gè)滾動(dòng)條；設(shè)定盒子容器的高度以及滾動(dòng)條的真實(shí)高度；設(shè)定可視區(qū)域的顯示數(shù)據(jù)的開(kāi)始值和終止值；設(shè)定可視區(qū)域的預(yù)保留值和預(yù)渲染值；根據(jù)開(kāi)始值、終止值、預(yù)保留至和預(yù)渲染值從總數(shù)據(jù)中截取對(duì)應(yīng)的數(shù)據(jù)；對(duì)截取的數(shù)據(jù)進(jìn)行渲染；通過(guò)可視區(qū)域顯示渲染后的位于開(kāi)始值和終止值之間的數(shù)據(jù)。本發(fā)明的基于JS的數(shù)據(jù)渲染方法及裝置，解決了海量數(shù)據(jù)渲染時(shí)，頁(yè)面結(jié)構(gòu)中出現(xiàn)大量DOM節(jié)點(diǎn)對(duì)頁(yè)面展示及滑動(dòng)時(shí)造成的卡頓，減少了數(shù)據(jù)從請(qǐng)求到展示出的時(shí)間，優(yōu)化了用戶體驗(yàn)。

技術(shù)領(lǐng)域

本發(fā)明涉及一種基于JS的數(shù)據(jù)渲染方法及裝置。

背景技術(shù)

在PC或移動(dòng)設(shè)備的web頁(yè)面中，經(jīng)常會(huì)出現(xiàn)一種獲取的數(shù)據(jù)條數(shù)很多，并且需要展示到對(duì)應(yīng)的表格或列表中的需求。目前現(xiàn)有市場(chǎng)上的解決方案為通過(guò)對(duì)數(shù)據(jù)進(jìn)行循環(huán)處理后統(tǒng)一渲染到頁(yè)面中，對(duì)應(yīng)的現(xiàn)象為渲染及等待時(shí)間過(guò)長(zhǎng)，滑動(dòng)的時(shí)候不順暢，在頁(yè)面結(jié)構(gòu)中添加了大量的DOM節(jié)點(diǎn)，造成頁(yè)面運(yùn)行不暢，極度影響用戶感官和體驗(yàn)。

發(fā)明內(nèi)容

本發(fā)明提供了一種基于JS的數(shù)據(jù)渲染方法及裝置，采用如下的技術(shù)方案：

一種基于JS的數(shù)據(jù)渲染方法，包含以下步驟：

從數(shù)據(jù)庫(kù)中獲取需要展示的總數(shù)據(jù)；

在web頁(yè)面中生成一個(gè)用于存放渲染表格的固定大小的盒子容器；

在盒子容器內(nèi)部設(shè)定一個(gè)用于顯示渲染數(shù)據(jù)的可視區(qū)域和一個(gè)用于滾動(dòng)數(shù)據(jù)且能夠指示當(dāng)前顯示的數(shù)據(jù)占據(jù)總數(shù)據(jù)的位置的滾動(dòng)條；

設(shè)定盒子容器的高度以及滾動(dòng)條的真實(shí)高度；

設(shè)定可視區(qū)域的顯示數(shù)據(jù)的開(kāi)始值和終止值；

設(shè)定可視區(qū)域的預(yù)保留值和預(yù)渲染值；

根據(jù)開(kāi)始值、終止值、預(yù)保留至和預(yù)渲染值從總數(shù)據(jù)中截取對(duì)應(yīng)的數(shù)據(jù)；

對(duì)截取的數(shù)據(jù)進(jìn)行渲染；

通過(guò)可視區(qū)域顯示渲染后的位于開(kāi)始值和終止值之間的數(shù)據(jù)。

進(jìn)一步地，設(shè)定盒子容器的高度以及滾動(dòng)條的真實(shí)高度的具體方法為：

獲取總數(shù)據(jù)的總條數(shù)；

設(shè)定每條數(shù)據(jù)的高度和可視區(qū)域需要顯示的數(shù)據(jù)的條數(shù)；

計(jì)算每條數(shù)據(jù)的高度和可視區(qū)域需要顯示的數(shù)據(jù)的條數(shù)的乘積，并將計(jì)算結(jié)果設(shè)定為盒子容器的高度；

計(jì)算總數(shù)據(jù)的總條數(shù)與每條數(shù)據(jù)的高度的乘積，并將計(jì)算結(jié)果設(shè)定滾動(dòng)條的真實(shí)高度。

進(jìn)一步地，預(yù)保留值小于等于預(yù)保留值。

進(jìn)一步地，預(yù)保留值等于預(yù)保留值。

進(jìn)一步地，預(yù)保留值和預(yù)渲染值大于等于可視區(qū)域需要顯示的數(shù)據(jù)的條數(shù)。

進(jìn)一步地，開(kāi)始值的默認(rèn)值為0；

終止值的默認(rèn)值等于可視區(qū)域需要顯示的數(shù)據(jù)的條數(shù)。

進(jìn)一步地，基于JS的數(shù)據(jù)渲染方法還包括：

將可視區(qū)域和盒子容器進(jìn)行相對(duì)定位。

一種基于JS的數(shù)據(jù)渲染裝置，包括：

數(shù)據(jù)庫(kù)，用于存儲(chǔ)數(shù)據(jù)；

數(shù)據(jù)獲取模塊，用于從數(shù)據(jù)庫(kù)中獲取需要展示的總數(shù)據(jù)；

生成模塊，用于在web頁(yè)面中生成一個(gè)用于存放渲染表格的固定大小的盒子容器；