CN108037974A - 一种在移动端展示长表格的交互方法及系统装置 - Google Patents

Abstract

本发明公开了一种在移动端展示长表格的交互方法及系统装置，所述方法包括：尺寸获取模块获取显示端的显示尺寸；表格容器模块接收所述尺寸获取模块发送的所述显示尺寸创建表格容器；表格容器模块遍历文档中的所有表格并获取所述表格及表格尺寸；表格容器模块加载所述表格；表格容器模块根据所述表格尺寸及所述表格容器尺寸，生成表格溢出部分；隐藏模块接收所述表格容器发送的所述表格溢出部分，隐藏所述表格溢出部分。本发明通过计算对比屏幕和表格的尺寸，默认隐藏长表格的溢出部分，底部添加未展示完全样式及按钮，通过用户点击相应按钮取消溢出隐藏从而显示表格全貌。这样能解决长表格对全文阅读的影响，操作简单、方便。

Description

一种在移动端展示长表格的交互方法及系统装置

技术领域

本发明涉及一种移动终端中长表格的显示技术，尤其是涉及手机或平板移动终端的用于显示浏览页面中长表格的显示方法及系统装置。

背景技术

通常上市公司发布的公告是pdf格式文档，为了在H5中能有较好的阅读体验，业界一般会通过后台将原始pdf转成html，前端再通过CSS样式来控制页面布局，字体等样式。但公告中通常还含有大量表格，由于移动端设备的屏幕尺寸的局限，导致内容过长的表格通常占满很多屏，如果所述表格用户无需阅览，则用户需要长时或多次操作，跳过所述表格，从而影响全文的正常阅读体验。另外，现有技术中的移动终端也有部分隐藏的功能，但主要是对整个文档的部分内容进行隐藏，或者是对文档中的表格设计一个操作窗口，在此窗口中可以通过窗口纵横边的滑块对窗口内的表格进行选取、阅读，因为移动终端本身可视范围有一定局限性，其操作窗口的可视范围更加局限，用户在此条件下如果想对某个表格进行详细阅读，其操作体验差强人意。

其具体存在的技术问题为，无法专门针对表格实现自动隐藏及展开。

发明内容

为解决上述技术中存在的技术问题，本发明提供了一种在移动端展示长表格的交互方法及系统装置，可在表格容器中对所述表格进行隐藏及展开。其具体方案如下：

第一方面，一种在移动端展示长表格的交互方法，所述方法包括：

尺寸获取模块获取显示端的显示尺寸；

表格容器模块接收所述尺寸获取模块发送的所述显示尺寸创建表格容器；

表格容器模块遍历文档中的所有表格并获取所述表格及表格尺寸；

表格容器模块加载所述表格；

表格容器模块根据所述表格尺寸及所述表格容器尺寸，生成表格溢出部分；

隐藏模块接收所述表格容器发送的所述表格溢出部分，隐藏所述表格溢出部分。

结合第一方面，在第一方面可能的实现方式中的第一种情况为，所述显示端的显示尺寸为可显示区域的尺寸。

结合第一方面，在第一方面可能的实现方式中的第二种情况为，所述表格容器模块获取所述表格尺寸及所述表格容器尺寸，从所述表格的顶部开始计算，未超出所述表格容器尺寸的部分加载至表格容器中；超出所述表格容器尺寸的部分生成为表格溢出部分。

结合第一方面，在第一方面可能的实现方式中的第三种情况为，所述隐藏模块获取所述表格溢出部分，根据所述表格溢出部分创建隐藏容器，所述隐藏容器加载表格溢出部分，隐藏表格溢出部分。

结合第一方面，在第一方面可能的实现方式中的第四种情况为，点选隐藏模块，呈现隐藏模块所隐藏的表格溢出部分。

结合第一方面，在第一方面可能的实现方式中的第五种情况为，所述尺寸获取模块获取显示端的显示高度或/和宽度。

结合第一方面的第五种情况，在第一方面可能的实现方式中的第六种情况为，表格容器模块接收所述尺寸获取模块发送的所述显示高度或/和宽度创建表格容器。

第二方面，一种在移动端展示长表格的交互系统，所述系统包括：

尺寸获取模块，用于获取显示端的显示尺寸或显示区域的显示尺寸；

表格容器模块，用于创建表格容器，获取所有表格及表格尺寸，加载所述表格至表格容器，，生成表格溢出部分；

隐藏模块，用于加载表格溢出部分，隐藏表格溢出部分待点选后呈现所述表格溢出部分。

第三方面，一种在移动端展示长表格的交互系统装置，所述系统装置包括：

尺寸获取模块，用于获取显示端的显示尺寸或显示区域的显示尺寸；

表格容器模块，用于创建表格容器，获取所有表格及表格尺寸，加载所述表格至表格容器，生成表格溢出部分；

隐藏模块，用于加载表格溢出部分，隐藏表格溢出部分待点选后呈现所述表格溢出部分；

所述系统装置还包括：存储装置、处理器、总线，所述存储装置同所述处理器通过总线连接，所述存储装置中存有多条操作指令，所述处理器加载所述操作指令并执行，实现第一方面及其第一方面可能实现的第一种至第六种情况所述的方法。

有益效果：不同于现有技术中对表格的处理，可以实现对表格的随意隐藏和展开，方便用户根据自身需求选取阅读，提升用户的操作体验，操作简单快捷。

附图说明

图1为本发明实施例一的流程示意图；

图2为本发明实施例二的表格容器结构示意图；

图3为本发明实施例二的表格容器收起状态示意图；

图4为本发明实施例三的系统框架结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例是本发明的部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

实施例一：

步骤101，尺寸获取模块获取显示端的显示尺寸；

步骤102，表格容器模块接收所述尺寸获取模块发送的所述显示尺寸创建多个表格容器；

步骤103，表格容器模块遍历文档中的所有表格并获取所述表格及表格尺寸；

步骤104，表格容器模块根据所述表格尺寸及所述表格容器尺寸判断表格在表格容器中是否溢出；

步骤105，若未溢出，表格容器自动匹配所述表格尺寸；

步骤106，若溢出，表格容器模块生成表格溢出部分，并生成表格溢出部分显隐切换按钮控件；

步骤107，隐藏模块接收所述表格容器发送的所述表格溢出部分，隐藏所述表格溢出部分。

综上所述，文档中的所有表格均会分配一个表格容器，若所述表格的尺寸不超过所述表格容器尺寸，则系统自动将表格容器尺寸修改至所述不超过表格容器尺寸的表格的尺寸。并且，所述表格容器的尺寸也可预设，而并非完全照搬显示端或显示区域的尺寸。

实施例二：

如图2所示，虚线范围内为所述表格容器的范围，在所述表格容器范围内呈现有部分表格内容，所述表格容器的底部设有遮罩。所述遮罩为表格溢出部分显隐切换按钮控件，所述遮罩的透明度为渐变显示，所述遮罩的中间位置设有“请点击展开>>”的按钮。当用户需要展开该表格时，仅需点击此按钮即可展开所述表格，如图3所示。当用户需要收起所述表格时，再次点击此按钮即可恢复至展开前的状态。

其中，展开的时候可以根据表格尺寸全部展开所述表格，也可仅展开表格的尺寸。如在所述的表格容器的左侧或右侧也设置一个“请点击展开>>”的按钮，当用户需要在纵向展开该表格时，点击表格容器底部的按钮即可纵向展开所述表格，再次点击此按钮即可恢复至展开前的状态；当用户需要在横向展开该表格时，点击表格容器左侧或右侧的按钮即可横向展开所述表格，再次点击此按钮即可恢复至展开前的状态。具体展开方式可根据用户需求或者移动终端设备及客户端是否支持而定。

实施例三：

如图4所示，本发明还提供了一种在移动端展示长表格的交互系统，所述系统包括：

尺寸获取模块，用于获取显示端的显示尺寸或显示区域的显示尺寸；

表格容器模块，用于创建表格容器，获取所有表格及表格尺寸，加载所述表格至表格容器，，生成表格溢出部分；

隐藏模块，用于加载表格溢出部分，隐藏表格溢出部分待点选后呈现所述表格溢出部分。

基于上述系统，本发明还提供了一种在移动端展示长表格的交互系统装置，所述系统装置包括：

尺寸获取模块，用于获取显示端的显示尺寸或显示区域的显示尺寸；

表格容器模块，用于创建表格容器，获取所有表格及表格尺寸，加载所述表格至表格容器，生成表格溢出部分；

隐藏模块，用于加载表格溢出部分，隐藏表格溢出部分待点选后呈现所述表格溢出部分；

所述系统装置还包括：存储装置、处理器、总线，所述存储装置同所述处理器通过总线连接，所述存储装置中存有多条操作指令，所述处理器加载所述操作指令并执行，实现说明书中所述的方法。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所描述的装置实施例仅仅是示意性的，可以是设计成一体设备，也可以是组合成一套设备，也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件和必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims (9)

1.一种在移动端展示长表格的交互方法，其特征在于，所述方法包括：

尺寸获取模块获取显示端的显示尺寸；

表格容器模块接收所述尺寸获取模块发送的所述显示尺寸创建表格容器；

表格容器模块遍历文档中的所有表格并获取所述表格及表格尺寸；

表格容器模块加载所述表格；

表格容器模块根据所述表格尺寸及所述表格容器尺寸，生成表格溢出部分；

隐藏模块接收所述表格容器发送的所述表格溢出部分，隐藏所述表格溢出部分。

2.根据权利要求1所述的一种在移动端展示长表格的交互方法，其特征在于，所述显示端的显示尺寸为可显示区域的尺寸。

3.根据权利要求1所述的一种在移动端展示长表格的交互方法，其特征在于，所述表格容器模块获取所述表格尺寸及所述表格容器尺寸，从所述表格的顶部开始计算，未超出所述表格容器尺寸的部分加载至表格容器中；超出所述表格容器尺寸的部分生成为表格溢出部分。

4.根据权利要求1所述的一种在移动端展示长表格的交互方法，其特征在于，所述隐藏模块获取所述表格溢出部分，根据所述表格溢出部分创建隐藏容器，所述隐藏容器加载表格溢出部分，隐藏表格溢出部分。

5.根据权利要求1所述的一种在移动端展示长表格的交互方法，其特征在于，点选隐藏模块，呈现隐藏模块所隐藏的表格溢出部分。

6.根据权利要求1所述的一种在移动端展示长表格的交互方法，其特征在于，所述尺寸获取模块获取显示端的显示高度或/和宽度。

7.根据权利要求6所述的一种在移动端展示长表格的交互方法，其特征在于，表格容器模块接收所述尺寸获取模块发送的所述显示高度或/和宽度创建表格容器。

8.一种在移动端展示长表格的交互系统，其特征在于，所述系统包括：

尺寸获取模块，用于获取显示端的显示尺寸或显示区域的显示尺寸；

表格容器模块，用于创建表格容器，获取所有表格及表格尺寸，加载所述表格至表格容器，，生成表格溢出部分；

隐藏模块，用于加载表格溢出部分，隐藏表格溢出部分待点选后呈现所述表格溢出部分。

9.一种在移动端展示长表格的交互系统装置，其特征在于，所述系统装置包括：

尺寸获取模块，用于获取显示端的显示尺寸或显示区域的显示尺寸；

表格容器模块，用于创建表格容器，获取所有表格及表格尺寸，加载所述表格至表格容器，生成表格溢出部分；

隐藏模块，用于加载表格溢出部分，隐藏表格溢出部分待点选后呈现所述表格溢出部分；

所述系统装置还包括：存储装置、处理器、总线，所述存储装置同所述处理器通过总线连接，所述存储装置中存有多条操作指令，所述处理器加载所述操作指令并执行，实现权利要求1-7中所述的方法。