一种在移动端横向展示长表格的交互方法及系统装置制造方法及图纸

技术编号:17970185 阅读:26 留言:0更新日期:2018-05-16 11:10
本发明专利技术公开了一种在移动端横向展示长表格的交互方法及系统装置,所述方法包括:宽度获取模块获取显示端的显示宽度;表格容器模块接收所述宽度获取模块发送的所述显示宽度创建表格容器;表格容器模块遍历文档中的所有表格并获取所述表格及表格宽度;表格容器模块加载所述表格;表格容器模块根据所述表格宽度及所述表格容器宽度,生成表格溢出部分;隐藏模块接收所述表格容器发送的所述表格溢出部分,隐藏所述表格溢出部分。本发明专利技术通过计算对比屏幕和表格的宽度,默认隐藏长表格的溢出部分,底部添加未展示完全样式及按钮,通过用户点击相应按钮取消溢出隐藏从而显示表格全貌。这样能解决长表格对全文阅读的影响,操作简单、方便。

【技术实现步骤摘要】
一种在移动端横向展示长表格的交互方法及系统装置
本专利技术涉及一种移动终端中长表格的显示技术,尤其是涉及手机或平板移动终端的用于显示浏览页面中长表格的显示方法及系统装置。
技术介绍
通常上市公司发布的公告是pdf格式文档,为了在H5中能有较好的阅读体验,业界一般会通过后台将原始pdf转成html,前端再通过CSS样式来控制页面布局,字体等样式。但公告中通常还含有大量表格,由于移动端设备的屏幕宽度的局限,导致内容过长的表格通常占满很多屏,如果所述表格用户无需阅览,则用户需要长时或多次操作,跳过所述表格,从而影响全文的正常阅读体验。另外,现有技术中的移动终端也有部分隐藏的功能,但主要是对整个文档的部分内容进行隐藏,或者是对文档中的表格设计一个操作窗口,在此窗口中可以通过窗口纵横边的滑块对窗口内的表格进行选取、阅读,因为移动终端本身可视范围有一定局限性,其操作窗口的可视范围更加局限,用户在此条件下如果想对某个表格进行详细阅读,其操作体验差强人意。其具体存在的技术问题为,无法专门针对表格实现自动隐藏及展开。
技术实现思路
为解决上述技术中存在的技术问题,本专利技术提供了一种在移动端横向展示长表格的交互方法及系统装置,可在表格容器中对所述表格进行隐藏及展开。其具体方案如下:第一方面,一种在移动端横向展示长表格的交互方法,所述方法包括:宽度获取模块获取显示端的显示宽度;表格容器模块接收所述宽度获取模块发送的所述显示宽度创建表格容器;表格容器模块遍历文档中的所有表格并获取所述表格及表格宽度;表格容器模块加载所述表格;表格容器模块根据所述表格宽度及所述表格容器宽度,生成表格溢出部分;隐藏模块接收所述表格容器发送的所述表格溢出部分,隐藏所述表格溢出部分。结合第一方面,在第一方面可能的实现方式中的第一种情况为,所述显示端的显示宽度为可显示区域的宽度。结合第一方面,在第一方面可能的实现方式中的第二种情况为,所述表格容器模块获取所述表格宽度及所述表格容器宽度,从所述表格的顶部开始计算,未超出所述表格容器宽度的部分加载至表格容器中;超出所述表格容器宽度的部分生成为表格溢出部分。结合第一方面,在第一方面可能的实现方式中的第三种情况为,所述隐藏模块获取所述表格溢出部分,根据所述表格溢出部分创建隐藏容器,所述隐藏容器加载表格溢出部分,隐藏表格溢出部分。结合第一方面,在第一方面可能的实现方式中的第四种情况为,点选隐藏模块,呈现隐藏模块所隐藏的表格溢出部分。第二方面,一种在移动端横向展示长表格的交互系统,所述系统包括:宽度获取模块,用于获取显示端的显示宽度或显示区域的显示宽度;表格容器模块,用于创建表格容器,获取所有表格及表格宽度,加载所述表格至表格容器,,生成表格溢出部分;隐藏模块,用于加载表格溢出部分,隐藏表格溢出部分待点选后呈现所述表格溢出部分。第三方面,一种在移动端横向展示长表格的交互系统装置,所述系统装置包括:宽度获取模块,用于获取显示端的显示宽度或显示区域的显示宽度;表格容器模块,用于创建表格容器,获取所有表格及表格宽度,加载所述表格至表格容器,生成表格溢出部分;隐藏模块,用于加载表格溢出部分,隐藏表格溢出部分待点选后呈现所述表格溢出部分;所述系统装置还包括:存储装置、处理器、总线,所述存储装置同所述处理器通过总线连接,所述存储装置中存有多条操作指令,所述处理器加载所述操作指令并执行,实现第一方面及其第一方面可能实现的第一种至第四种情况所述的方法。有益效果:不同于现有技术中对表格的处理,可以实现对表格的随意隐藏和展开,方便用户根据自身需求选取阅读,提升用户的操作体验,操作简单快捷。附图说明图1为实施例一的流程图;图2为实施例二的表格容器展开示意图;图3为实施例二的表格容器收起示意图;图4为实施例三的结构框架图。具体实施方式为使本专利技术实施例的目的、技术方案和优点更加清楚,下面将结合本专利技术实施例中的附图,对本专利技术实施例中的技术方案进行清楚、完整地描述。显然,所描述的实施例是本专利技术的部分实施例,而不是全部的实施例。基于本专利技术中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本专利技术保护的范围。实施例一:如图1所示,一种在移动端横向展示长表格的交互方法,其步骤为:步骤101,宽度获取模块获取显示端的显示宽度;步骤102,表格容器模块接收所述宽度获取模块发送的所述显示宽度创建多个表格容器;步骤103,表格容器模块遍历文档中的所有表格并获取所述表格及表格宽度和宽度;步骤104,表格容器模块中的表格容器加载所述表格;步骤105,表格容器模块根据所述表格宽度和宽度及所述表格容器宽度和宽度,生成表格溢出部分;步骤106,隐藏模块接收所述表格容器发送的所述表格溢出部分,隐藏所述表格溢出部分。综上所述,文档中的所有表格均会分配一个表格容器,若所述表格的宽度不超过所述表格容器宽度,则系统自动将表格容器宽度修改至所述不超过表格容器宽度的表格的宽度。并且,所述表格容器的宽度也可预设,而并非完全照搬显示端或显示区域的宽度。实施例二:如图2所示,所述的表格容器的左侧或右侧设置一个“请点击展开>>”的按钮,当用户需要在纵向展开该表格时,点击表格容器底部的按钮即可纵向展开所述表格。如图3所示,再次点击此按钮即可恢复至展开前的状态。具体展开方式可根据用户需求或者移动终端设备及客户端是否支持而定。实施例三:如图4所示,本专利技术还提供了一种在移动端横向展示长表格的交互系统,所述系统包括:宽度获取模块,用于获取显示端的显示宽度或显示区域的显示宽度;表格容器模块,用于创建表格容器,获取所有表格及表格宽度,加载所述表格至表格容器,,生成表格溢出部分;隐藏模块,用于加载表格溢出部分,隐藏表格溢出部分待点选后呈现所述表格溢出部分。基于上述系统,本专利技术还提供了一种在移动端横向展示长表格的交互系统装置,所述系统装置包括:宽度获取模块,用于获取显示端的显示宽度或显示区域的显示宽度;表格容器模块,用于创建表格容器,获取所有表格及表格宽度,加载所述表格至表格容器,生成表格溢出部分;隐藏模块,用于加载表格溢出部分,隐藏表格溢出部分待点选后呈现所述表格溢出部分;所述系统装置还包括:存储装置、处理器、总线,所述存储装置同所述处理器通过总线连接,所述存储装置中存有多条操作指令,所述处理器加载所述操作指令并执行,实现说明书中所述的方法。对于装置实施例而言,由于其与方法实施例基本相似,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的,可以是设计成一体设备,也可以是组合成一套设备,也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下,即可以理解并实施。通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到各实施方式可借助软件和必需的通用硬件平台的方式来实现,当然也可以通过硬件。基于这样的理解,上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品可以存储在计算机可读存储介质中,如ROM/RAM、磁碟、光盘等,包括若干指令用以使得一台计算机设备(可以是个人计算机本文档来自技高网...
一种在移动端横向展示长表格的交互方法及系统装置

【技术保护点】
一种在移动端横向展示长表格的交互方法,其特征在于,所述方法包括:宽度获取模块获取显示端的显示宽度;表格容器模块接收所述宽度获取模块发送的所述显示宽度创建表格容器;表格容器模块遍历文档中的所有表格并获取所述表格及表格宽度;表格容器模块加载所述表格;表格容器模块根据所述表格宽度及所述表格容器宽度,生成表格溢出部分;隐藏模块接收所述表格容器发送的所述表格溢出部分,隐藏所述表格溢出部分。

【技术特征摘要】
1.一种在移动端横向展示长表格的交互方法,其特征在于,所述方法包括:宽度获取模块获取显示端的显示宽度;表格容器模块接收所述宽度获取模块发送的所述显示宽度创建表格容器;表格容器模块遍历文档中的所有表格并获取所述表格及表格宽度;表格容器模块加载所述表格;表格容器模块根据所述表格宽度及所述表格容器宽度,生成表格溢出部分;隐藏模块接收所述表格容器发送的所述表格溢出部分,隐藏所述表格溢出部分。2.根据权利要求1所述的一种在移动端横向展示长表格的交互方法,其特征在于,所述显示端的显示宽度为可显示区域的宽度。3.根据权利要求1所述的一种在移动端横向展示长表格的交互方法,其特征在于,所述表格容器模块获取所述表格宽度及所述表格容器宽度,从所述表格的顶部开始计算,未超出所述表格容器宽度的部分加载至表格容器中;超出所述表格容器宽度的部分生成为表格溢出部分。4.根据权利要求1所述的一种在移动端横向展示长表格的交互方法,其特征在于,所述隐藏模块获取所述表格溢出部分,根据所述表格溢出部分创建隐藏容器,所述隐藏容器加载表格溢出部分,隐藏表格溢...

【专利技术属性】
技术研发人员:卢鼎
申请(专利权)人:武汉楚鼎信息技术有限公司
类型:发明
国别省市:湖北,42

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1