CN106933931A - 一种网页数据的显示方法及装置 - Google Patents

一种网页数据的显示方法及装置 Download PDF

Info

Publication number
CN106933931A
CN106933931A CN201511033030.3A CN201511033030A CN106933931A CN 106933931 A CN106933931 A CN 106933931A CN 201511033030 A CN201511033030 A CN 201511033030A CN 106933931 A CN106933931 A CN 106933931A
Authority
CN
China
Prior art keywords
data
display
control
web
display field
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201511033030.3A
Other languages
English (en)
Inventor
谢小明
覃振洲
郑显伟
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Yuanguang Software Co Ltd
Original Assignee
Yuanguang Software Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Yuanguang Software Co Ltd filed Critical Yuanguang Software Co Ltd
Priority to CN201511033030.3A priority Critical patent/CN106933931A/zh
Publication of CN106933931A publication Critical patent/CN106933931A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Digital Computer Display Output (AREA)

Abstract

本发明涉及一种网页数据的显示方法，其包括以下步骤：步骤1：编写网页控件时，构造容纳数据用的数据结构，通过该数据结构将数据保存在后台；步骤2：设置数据显示区，在所述数据显示区域中构造对应的DOM元素，在后台的数据结构中将对应的数据输出至数据显示区中；步骤3：在数据显示区中创建滚动条，通过滚动条控制数据显示区中数据的滚动更新，每当滚动一行数据，则从后台数据结构中传输一行新的数据至数据显示区。本发明还提供了一种用于实现上述方法的网页数据的显示装置。

Description

一种网页数据的显示方法及装置
技术领域
本发明涉及一种数据显示方法，特别是一种网页数据的显示方法；本发明还涉及一种用于实现上述方法的显示装置。
背景技术
在网页制作上，为了方便制作，一般会编写一些控件如列表控件、树控件、表格控件等，但是由于网页的脚本语言是解释性语言，因此性能上比其它语言(如C++、Java等)要差。另外在HTML中，因DOM元素本身的复杂性，其所占用的计算机内存资源较大。这里的DOM元素是指HTML语言中的标签对象，比如<TABLE>、<DIV>等网页用来展示数据的载体(下同)。而目前业界这些控件实现思路都是直接用DOM元素来绘制所有的数据，导致控件所容纳的数据量受到很大的限制。
而目前网页应用越来越普遍，对应的javascript、HTML及CSS创建出来的控件体系越来越多，其控件展示的数据量一般只能展示到一两千条左右，超过这个数据量则会导致计算机内存资源不足的问题。
发明内容
本发明在于克服现有技术的缺点与不足，提供一种能够提高数据展示量的网页数据显示方法及装置。
本发明是通过以下的技术方案实现的：一种网页数据的显示方法，其包括以下步骤：
步骤1：编写网页控件时，构造容纳数据用的数据结构，通过该数据结构将数据保存在后台；
步骤2：设置数据显示区，在所述数据显示区域中构造对应的DOM元素，在后台的数据结构中将对应的数据输出至数据显示区中；
步骤3：在数据显示区中创建滚动条，通过滚动条控制数据显示区中数据的滚动更新，每当滚动一行数据，则从后台数据结构中传输一行新的数据至数据显示区。
相比于现有技术，本发明通过将数据保存在后台中，仅仅在显示区域中将数据进行传输，避免了现有技术中需要全部传输完数据后，再进行显示。同时，由于前端的数据显示区中仅仅需要加载显示区中的数据，因此不用等全部数据加载完成后再显示，这样既可以加大显示数据的量，不受到数据数量的限制，同时也可以提高显示的速度。
作为本发明的进一步改进，所述网页控件为列表控件，相应构造数组的数据结构。
作为本发明的另一种改进，所述网页控件为树控件，相应构造tree数据结构。
作为本发明的另一种改进，所述网页控件为表格控件，相应构造list数据结构。
作为本发明的进一步改进，在步骤2中，所述数据显示区设置为列表形式。
一种网页数据的显示装置，其包括
数据结构构造单元，用于在编写网页控件时，构造容纳数据用的数据结构，通过该数据结构将数据保存在后台；
数据显示单元，用于设置数据显示区，在所述数据显示区域中构造对应的DOM元素，在后台的数据结构中将对应的数据输出至数据显示区中；
数据更新单元，用于在数据显示区中创建滚动条，通过滚动条控制数据显示区中数据的滚动更新，每当滚动一行数据，则从后台数据结构中传输一行新的数据至数据显示区。
作为本发明的进一步改进，所述网页控件为列表控件，相应构造数组的数据结构。
作为本发明的另一种改进，所述网页控件为树控件，相应构造tree数据结构。
作为本发明的另一种改进，所述网页控件为表格控件，相应构造list数据结构。
作为本发明的进一步改进，所述数据显示区设置为列表形式。
为了更好地理解和实施，下面结合附图详细说明本发明。
附图说明
图1是本发明的网页数据显示方法的步骤流程图。
图2是本发明的网页数据显示装置的连接框图。
图3是本发明的网页数据的显示界面示意图。
具体实施方式
为了解决现有技术中在显示大量数据时，会同时占用计算机的内存，本发明提供了一种能够提高数据展示量的网页数据显示方法及装置。
请参阅图1，其为本发明的网页数据显示方法的步骤流程图。
本发明提供了一种网页数据的显示方法，其包括以下步骤：
步骤S1：编写网页控件时，构造容纳数据用的数据结构，通过该数据结构将数据保存在后台。
在本步骤S1中，所述网页控件可以是列表控件、树控件、表格控件，以及表格树控件。
当所述网页控件为列表控件，直接用数组对象Array存储数据。
当所述网页控件为树控件，相应构造容纳数据用tree数据结构。
当所述网页控件为表格控件，构造容纳数据用的List数据结构。
当所述网页控件为表格树控件，构造容纳数据用的treeList数据结构。
步骤S2：设置数据显示区，在所述数据显示区域中构造对应的DOM元素，在后台的数据结构中将对应的数据输出至数据显示区中。
在本步骤2中，所述数据显示区设置为列表形式。
步骤S3：在数据显示区中创建滚动条，通过滚动条控制数据显示区中数据的滚动更新，每当滚动一行数据，则从后台数据结构中传输一行新的数据至数据显示区。
本发明通过将数据保存在后台中，仅仅在显示区域中将数据进行传输，避免了现有技术中需要全部传输完数据后，再进行显示。同时，由于前端的数据显示区中仅仅需要加载显示区中的数据，因此不用等全部数据加载完成后再显示，这样既可以加大显示数据的量，不受到数据数量的限制，同时也可以提高显示的速度。
为了实现上述显示方法，本发明还提供了一种网页数据的显示装置，其包括数据结构构造单元1、数据显示单元2和数据更新单元3。
所述数据结构构造单元1，用于在编写网页控件时，构造容纳数据用的数据结构，通过该数据结构将数据保存在后台。
所述数据显示单元2，用于设置数据显示区，在所述数据显示区域中构造对应的DOM元素，在后台的数据结构中将对应的数据输出至数据显示区中。具体的，所述数据显示区设置为列表形式。
所述数据更新单元3，用于在数据显示区中创建滚动条，通过滚动条控制数据显示区中数据的滚动更新，每当滚动一行数据，则从后台数据结构中传输一行新的数据至数据显示区。
所述网页控件可以是列表控件、树控件、表格控件，以及表格树控件。
当所述网页控件为列表控件，直接用数组对象Array存储数据。
当所述网页控件为树控件，相应构造容纳数据用tree数据结构。
当所述网页控件为表格控件，构造容纳数据用的List数据结构。
当所述网页控件为表格树控件，构造容纳数据用的treeList数据结构。
以下通过一个简单的实例，介绍本发明的网页数据的显示装置的工作过程。
首先，先通过数据结构构造单元，构造用于容纳数据的数据结构。根据数据的形式，可以构造列表控件、表格控件、树控件或者表格树控件等等。
然后，设置一个显示区域，在所述数据显示区域中构造对应的DOM元素，在后台的数据结构中将对应的数据输出至数据显示区中。比如，可以设置为列表形式。这个列表形式的显示区域可以与屏幕大小相一致。
最后，再创建一个滚动条，通过滚动条控制数据显示区中数据的滚动更新，每当滚动一行数据，则从后台数据结构中传输一行新的数据至数据显示区。
请参阅图3，其为本发明的网页数据的显示界面示意图。
例如：需要显示的数据有多条，而屏幕上只有显示4条数据的高度，数据部份用后台数据结构(如Array)来存储，显示部份用固定的4个DOM元素来显示。默认先把数据中的前4条输出到DOM元素中。再创建一个滚动条，通过控制滚动条的滚动位置，同步移动显示所有数据中需要显示的4条数据，这样可以在DOM元素固定的情况下，可以展示更多的数据，并且可以大大节省计算机的内存资源。
本发明并不局限于上述实施方式，如果对本发明的各种改动或变形不脱离本发明的精神和范围，倘若这些改动和变形属于本发明的权利要求和等同技术范围之内，则本发明也意图包含这些改动和变形。

Claims (10)

1.一种网页数据的显示方法，其包括以下步骤：
步骤1：编写网页控件时，构造容纳数据用的数据结构，通过该数据结构将数据保存在后台；
步骤2：设置数据显示区，在所述数据显示区域中构造对应的DOM元素，在后台的数据结构中将对应的数据输出至数据显示区中；
步骤3：在数据显示区中创建滚动条，通过滚动条控制数据显示区中数据的滚动更新，每当滚动一行数据，则从后台数据结构中传输一行新的数据至数据显示区。
2.根据权利要求1所述网页数据的显示方法，其特征在于：所述网页控件为列表控件，相应构造数组的数据结构。
3.根据权利要求1所述网页数据的显示方法，其特征在于：所述网页控件为树控件，相应构造tree数据结构。
4.根据权利要求1所述网页数据的显示方法，其特征在于：所述网页控件为表格控件，相应构造list数据结构。
5.根据权利要求1所述网页数据的显示方法，其特征在于：在步骤2中，所述数据显示区设置为列表形式。
6.一种网页数据的显示装置，其特征在于：包括
数据结构构造单元，用于在编写网页控件时，构造容纳数据用的数据结构，通过该数据结构将数据保存在后台；
数据显示单元，用于设置数据显示区，在所述数据显示区域中构造对应的DOM元素，在后台的数据结构中将对应的数据输出至数据显示区中；
数据更新单元，用于在数据显示区中创建滚动条，通过滚动条控制数据显示区中数据的滚动更新，每当滚动一行数据，则从后台数据结构中传输一行新的数据至数据显示区。
7.根据权利要求6所述网页数据的显示装置，其特征在于：所述网页控件为列表控件，相应构造数组的数据结构。
8.根据权利要求6所述网页数据的显示装置，其特征在于：所述网页控件为树控件，相应构造tree数据结构。
9.根据权利要求6所述网页数据的显示装置，其特征在于：所述网页控件为表格控件，相应构造list数据结构。
10.根据权利要求6所述网页数据的显示装置，其特征在于：所述数据显示区设置为列表形式。
CN201511033030.3A 2015-12-31 2015-12-31 一种网页数据的显示方法及装置 Pending CN106933931A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201511033030.3A CN106933931A (zh) 2015-12-31 2015-12-31 一种网页数据的显示方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201511033030.3A CN106933931A (zh) 2015-12-31 2015-12-31 一种网页数据的显示方法及装置

Publications (1)

Publication Number Publication Date
CN106933931A true CN106933931A (zh) 2017-07-07

Family

ID=59444230

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201511033030.3A Pending CN106933931A (zh) 2015-12-31 2015-12-31 一种网页数据的显示方法及装置

Country Status (1)

Country Link
CN (1) CN106933931A (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108710661A (zh) * 2018-05-11 2018-10-26 武汉轻工大学 一种基于内存顺序表实现文本文件的数据管理方法和装置
CN110717120A (zh) * 2018-07-12 2020-01-21 北京京东尚科信息技术有限公司 一种网页列表显示方法和装置
CN112732397A (zh) * 2021-01-28 2021-04-30 上海上讯信息技术股份有限公司 一种加载显示大数据报表的方法与设备

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102043862A (zh) * 2010-12-29 2011-05-04 重庆新媒农信科技有限公司 网页数据定向抓取方法
CN104699863A (zh) * 2015-04-08 2015-06-10 上海玖道信息科技股份有限公司 一种网页数据展示系统

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102043862A (zh) * 2010-12-29 2011-05-04 重庆新媒农信科技有限公司 网页数据定向抓取方法
CN104699863A (zh) * 2015-04-08 2015-06-10 上海玖道信息科技股份有限公司 一种网页数据展示系统

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
LUCKYSTAR2008: ""JS滚动条到网页底部自动加载更多内容"", 《HTTP://SUO.IM/52NORJ》 *
NEWBORN2012: ""javscript实现滚动条滚动到页面底部自动加载增加页面内容"", 《HTTPS://BLOG.CSDN.NET/NEWBORN2012/ARTICLE/DETAILS/16339697》 *

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108710661A (zh) * 2018-05-11 2018-10-26 武汉轻工大学 一种基于内存顺序表实现文本文件的数据管理方法和装置
CN110717120A (zh) * 2018-07-12 2020-01-21 北京京东尚科信息技术有限公司 一种网页列表显示方法和装置
CN112732397A (zh) * 2021-01-28 2021-04-30 上海上讯信息技术股份有限公司 一种加载显示大数据报表的方法与设备

Similar Documents

Publication Publication Date Title
CN106570098B (zh) 页面刷新的方法及装置
US10334309B2 (en) Bullet screen display method and apparatus
CN102968474B (zh) 移动通讯设备浏览网页显示方法
CN102364460B (zh) 基于移动终端的页面自动放大方法和系统
CN106933931A (zh) 一种网页数据的显示方法及装置
US20110115796A1 (en) Text rendering and display using composite bitmap images
CN107544952B (zh) 报表生成方法、装置、存储介质和计算机设备
US9465780B2 (en) User terminal device and scroll method supporting high-speed web scroll of web document
CN104268113B (zh) Dpi接口的lcd控制器以及其自适应带宽的方法
CN103607510A (zh) 一种结合使用终端的方法、终端及通讯系统
US9548042B2 (en) Responsive document breakpoints systems and methods
CN105243399B (zh) 一种实现图像卷积的方法和装置、实现缓存的方法和装置
US20140375657A1 (en) Synchronization Points for State Information
CN106445503A (zh) 一种基于嵌入式浏览器的桌面应用方法及系统
CN102654882A (zh) 用于加载页面的方法和设备
CN104133869B (zh) 一种网页页面刷新方法
US9501457B2 (en) Creating a communication editable in a browser independent of platform and operating system
JP5303534B2 (ja) 体裁情報処理装置及び方法
CN105843576A (zh) 一种拼接墙窗口切换方法及装置
TWI451322B (zh) 移動設備網頁表單產生方法
CN102043799A (zh) 图片放大方法
CN102736901A (zh) WinCE平台自定义桌面的实现方法
CN103513855A (zh) 一种显示页面更新方法及装置
WO2014200528A1 (en) Coalescing graphics operations
CN104133811B (zh) 文本处理方法及移动终端

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20170707