本公开涉及计算机
技术领域：
：，具体涉及一种表格处理方法、装置、电子设备及可读存储介质。
背景技术：
：：目前在一些web应用中，对于数据的列表形式展示，人们已经习惯于使用表格。表格本身结构清晰，同时布局简单，易于扩展，所以是人们最常用的一种方式。对于某些特殊的web应用，比如数据产品，它往往需要在表格中展示大量的数据。而针对展示大量数据的思路，我们通常使用分页功能，即对整体数据做切分，每次只显示一小部分的数据，当切换不同的页码时，去展示对应的数据。这样一来网络请求会快一些，二来在页面渲染少量数据时也会更流畅。但是，存在一些特定场景下的需求，用户不愿意使用分页功能，宁可多等待一点时间去看到所有的数据。那么这就会造成一个问题，页面在渲染大量数据的表格时会异常卡顿，甚至导致页面崩溃。技术实现要素：为了解决相关技术中的问题，本公开实施例提供一种表格处理方法、装置、电子设备及可读存储介质。第一方面，本公开实施例中提供了一种表格处理方法，包括：对表格的表格信息进行结构分析并限定表格的行高和单元格宽度；在视口区域生成具有预设行数的表格主体以及位于所述表格主体边缘的滚动条；在所述表格主体的朝向所述视口区域深度方向的底部生成响应于所述滚动条的滚动操作而滚动的底部元素；根据所述表格主体、所述滚动条和所述底部元素的结构和关系，响应于所述对所述滚动条的滚动操作改变在所述表格主体上呈现的所述表格的表格信息。结合第一方面，本公开在第一方面的第一种实现方式中，所述在视口区域生成具有预设行数的表格主体以及位于所述表格主体边缘的滚动条，包括：利用嵌套的父滚动条元素和子滚动条元素实现所述滚动条，其中，所述父滚动条元素的高度与所述表格主体相同，所述子滚动条元素的高度为所述行高乘以所述表格的数据总行数。结合第一方面，本公开在第一方面的第二种实现方式中所述底部元素的宽度与所述表格主体的宽度相同，所述底部元素的高度与所述子滚动条元素的高度相同。结合第一方面，本公开在第一方面的第三种实现方式中，所述对表格的表格信息进行结构分析限定表格的行高和单元格宽度，包括：根据限定的表格的行高和单元格宽度，对超出单元格的内容进行省略。结合第一方面，本公开在第一方面的第四种实现方式中，所述表格主体为文档对象模型元素。结合第一方面的第一种实现方式，本公开在第一方面的第五种实现方式中，所述根据所述表格主体、所述滚动条和所述底部元素的结构和关系，响应于所述对所述滚动条的滚动操作改变在所述表格主体上呈现的所述表格的表格信息，包括：通过所述子滚动条元素滚动的高度除以所述行高得到所述滚动条滚动后所要呈现在所述表格主体中的表格信息的起始位置，在所述表格主体中从所述起始位置开始呈现所述预设行数的表格信息。结合第一方面的第一种实现方式，本公开在第一方面的第六种实现方式中，所述底部元素、所述父滚动条元素和所述子滚动条元素为div元素。第二方面，本公开实施例中提供了一种表格处理装置，包括：分析模块，被配置为对表格的表格信息进行结构分析并限定表格的行高和单元格宽度；第一生成模块，被配置为在视口区域生成具有预设行数的表格主体以及位于所述表格主体边缘的滚动条；第二生成模块，被配置为在所述表格主体的朝向所述视口区域深度方向的底部生成响应于所述滚动条的滚动操作而滚动的底部元素；改变模块，被配置为根据所述表格主体、所述滚动条和所述底部元素的结构和关系，响应于所述对所述滚动条的滚动操作改变在所述表格主体上呈现的所述表格的表格信息。第三方面，本公开实施例中提供了一种电子设备，包括存储器和处理器；其中，所述存储器用于存储一条或多条计算机指令，其中，所述一条或多条计算机指令被所述处理器执行以实现以下步骤：对表格的表格信息进行结构分析并限定表格的行高和单元格宽度；在视口区域生成具有预设行数的表格主体以及位于所述表格主体边缘的滚动条；在所述表格主体的朝向所述视口区域深度方向的底部生成响应于所述滚动条的滚动操作而滚动的底部元素；根据所述表格主体、所述滚动条和所述底部元素的结构和关系，响应于所述对所述滚动条的滚动操作改变在所述表格主体上呈现的所述表格的表格信息。结合第三方面，本公开在第三方面的第一种实现方式中，所述在视口区域生成具有预设行数的表格主体以及位于所述表格主体边缘的滚动条，包括：利用嵌套的父滚动条元素和子滚动条元素实现所述滚动条，其中，所述父滚动条元素的高度与所述表格主体相同，所述子滚动条元素的高度为所述行高乘以所述表格的数据总行数。结合第三方面，本公开在第三方面的第二种实现方式中，所述底部元素的宽度与所述表格主体的宽度相同，所述底部元素的高度与所述子滚动条元素的高度相同。结合第三方面，本公开在第三方面的第三种实现方式中，所述对表格的表格信息进行结构分析限定表格的行高和单元格宽度，包括：根据限定的表格的行高和单元格宽度，对超出单元格的内容进行省略。结合第三方面，本公开在第三方面的第四种实现方式中，所述表格主体为文档对象模型元素。结合第三方面的第一种实现方式，本公开在第三方面的第五种实现方式中，所述根据所述表格主体、所述滚动条和所述底部元素的结构和关系，响应于所述对所述滚动条的滚动操作改变在所述表格主体上呈现的所述表格的表格信息，包括：通过所述子滚动条元素滚动的高度除以所述行高得到所述滚动条滚动后所要呈现在所述表格主体中的表格信息的起始位置，在所述表格主体中从所述起始位置开始呈现所述预设行数的表格信息。结合第三方面的第一种实现方式，本公开在第三方面的第六种实现方式中，所述底部元素、所述父滚动条元素和所述子滚动条元素为div元素。第四方面，本公开实施例中提供了一种可读存储介质，其上存储有计算机指令，该计算机指令被处理器执行时实现如第一方面、第一方面的第一种实现方式至第六种实现方式任一项所述的方法。本公开实施例提供的技术方案可以包括以下有益效果：根据本公开实施例提供的技术方案，通过对表格的表格信息进行结构分析并限定表格的行高和单元格宽度；在视口区域生成具有预设行数的表格主体以及位于所述表格主体边缘的滚动条；在所述表格主体的朝向所述视口区域深度方向的底部生成响应于所述滚动条的滚动操作而滚动的底部元素；根据所述表格主体、所述滚动条和所述底部元素的结构和关系，响应于所述对所述滚动条的滚动操作改变在所述表格主体上呈现的所述表格的表格信息，可以通过仅在视口区域显示较少的元素，减轻表格渲染的负担，减少表格渲染的卡顿现象，使得表格满足用户对于希望看到所有数据而不进行翻页操作的诉求，为用户提供了多种选择，用户体验得以提升。应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。附图说明结合附图，通过以下非限制性实施方式的详细描述，本公开的其它特征、目的和优点将变得更加明显。在附图中：图1示出根据本公开一实施方式的表格处理方法的流程图；图2示出根据本公开一实施方式的表格处理装置的结构框图；图3示出根据本公开一实施方式的表格处理方法的应用场景示例的示意图；图4示出根据本公开一实施方式的电子设备的结构框图；图5是适于用来实现根据本公开一实施方式的表格处理方法的计算机系统的结构示意图。具体实施方式下文中，将参考附图详细描述本公开的示例性实施方式，以使本领域技术人员可容易地实现它们。此外，为了清楚起见，在附图中省略了与描述示例性实施方式无关的部分。在本公开中，应理解，诸如“包括”或“具有”等的术语旨在指示本说明书中所公开的特征、数字、步骤、行为、部件、部分或其组合的存在，并且不欲排除一个或多个其他特征、数字、步骤、行为、部件、部分或其组合存在或被添加的可能性。另外还需要说明的是，在不冲突的情况下，本公开中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本公开。相关技术中，table元素主要用于在web页面上创建表格，其功能与htmltable类似。不同的是，table元素可以用动态的内容以编程的方式来生成表格。大量的table相关元素的渲染造成卡顿问题。因此，本公开的实施方式提供一种特殊的方法去解决大数据下表格渲染卡顿的问题，来满足在某种特定场景下的用户需求。图1示出根据本公开一实施方式的表格处理方法的流程图。如图1所示，所述表格处理方法包括以下步骤s101-s104：在步骤s101中，对表格的表格信息进行结构分析并限定表格的行高和单元格宽度。在步骤s102中，在视口区域生成具有预设行数的表格主体以及位于表格主体边缘的滚动条。在步骤s103中，在表格主体的朝向视口区域深度方向的底部生成响应于滚动条的滚动操作而滚动的底部元素。在步骤s104中，根据表格主体、滚动条和底部元素的结构和关系，响应于对所述滚动条的滚动操作改变在表格主体上呈现的表格的表格信息。在本公开的一个实施方式中，表格指的是要被显示在页面上的包括全部数据的表格，例如，大数据情况下的表格。对表格的表格信息进行结构分析可以指的是针对要显示的表格的表格信息进行结构分析，查看是否存在多列，嵌套表格等情况。限定表格的行高和单元格宽度有利于在预设区域内适当地显示表格中的内容。在本公开的一个实施方式中，步骤s101包括：根据限定的表格的行高和单元格宽度，对超出单元格的内容进行省略。针对超出单元格的内容进行省略显示，这样做是为了在最后进行表格内容修改时，可以保持数据的准确性。在本公开的一个实施方式中，视口(viewport)区域是页面(例如，浏览器)显示页面内容的屏幕区域。表格主体具有预设行数，而且，由于行高和单元格宽度也已经限定，因此，表格主体的大小也被限定。表格主体的大小被限定是为了便于在视口区域显示，而且在进行渲染时不会卡顿。在本公开的一个实施方式中，表格主体为文档对象模型(documentobjectmodel，简称dom)元素。文档对象模型是w3c组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为dom。在本公开的一个实施方式中，由于表格主体的行数有限，例如，5行、10行、15行等。因此，不会在视口区域内显示过多的文档对象模型元素，在页面滚动时，不需要执行回流操作，因此也就减少了卡顿的出现。在本公开的一个实施方式中，步骤s102包括：利用嵌套的父滚动条元素和子滚动条元素实现滚动条，其中，父滚动条元素的高度与表格主体相同，子滚动条元素的高度为行高乘以所述表格的数据总行数。在本公开的一个实施方式中，可以在表格的外侧实现一个滚动条，可以通过两个空白的嵌套滚动条元素，即，父滚动条元素和子滚动条元素，来模拟实现。例如，目前在各种浏览器中，浏览器原生滚动条的默认宽度为17像素。因此，可以设置模拟的父滚动条宽度为17像素，高度和表格主体高度保持相同，同时设置超出高度元素滚动显示。而对于子滚动条元素的高度，则为数据总数与单元格行高相乘的值，这样一来就可以撑开高度，从而实现滚动条效果。在本公开的实施方式中，可以在表格的右侧实现滚动条。在本公开的另一实施方式中，可以在表格的下侧形成滚动条。在本公开的另一实施方式中，也可以在表格的左侧或上侧形成滚动条。在本公开的一个实施方式中，需要注意的是，由于表格主体高度固定，因此无法对表格主体执行滚动操作，而只能通过模拟滚动条进行切换数据内容的操作。因此，表格的外侧实现的滚动条可以被称为模拟滚动条。然而，为了与原生表格的功能更为贴近，需要实现表格主体的滚动功能。因此，在本公开的一个实施方式中，在表格主体的朝向视口区域深度方向的底部生成响应于滚动条的滚动操作而滚动的底部元素。在本公开的一个实施方式中，底部元素的宽度与表格主体的宽度相同，底部元素的高度与子滚动条元素的高度相同。即，底部元素的高度为行高乘以表格的数据总行数。在本公开的一个实施方式中，在表格主体朝向视口区域深度方向的底部添加一个底部元素，宽度与表格主体相同，高度与嵌套的滚动条中的子滚动条元素的撑开内容高度相同。例如，在进行滚动操作时，通过页面(例如，浏览器)的事件冒泡机制，表格主体的滚动行为会响应在底部元素上，底部元素滚动，而表格主体保持不变，从而达到滚动的效果。另外，要把表格主体与滚动条的滚动情况做联动处理，使表格主体显示的滚动内容与滚动条的滚动高度一致。在本公开的一个实施方式中，可以根据表格主体、滚动条和底部元素的结构和关系，响应于对滚动条的滚动操作改变在表格主体上呈现的表格的表格信息。即，随着滚动条的滚动，在表格主体上呈现出滚动效果。在本公开的一个实施方式中，底部元素可以是空白元素。在本公开的一个实施方式中，步骤s103包括：通过子滚动条元素滚动的高度除以行高得到滚动条滚动后所要呈现在表格主体中的表格信息的起始位置，在表格主体中从起始位置开始呈现预设行数的表格信息。在本公开的一个实施方式中，底部元素、父滚动条元素和子滚动条元素为div元素。div元素是用来为html文档内块级别(block-level)的内容提供结构和背景的元素。在本公开的一个实施方式中，可以根据不同项目下表格的不同结构，通过代码来更改表格在滚动时要变化的内容。由于文档对象模型元素始终最终限定在预设行数，要渲染的元素很少，所以最终可以实现在超大数据量下的流畅渲染。根据本公开实施例提供的技术方案，通过对表格的表格信息进行结构分析并限定表格的行高和单元格宽度；在视口区域生成具有预设行数的表格主体以及位于所述表格主体边缘的滚动条；在所述表格主体的朝向所述视口区域深度方向的底部生成响应于所述滚动条的滚动操作而滚动的底部元素；根据所述表格主体、所述滚动条和所述底部元素的结构和关系，响应于所述对所述滚动条的滚动操作改变在所述表格主体上呈现的所述表格的表格信息，可以通过仅在视口区域显示较少的元素，减轻表格渲染的负担，减少表格渲染的卡顿现象，使得表格满足用户对于希望看到所有数据而不进行翻页操作的诉求，为用户提供了多种选择，用户体验得以提升。图3示出根据本公开一实施方式的表格处理方法的应用场景示例的示意图。如图3所示，在视口区域300生成具有预设行数为5行的表格主体301以及位于表格主体301边缘的滚动条302。在本公开的方案中，滚动条302是模拟滚动条。在表格主体301的朝向视口区域300深度方向的底部生成响应于滚动条302的滚动操作而滚动的底部元素303。从某种角度看，可以认为表格主体301更靠近屏幕表面，而底部元素303更靠近屏幕背面。虽然图3中示出的底部元素303为与表格主体301同样大小，但是，可以理解，底部元素303的宽度与表格主体301的宽度相同，而底部元素303的高度与滚动条302的子滚动条元素的高度相同，为表格的行数乘以行高。图3中示出了表格主体中的一行的高度“行高”，即图3所示的竖线的长度。根据表格主体301、滚动条302和底部元素303的结构和关系，响应于对滚动条302的滚动操作改变在表格主体301上呈现的表格的表格信息。即，随着滚动条302的滚动操作，表格信息按照表格主体301的格式滚动显示在视口区域300中。图3中的表格主体展示了5行数据。通过滑动滚动条302，计算出滚动高度，再除以行高，就可以得到要显示的收据的开始区间。例如，滚动高度为600，行高为50，那么要展示数据的起始位置为600/50＝12。如果数据总数为100条，那么就要显示第12条至16条数据。本方案通过模拟实现一个滚动条，并且在保留表格基本元素的基础上，在视口区域只展示特定数目的行数(例如、5行、10行等)，设置表格的每一行为固定的高度，然后通过结合要展示数据的总数进行计算得到滚动条的撑开高度。当用户上下滑动滚动条时，通过实时得到滚动条的滑动距离，再除以表格行的高度，就可以得到数据要展示的开始区间。此时再截取开始区间的后特定行数目行的数据，得到的就是最终展示在表格视口区域的数据内容(即，表格信息)。接下来，滚动条滚动不同的距离，即可以实现在不同的数据间进行切换(滚动)。图2示出根据本公开一实施方式的表格处理装置的结构框图。如图2所示，表格处理装置包括分析模块201、第一生成模块202、第二生成模块203和改变模块204。分析模块201被配置为对表格的表格信息进行结构分析并限定表格的行高和单元格宽度。第一生成模块202被配置为在视口区域生成具有预设行数的表格主体以及位于表格主体边缘的滚动条。第二生成模块203被配置为在表格主体的朝向视口区域深度方向的底部生成响应于滚动条的滚动操作而滚动的底部元素。改变模块204被配置为根据表格主体、滚动条和底部元素的结构和关系，响应于对滚动条的滚动操作改变在表格主体上呈现的表格的表格信息。以上描述了表格处理装置的内部功能和结构，在一个可能的设计中，该表格处理装置的结构可实现为表格处理设备，如图4中所示，该处理设备400可以包括处理器401以及存储器402。所述存储器402用于存储支持表格处理装置执行上述任一实施例中表格处理方法的程序，所述处理器401被配置为用于执行所述存储器402中存储的程序。所述存储器402用于存储一条或多条计算机指令，其中，所述一条或多条计算机指令被所述处理器401执行以实现以下步骤：对表格的表格信息进行结构分析并限定表格的行高和单元格宽度；在视口区域生成具有预设行数的表格主体以及位于所述表格主体边缘的滚动条；在所述表格主体的朝向所述视口区域深度方向的底部生成响应于所述滚动条的滚动操作而滚动的底部元素；根据所述表格主体、所述滚动条和所述底部元素的结构和关系，响应于所述对所述滚动条的滚动操作改变在所述表格主体上呈现的所述表格的表格信息。在本公开的一个实施方式中，所述在视口区域生成具有预设行数的表格主体以及位于所述表格主体边缘的滚动条，包括：利用嵌套的父滚动条元素和子滚动条元素实现所述滚动条，其中，所述父滚动条元素的高度与所述表格主体相同，所述子滚动条元素的高度为所述行高乘以所述表格的数据总行数。在本公开的一个实施方式中，所述底部元素的宽度与所述表格主体的宽度相同，所述底部元素的高度与所述子滚动条元素的高度相同。在本公开的一个实施方式中，所述对表格的表格信息进行结构分析限定表格的行高和单元格宽度，包括：根据限定的表格的行高和单元格宽度，对超出单元格的内容进行省略。在本公开的一个实施方式中，所述表格主体为文档对象模型元素。在本公开的一个实施方式中，所述根据所述表格主体、所述滚动条和所述底部元素的结构和关系，响应于所述对所述滚动条的滚动操作改变在所述表格主体上呈现的所述表格的表格信息，包括：通过所述子滚动条元素滚动的高度除以所述行高得到所述滚动条滚动后所要呈现在所述表格主体中的表格信息的起始位置，在所述表格主体中从所述起始位置开始呈现所述预设行数的表格信息。在本公开的一个实施方式中，所述底部元素、所述父滚动条元素和所述子滚动条元素为div元素。所述处理器401用于执行前述各方法步骤中的全部或部分步骤。其中，所述表格处理设备的结构中还可以包括通信接口，用于表格处理设备与其他设备或通信网络通信。本公开示例性实施例还提供了一种计算机存储介质，用于储存所述表格处理装置所用的计算机软件指令，其包含用于执行上述任一实施例中表格处理方法所涉及的程序。图5是适于用来实现根据本公开一实施方式的表格处理方法的计算机系统的结构示意图。如图5所示，计算机系统500包括中央处理单元(cpu)501，其可以根据存储在只读存储器(rom)502中的程序或者从存储部分508加载到随机访问存储器(ram)503中的程序而执行上述图1所示的实施方式中的各种处理。在ram503中，还存储有系统500操作所需的各种程序和数据。cpu501、rom502以及ram503通过总线504彼此相连。输入/输出(i/o)接口505也连接至总线504。以下部件连接至i/o接口505：包括键盘、鼠标等的输入部分506；包括诸如阴极射线管(crt)、液晶显示器(lcd)等以及扬声器等的输出部分507；包括硬盘等的存储部分508；以及包括诸如lan卡、调制解调器等的网络接口卡的通信部分509。通信部分509经由诸如因特网的网络执行通信处理。驱动器510也根据需要连接至i/o接口505。可拆卸介质511，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器510上，以便于从其上读出的计算机程序根据需要被安装入存储部分508。特别地，根据本公开的实施方式，上文参考图1描述的方法可以被实现为计算机软件程序。例如，本公开的实施方式包括一种计算机程序产品，其包括有形地包含在及其可读介质上的计算机程序，所述计算机程序包含用于执行图1的数据处理方法的程序代码。在这样的实施方式中，该计算机程序可以通过通信部分509从网络上被下载和安装，和/或从可拆卸介质511被安装。附图中的流程图和框图，图示了按照本公开各种实施方式的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，路程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，并且/或者可以用专用硬件与计算机指令的组合来实现。描述于本公开实施方式中所涉及到的单元或模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元或模块也可以设置在处理器中，这些单元或模块的名称在某种情况下并不构成对该单元或模块本身的限定。作为另一方面，本公开还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施方式中所述装置中所包含的计算机可读存储介质；也可以是单独存在，未装配入设备中的计算机可读存储介质。计算机可读存储介质存储有一个或者一个以上程序，所述程序被一个或者一个以上的处理器用来执行描述于本公开的方法。以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本公开中所涉及的发明范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离所述发明构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。当前第1页12当前第1页12