一种网页数据的显示方法及装置制造方法及图纸

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

【技术实现步骤摘要】
一种网页数据的显示方法及装置
本专利技术涉及一种数据显示方法，特别是一种网页数据的显示方法；本专利技术还涉及一种用于实现上述方法的显示装置。
技术介绍
在网页制作上，为了方便制作，一般会编写一些控件如列表控件、树控件、表格控件等，但是由于网页的脚本语言是解释性语言，因此性能上比其它语言(如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元素固定的情况下，可以展示更多的数据，并且可以大大节省计算机的内存资源。本专利技术并不局限于上述实施方式，如果对本专利技术的各种改动或变形不脱离本专利技术的精神和范围，倘若这些改动和变形属于本专利技术的权利要求和等同技术范围之内，则本专利技术也意图包含这些改动和变形。本文档来自技高网...

【技术保护点】
一种网页数据的显示方法，其包括以下步骤：步骤1：编写网页控件时，构造容纳数据用的数据结构，通过该数据结构将数据保存在后台；步骤2：设置数据显示区，在所述数据显示区域中构造对应的DOM元素，在后台的数据结构中将对应的数据输出至数据显示区中；步骤3：在数据显示区中创建滚动条，通过滚动条控制数据显示区中数据的滚动更新，每当滚动一行数据，则从后台数据结构中传输一行新的数据至数据显示区。

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

【专利技术属性】
技术研发人员：谢小明，覃振洲，郑显伟，
申请(专利权)人：远光软件股份有限公司，
类型：发明
国别省市：广东,44