一种页面中表格的展示方法及移动终端技术

本发明专利技术公开了一种页面中表格的展示方法，表格包括表格容器，表格容器中于数据展示层上包括纵向排列的多个模块，每个模块包括多个横向排列的多个单元，每个单元包括相应的内容数据，所述方法包括：获取表格内容数据，并将表格内容数据存储到数据存储装置；当接收到用户对滚动条的滚动操作时，确定滚动条的滚动位置；基于滚动条的滚动位置确定一个或多个模块的多个待展示单元；从数据存储装置中获取与所述多个待展示单元相对应的内容数据；以及基于所获取的内容数据对多个待展示单元进行渲染，以便在所述数据展示层上展示所述多个待展示单元。本发明专利技术还公开了相应的移动终端。根据本发明专利技术的技术方案，有利于提高页面的加载速度和渲染性能。

A display method of table in page and mobile terminal

【技术实现步骤摘要】
一种页面中表格的展示方法及移动终端
本专利技术涉及移动终端开发
，尤其涉及一种页面中表格的展示方法及移动终端。
技术介绍
安卓(Android)是一种基于Linux的开放源代码的操作系统，主要用于智能手机、平板电脑等移动设备。Android系统提供了各种基础的UI组件，能实现多种多样的界面显示效果。在Android系统中，在网页中将数据以表格形式展示是一种常见的数据展示方式。HTML提供了<table>标签，用于将数据以表格形式进行展示，这也是现有技术中在网页中展示表格数据的最常见的技术手段。基于HTML提供的<table>标签在网页中展示表格形式的数据，虽然技术实现较为简单，但该方案存在如下缺点：在渲染大量数据时容易造成页面假死，反应迟钝；以表格形式展示数据时，缺少一些基本的交互实现，不能对表格进行表头固定、行列冻结、改变列宽等基本操作；而且，不支持表格数据的下载。另外，现有技术中还有一种方案，可以采用开源的组件实现在网页中展示表格数据，开源的组件例如Handsontable。但，这种方案需要引入比较大的依赖文件，会影响页面加载速度；而且，对于大数据量的下载性能较差，容易造成页面卡死。为此，需要提供一种页面中表格的展示方法，以解决上述技术方案中存在的问题。
技术实现思路
为此，本专利技术提供一种页面中表格的展示方法及移动终端，以解决或至少缓解上面存在的问题。根据本专利技术的一个方面，提供了一种页面中表格的展示方法，在移动终端中执行，所述移动终端的屏幕上适于展示页面内容，所述页面内容包括表格，所述表格包括表格容器，所述表格容器中包括数据展示层、滚动条，所述表格容器中于所述数据展示层上包括纵向排列的多个模块，每个模块包括多个横向排列的多个单元，每个单元包括相应的内容数据，所述方法包括：获取表格内容数据，并将表格内容数据存储到数据存储装置；当接收到用户对滚动条的滚动操作时，确定滚动条的滚动位置；基于滚动条的滚动位置确定一个或多个模块的多个待展示单元；从数据存储装置中获取与所述多个待展示单元相对应的内容数据；以及基于所获取的内容数据对多个待展示单元进行渲染，以便在所述数据展示层上展示所述多个待展示单元。可选地，在根据本专利技术的页面中表格的展示方法中，在接收用户对滚动条的滚动操作之前，包括步骤：基于表格内容数据确定所述表格容器、滚动条的尺寸，并基于表格容器和滚动条的尺寸确定数据展示层的尺寸；基于所述数据展示层的尺寸，确定要在数据展示层上展示的多个模块的多个单元；从数据存储装置中获取与所述多个模块的多个单元相对应的内容数据；以及基于所获取的内容数据对所述多个单元进行渲染，以便在所述数据展示层上展示将所述多个单元。可选地，在根据本专利技术的页面中表格的展示方法中，在确定数据展示层的尺寸后，还包括步骤：确定表头模块和列头模块的尺寸，以便在所述数据展示层的顶部展示表头模块、在数据展示层的左侧展示列头模块。可选地，在根据本专利技术的页面中表格的展示方法中，在接收用户对滚动条的滚动操作之前，还包括步骤：对滚动条注册滚动监听函数，以便监控用户对滚动条的滚动操作。可选地，在根据本专利技术的页面中表格的展示方法中，基于滚动条的滚动位置确定多个待展示单元的步骤包括：确定是否需要更新当前的展示单元，如果需要，则基于滚动条的滚动位置确定多个待展示单元。可选地，在根据本专利技术的页面中表格的展示方法中，还包括步骤：接收用户对表格的下载请求；基于文件系统创建文件；请求从数据存储装置中获取表格数据，将获取的表格数据分片写入所述文件中，以便用户下载包括表格数据的文件。可选地，在根据本专利技术的页面中表格的展示方法中，在将表格数据写入所述文件之后，包括步骤：生成与所述文件相对应的链接，以便用户基于所述链接下载文件。可选地，在根据本专利技术的页面中表格的展示方法中，在接收用户对表格的下载请求之前，还包括步骤：对表格注册下载监听事件，以便监控用户对表格的下载请求。可选地，在根据本专利技术的页面中表格的展示方法中，所述数据存储装置为IndexedDB。可选地，在根据本专利技术的页面中表格的展示方法中，所述滚动条包括横向滚动条和纵向滚动条，确定一个或多个模块的多个待展示单元的步骤包括：当接收到用户对所述横向滚动条的滚动操作时，控制当前的多个模块水平滑动，并基于横向滚动条的滚动位置确定当前的多个模块的多个待展示单元；当接收到用户对所述纵向滚动条的滚动操作时，控制当前的多个模块竖直滑动，并基于纵向滚动条的滚动位置确定一个或多个待展示模块、以及每个待展示模块的待展示单元。可选地，在根据本专利技术的页面中表格的展示方法中，所述页面为HTML页面。根据本专利技术的一个方面，提供了一种移动终端，包括：至少一个处理器；以及存储有程序指令的存储器，其中，所述程序指令被配置为适于由所述至少一个处理器执行，所述程序指令包括用于执行如上所述页面中表格的展示方法的指令。根据本专利技术的一个方面，提供了一种存储有程序指令的可读存储介质，当所述程序指令被移动终端读取并执行时，使得所述移动终端执行如上所述的页面中表格的展示方法。根据本专利技术的技术方案，通过将表格内容数据预先存储到数据存储装置(IndexedDB)中，在首次展示表格内容或者基于滚动操作更新表格内容时，只需要从数据存储装置中获取当前要展示或更新的内容数据到内存，页面每次加载的只是当前要展示或更新的内容数据。这样，不仅可以减少对移动终端内存空间的占用，有利于支持更大数据量的表格内容。而且，对于大数据量的表格而言，不会因一次加载大量数据而造成页面卡死，有利于提高页面整体的加载速度和渲染性能，用户体验更好。进一步地，在操作滚动条滚动时，只需基于滚动操作从数据存储装置中获取待展示单元对应的新的内容数据，并对新的内容数据进行渲染，以展示新的单元。这样，只需加载较少的数据，便能实现对表格中的内容进行更新显示的效果。此外，根据本专利技术的技术方案，通过文件系统创建文件，并将从数据存储装置获取的表格数据分批次地写入文件中，再基于链接来下载这个文件。这样有利于提升下载性能，避免在下载表格数据过程中出现页面卡死的状况。上述说明仅是本专利技术技术方案的概述，为了能够更清楚了解本专利技术的技术手段，而可依照说明书的内容予以实施，并且为了让本专利技术的上述和其它目的、特征和优点能够更明显易懂，以下特举本专利技术的具体实施方式。附图说明为了实现上述以及相关目的，本文结合下面的描述和附图来描述某些说明性方面，这些方面指示了可以实践本文所公开的原理的各种方式，并且所有方面及其等效方面旨在落入所要求保护的主题的范围内。通过结合附图阅读下面的详细描述，本公开的上述以及其它目的、特征和优势将变得更加明显。遍及本公开，相同的附图标记通常指代相同的部件或元素。图1示出了根据本专利技术一个实施例的移动终端100的示意图；以及图2示出了根据本专利技术一个实施例的页面中表格的展示方法200的流程图；以及图3a、图3b分别示出了根据本专利技术本文档来自技高网...

【技术保护点】
1.一种页面中表格的展示方法，在移动终端中执行，所述移动终端的屏幕上适于展示页面内容，所述页面内容包括表格，所述表格包括表格容器，所述表格容器中包括数据展示层、滚动条，所述表格容器中于所述数据展示层上包括纵向排列的多个模块，每个模块包括多个横向排列的多个单元，每个单元包括相应的内容数据，所述方法包括：/n获取表格内容数据，并将表格内容数据存储到数据存储装置；/n当接收到用户对滚动条的滚动操作时，确定滚动条的滚动位置；/n基于滚动条的滚动位置确定一个或多个模块的多个待展示单元；/n从数据存储装置中获取与所述多个待展示单元相对应的内容数据；以及/n基于所获取的内容数据对多个待展示单元进行渲染，以便在所述数据展示层上展示所述多个待展示单元。/n

【技术特征摘要】
1.一种页面中表格的展示方法，在移动终端中执行，所述移动终端的屏幕上适于展示页面内容，所述页面内容包括表格，所述表格包括表格容器，所述表格容器中包括数据展示层、滚动条，所述表格容器中于所述数据展示层上包括纵向排列的多个模块，每个模块包括多个横向排列的多个单元，每个单元包括相应的内容数据，所述方法包括：
获取表格内容数据，并将表格内容数据存储到数据存储装置；
当接收到用户对滚动条的滚动操作时，确定滚动条的滚动位置；
基于滚动条的滚动位置确定一个或多个模块的多个待展示单元；
从数据存储装置中获取与所述多个待展示单元相对应的内容数据；以及
基于所获取的内容数据对多个待展示单元进行渲染，以便在所述数据展示层上展示所述多个待展示单元。


2.如权利要求1所述的页面中表格的展示方法，其中，在接收用户对滚动条的滚动操作之前，包括步骤：
基于表格内容数据确定所述表格容器、滚动条的尺寸，并基于表格容器和滚动条的尺寸确定数据展示层的尺寸；
基于所述数据展示层的尺寸，确定要在数据展示层上展示的多个模块的多个单元；
从数据存储装置中获取与所述多个模块的多个单元相对应的内容数据；以及
基于所获取的内容数据对所述多个单元进行渲染，以便在所述数据展示层上展示将所述多个单元。


3.如权利要求2所述的页面中表格的展示方法，其中，在确定数据展示层的尺寸后，还包括步骤：
确定表头模块和列头模块的尺寸，以便在所述数据展示层的顶部展示表头模块、在数据展示层的左侧展示列头模块。


4.如权利要求1-...

【专利技术属性】
技术研发人员：余鋆洋，叶明登，
申请(专利权)人：北京皮尔布莱尼软件有限公司，
类型：发明
国别省市：北京;11