CN115935925A - 表格适配方法、电子设备及计算机可读存储介质 - Google Patents

Abstract

本申请提供了表格适配方法、电子设备及计算机可读存储介质，该方法包括：S1：实时获取目标界面的当前宽度；S2：检测当前宽度是否大于预设界面宽度；如果不大于，则执行S3；如果大于，则执行S4；S3：获取目标表格中每列的固定宽度，以生成第一适配表格；S4：基于当前宽度，对目标表格中每列的宽度进行赋值以获取第二适配表格。基于当前宽度W1和第一适配表格中第一列的宽度W2，确定空白列的宽度，空白列的宽度不小于W1‑W2；基于空白列的宽度，在第一适配表格的末尾增加空白列以实现数据对齐。该方法可以使表格良好地适配不同尺寸的界面，提高表格自适应的能力，便于使用者阅读和查看，提高了适配效率。

Description

表格适配方法、电子设备及计算机可读存储介质

技术领域

本申请涉及前端开发的技术领域，尤其涉及表格适配方法、电子设备及计算机可读存储介质。

背景技术

表格是在前端开发中经常用到的基本界面元素之一，表格的UI(User Interface，用户界面)呈现对用户体验和数据呈现至关重要。由于不同终端设备的屏幕尺寸具有差异，在通过终端设备加载网页数据时，网页表格需要适应这些不同的终端设备屏幕，以达到较好的显示效果。

web前端开发中，基于vue.js的框架插件中的表格组件开发的表格，插件本身功能强大，但是对于展示行业数据、公司生产数据等需要大量的数据列的情况美观效果很不友好。

专利CN106681972A公开了一种表格显示方法，包括：计算表格中当前显示的所有列与当前的权重列表中权重值最高的列的列宽之和，所述权重列表中保存有待确定是否显示的各列及所述各列分别对应的权重值；检测所述列宽之和是否大于所述表格可显示的总宽度；若所述列宽之和小于或等于所述表格可显示的总宽度，则在所述表格中显示所述权重值最高的列，并将所述权重值最高的列及该列对应的权重值从权重列表中删除，将删除列后的权重列表作为当前的权重列表，重复执行所述计算列宽之和的步骤；若所述列宽之和大于所述表格可显示的总宽度，则隐藏所述当前的权重列表中的每一列，并在终端设备上显示所述表格中当前显示的所有列。该方法通过权重值和权重列表调整表格，操作复杂。

基于此，本申请提供了表格适配方法、电子设备及计算机可读存储介质，以改进现有技术。

发明内容

本申请的目的在于提供表格适配方法、电子设备及计算机可读存储介质，可以使表格良好地适配不同尺寸的界面，提高表格自适应的能力，便于使用者阅读和查看，提高了适配效率。

本申请的目的采用以下技术方案实现：

第一方面，本申请提供了一种表格适配方法，所述方法包括：

S1：实时获取目标界面的当前宽度；

S2：检测所述当前宽度是否大于预设界面宽度；如果不大于，则执行S3；如果大于，则执行S4；

S3：获取目标表格中每列的固定宽度，以生成第一适配表格；

S4：基于所述当前宽度，对目标表格中每列的宽度进行赋值以获取第二适配表格。

该技术方案的有益效果在于：实时获取目标界面的当前宽度(当前时刻目标界面的宽度)，检测当前宽度是否大于预设界面宽度，如果当前宽度不大于预设界面宽度，则获取目标表格中每列的固定宽度，以生成第一适配表格；如果当前宽度大于预设界面宽度，则基于当前宽度，对目标表格中每列的宽度进行赋值以获取第二适配表格。当界面的当前宽度不大于预设界面宽度时，直接获取目标表格中每列地固定宽度以生成第一适配表格，避免了复杂的适配操作，使第一适配表更加规整和统一；当界面的当前宽度大于预设界面宽度时，则进行赋值操作以获取第二适配表格，使第二适配表可以灵活地随界面的当前宽度的变化而调整；该方法可以使表格良好地适配不同尺寸的界面，提高表格自适应的能力，便于使用者阅读和查看，提高了适配效率。

该方法可以使表格良好适配不同尺寸的界面，以便于提高表格自适应的能力，便于使用者阅读和查看，提高了适配效率。

在一些可选的实施方式中，所述实时获取目标界面的当前宽度，包括：

利用***对所述目标界面的宽度进行实时监听，以获取所述当前宽度。

该技术方案的有益效果在于：利用***对目标界面的宽度进行实时监听，从而获取当前宽度。可以实时获取目标界面的宽度，智能化程度高，节省人力成本，如果不利用***对目标界面的宽度进行实时监听，则需要提前录入各种目标界面的宽度，耗时耗力，且容易出现错误；用这种方法获取当前宽度不仅可以保证在目标界面的宽度变化时不会遗漏获取操作，还可以提高获取的效率。

在一些可选的实施方式中，所述利用***对所述目标界面的宽度进行实时监听，以获取所述当前宽度，包括：

利用***检测所述目标界面的宽度是否发生变化；

如果发生变化，则获取所述目标界面变化后的宽度作为所述当前宽度；

如果未发生变化，则不做操作。

该技术方案的有益效果在于：利用***检测目标界面的宽度是否发生变化；如果目标界面的宽度发生变化，则获取目标界面变化后的宽度作为当前宽度；如果目标界面的宽度未发生变化，则不做操作。基于***对目标界面的宽度进行检测可以获取目标界面的宽度变化，智能化程度高，检测效果好，可以快速获取检测结果，检测效率较高；

如果检测到目标界面的宽度没发生变化，则无需其他操作，不用重新对当前宽度进行获取和存储，节省了存储和计算的资源；

如果检测到目标界面的宽度发生变化，则获取目标界面变化后的宽度作为当前宽度，是保障表格适配当前宽度的基础。

在一些可选的实施方式中，所述获取目标表格中每列的固定宽度，以生成第一适配表格，包括：

获取所述目标表格中每列的平均数据长度；

基于所述目标表格中每列的平均数据长度，确定所述目标表格中每列的固定宽度，以生成所述第一适配表格。

该技术方案的有益效果在于：获取目标表格中每列的平均数据长度，根据目标表格中每列的平均数据长度，确定目标表格中每列的固定宽度(每列的固定宽度是指这一列的宽度是固定不变的，不同列的宽度可以不相同)，再以目标表格中每列的固定宽度为列宽，生成第一适配表格。该方法可以使目标表格中每列的固定宽度容纳平均数据长度，有利于保证第一适配表格的每列可以更好地显示数据(每个单元格中的数据)。

在一些可选的实施方式中，所述基于所述目标表格中每列的平均数据长度，确定所述目标表格中每列的固定宽度，包括：

基于所述目标表格中每列的平均数据长度，确定所述目标表格中每列的固定宽度并存储至预设数组；

所述生成所述第一适配表格，包括：

从所述预设数组中获取所述目标表格中每列的固定宽度，以生成所述第一适配表格。

该技术方案的有益效果在于：基于目标表格中每列的平均数据长度，确定目标表格中每列的固定宽度并存储至预设数组，再从预设数组中获取目标表格中每列的固定宽度(调用预设数组中的数据)，生成第一适配表格。该方法不仅可以将目标表格中每列的固定宽度进行存储，还可以随时调用预设数组中的数据，可以重复利用数据，节省程序的代码量，便于统一修改和计算，运行效率更高。

在一些可选的实施方式中，所述基于所述当前宽度，对目标表格中每列的宽度进行赋值以获取第二适配表格，包括：

基于所述当前宽度、所述目标表格的列数和所述目标表格中每列的平均数据长度，确定所述目标表格中每列的宽度，以生成所述第二适配表格，所述第二适配表格的宽度与所述当前宽度相同。

该技术方案的有益效果在于：根据当前宽度、目标表格的列数和目标表格中每列的平均数据长度，从而确定目标表格中每列的宽度，以生成第二适配表格(根据当前宽度、目标表格的列数和目标表格中每列的平均数据长度实时获取得到)；可以保证在不同宽度的目标界面中第二适配表格都可以占满整张目标界面，防止出现目标界面的当前宽度变大，但是目标表格的较小，导致使用者无法清晰地阅读的问题，使表格可视化更加美观。

在一些可选的实施方式中，所述获取目标表格中每列的固定宽度，以生成第一适配表格，还包括：

基于所述当前宽度W1和所述第一适配表格中第一列的宽度W2，确定空白列的宽度，所述空白列的宽度不小于W1-W2；

基于所述空白列的宽度，在所述第一适配表格的末尾增加空白列以实现数据对齐，从而在左右滑动所述第一适配表格的滚动条的过程中，使第一列能够与任何列相邻。

该技术方案的有益效果在于：首先获取当前宽度W1和第一适配表格中第一列的宽度W2，设置第一适配表末尾的空白列的宽度不小于W1-W2(当前宽度与第一适配表格中第一列的宽度的差)，基于空白列的宽度，在第一适配表格的末尾增加空白列以实现数据对齐，从而在左右滑动第一适配表格的滚动条的过程中，使第一列能够与任何列相邻。该方法可以使第一适配表格中的任意一列数据能够跟第一列数据对齐(第一列是位置固定的)从而实现更好地比对数据的效果，在左右滑动第一适配表格的滚动条的过程中，因为有空白列的缘故，使用者可以将任意一列滑动至与第一列接壤，从而更加便捷地查看第一列和任意一列中数据的关系。

第二方面，本申请提供了一种电子设备，所述电子设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器被配置成执行所述计算机程序时实现以下步骤：

S1：实时获取目标界面的当前宽度；

S2：检测所述当前宽度是否大于预设界面宽度；如果不大于，则执行S3；如果大于，则执行S4；

S3：获取目标表格中每列的固定宽度，以生成第一适配表格；

S4：基于所述当前宽度，对目标表格中每列的宽度进行赋值以获取第二适配表格。

在一些可选的实施方式中，所述处理器被配置成执行所述计算机程序时采用以下方式实时获取目标界面的当前宽度：

利用***对所述目标界面的宽度进行实时监听，以获取所述当前宽度。

在一些可选的实施方式中，所述处理器被配置成执行所述计算机程序时采用以下方式利用***对所述目标界面的宽度进行实时监听，以获取所述当前宽度：

利用***检测所述目标界面的宽度是否发生变化；

如果发生变化，则获取所述目标界面变化后的宽度作为所述当前宽度；

如果未发生变化，则不做操作。

在一些可选的实施方式中，所述处理器被配置成执行所述计算机程序时采用以下方式获取目标表格中每列的固定宽度，以生成第一适配表格：

获取所述目标表格中每列的平均数据长度；

基于所述目标表格中每列的平均数据长度，确定所述目标表格中每列的固定宽度，以生成所述第一适配表格。

在一些可选的实施方式中，所述处理器被配置成执行所述计算机程序时采用以下方式基于所述目标表格中每列的平均数据长度，确定所述目标表格中每列的固定宽度：

基于所述目标表格中每列的平均数据长度，确定所述目标表格中每列的固定宽度并存储至预设数组；

所述生成所述第一适配表格，包括：

从所述预设数组中获取所述目标表格中每列的固定宽度，以生成所述第一适配表格。

在一些可选的实施方式中，所述处理器被配置成执行所述计算机程序时采用以下方式基于所述当前宽度，对目标表格中每列的宽度进行赋值以获取第二适配表格：

基于所述当前宽度、所述目标表格的列数和所述目标表格中每列的平均数据长度，确定所述目标表格中每列的宽度，以生成所述第二适配表格，所述第二适配表格的宽度与所述当前宽度相同。

在一些可选的实施方式中，所述处理器被配置成执行所述计算机程序时采用以下方式获取目标表格中每列的固定宽度，以生成第一适配表格：

基于所述当前宽度W1和所述第一适配表格中第一列的宽度W2，确定空白列的宽度，所述空白列的宽度不小于W1-W2；

基于所述空白列的宽度，在所述第一适配表格的末尾增加空白列以实现数据对齐，从而在左右滑动所述第一适配表格的滚动条的过程中，使第一列能够与任何列相邻。

第三方面，本申请提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述任一项方法的步骤。

附图说明

下面结合附图和实施方式对本申请进一步说明。

图1示出了本申请实施例提供的一种表格适配方法的流程示意图。

图2示出了本申请实施例提供的一种生成第一适配表格的流程示意图。

图3示出了本申请实施例提供的一种第一适配表格的示意图。

图4示出了本申请实施例提供的一种增加空白列的示意图。

图5示出了本申请实施例提供的一种第二适配表格的示意图。

图6示出了本申请实施例提供的一种电子设备的结构示意图。

图7示出了本申请实施例提供的一种程序产品的结构示意图。

具体实施方式

下面，结合附图以及具体实施方式，对本申请实施例做进一步描述，需要说明的是，在不相冲突的前提下，以下描述的各实施例之间或各技术特征之间可以任意组合形成新的实施方式。

在本申请实施例中，“至少一个”是指一个或者多个，“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B的情况，其中A，B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。“以下至少一项(个)”或其类似表达，是指的这些项中的任意组合，包括单项(个)或复数项(个)的任意组合。例如，a，b或c中的至少一项(个)，可以表示：a，b，c，a和b，a和c，b和c，a和b和c，其中a、b和c可以是单个，也可以是多个。值得注意的是，“至少一项(个)”还可以解释成“一项(个)或多项(个)”。

还需说明的是，本申请实施例中，“示例性的”或者“例如”等词用于表示作例子、例证或说明。本申请实施例被描述为“示例性的”或者“例如”的任何实施方式或设计方案不应被解释为比其他实施方式或设计方案更优选或更具优势。确切而言，使用“示例性的”或者“例如”等词旨在以具体方式呈现相关概念。

下面，首先对本申请的其中一个技术领域(前端开发)进行简单说明。

前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。

前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。

表格适配是网站开发与制作行业的web前端开发领域中不可或缺的一环，通过对表格的调试从而实现可视化和交互效果。

方法实施例

参见图1，图1示出了本申请实施例提供的一种表格适配方法的流程示意图。

本申请实施例提供了一种表格适配方法，所述方法包括：

S1：实时获取目标界面的当前宽度；

S2：检测所述当前宽度是否大于预设界面宽度；如果不大于，则执行S3；如果大于，则执行S4；

S3：获取目标表格中每列的固定宽度，以生成第一适配表格；

S4：基于所述当前宽度，对目标表格中每列的宽度进行赋值以获取第二适配表格。

由此，实时获取目标界面的当前宽度(当前时刻目标界面的宽度)，检测当前宽度是否大于预设界面宽度，如果当前宽度不大于预设界面宽度，则获取目标表格中每列的固定宽度，以生成第一适配表格；

如果当前宽度大于预设界面宽度，则基于当前宽度，对目标表格中每列的宽度进行赋值以获取第二适配表格。

当界面的当前宽度不大于预设界面宽度时，直接获取目标表格中每列地固定宽度以生成第一适配表格，避免了复杂的适配操作，使第一适配表更加规整和统一；

当界面的当前宽度大于预设界面宽度时，则进行赋值操作以获取第二适配表格，使第二适配表可以灵活地随界面的当前宽度的变化而调整；

该方法可以使表格良好地适配不同尺寸的界面，提高表格自适应的能力，便于使用者阅读和查看，提高了适配效率。

本申请实施例对目标界面不作限定，其例如可以是手机固定屏幕、折叠屏幕、笔记本屏幕、电脑屏幕、电视屏幕、智能穿戴设备屏幕和各种应用的界面。

本申请实施例对目标界面的当前宽度不作限定，其例如可以是10px、30px、50px、60px、100px、200px、500px、650px、800px、1000px、1500px、3000px、5000px、10000px等。此处px是指像素，px(Pixel，像素)是可以在数字显示设备上显示和表示的数字图像或图形的最小单位。像素是数字图形中的基本逻辑单元。

本申请实施例对预设界面宽度不作限定，其例如可以是10px、30px、50px、60px、100px、200px、500px、650px、800px、1000px、1500px、3000px、5000px、10000px等。

本申请实施例对第一适配表格和第二适配表格均不作限定，其例如可以是Excel表格、Word表格、PPT表格、WPS表格、FineReport表格、SeaTable表格等一切可以适配目标界面的表格。

在一些可选的实施方式中，所述实时获取目标界面的当前宽度(即步骤S1)，包括：

利用***对所述目标界面的宽度进行实时监听，以获取所述当前宽度。

由此，利用***对目标界面的宽度进行实时监听，从而获取当前宽度。

可以实时获取目标界面的宽度，智能化程度高，节省人力成本，如果不利用***对目标界面的宽度进行实时监听，则需要提前录入各种目标界面的宽度，耗时耗力，且容易出现错误；

用这种方法获取当前宽度不仅可以保证在目标界面的宽度变化时不会遗漏获取操作，还可以提高获取的效率。

本申请实施例对***不作限定，其例如可以是vue框架中的watch监听函数，用以监听数值的改变，其监听对象可以是一个变量也可以是一个对象。watch函数是vue框架内部提供的一个用于侦听功能的方法，可以用来响应数据的变化，通过特定的数据变化驱动一些操作。

在一些可选实施方式中，watch监听函数接受两个参数handler：function(newVal，oldVal)，第一个参数(即newVal)表示改变后的新值，第二个参数(即oldVal)表示改变前的值。监听的数据必须是data中声明过的或者是父组件向子组件传递过来的props中的数据，监听函数有两个功能：1、immediate功能：组件加载立即触发回调函数执行(一般情况下，当数据在第一次绑定时并不会执行监听函数，只有数据发生改变时才会执行监听函数，所以，如果需要最初绑定数据时就执行监听函数则需要用到immediate属性)。2、deep功能：即深度监听功能，为了发现对象内部数据的变化，复杂类型的数据时课使用深度监听功能，例如数组中对象内容的改变，而监听数组的变动则无需深度监听功能。然而，深度监听功能无法监听到数组的变动和对象的新增，只有以响应式的方式触发才会被监听到。

在一些可选的实施方式中，所述利用***对所述目标界面的宽度进行实时监听，以获取所述当前宽度，包括：

利用***检测所述目标界面的宽度是否发生变化；

如果发生变化，则获取所述目标界面变化后的宽度作为所述当前宽度；

如果未发生变化，则不做操作。

由此，利用***检测目标界面的宽度是否发生变化；如果目标界面的宽度发生变化，则获取目标界面变化后的宽度作为当前宽度；如果目标界面的宽度未发生变化，则不做操作。

基于***对目标界面的宽度进行检测可以获取目标界面的宽度变化，智能化程度高，检测效果好，可以快速获取检测结果，检测效率较高；

如果检测到目标界面的宽度没发生变化，则无需其他操作，不用重新对当前宽度进行获取和存储，节省了存储和计算的资源；

如果检测到目标界面的宽度发生变化，则获取目标界面变化后的宽度作为当前宽度，是保障表格适配当前宽度的基础。

在一些可选实施方式中，首先声明一个变量screenWidth，用以储存目标界面的当前宽度，再监听screenWidth属性值的变化，打印并观察screenWidth发生变化的值，每隔预设时长获取一次当前宽度，并将当前宽度赋值给data中的screenWide。

参见图2，图2示出了本申请实施例提供的一种生成第一适配表格的流程示意图。

在一些可选的实施方式中，所述获取目标表格中每列的固定宽度，以生成第一适配表格(即步骤S3)，包括：

步骤S201：获取所述目标表格中每列的平均数据长度；

步骤S202：基于所述目标表格中每列的平均数据长度，确定所述目标表格中每列的固定宽度，以生成所述第一适配表格。

由此，获取目标表格中每列的平均数据长度，根据目标表格中每列的平均数据长度，确定目标表格中每列的固定宽度(每列的固定宽度是指这一列的宽度是固定不变的，不同列的宽度可以不相同)，再以目标表格中每列的固定宽度为列宽，生成第一适配表格。

该方法可以使目标表格中每列的固定宽度容纳平均数据长度，有利于保证第一适配表格的每列可以更好地显示数据(每个单元格中的数据)。

本申请实施例对目标表格中每列的平均数据长度不作限定，其例如可以是1字节、2字节、3字节、5字节、7字节、8字节、10字节、15字节、16字节、32字节、64字节、128字节、526字节、1024字节等。

在一些可选的实施方式中，所述基于所述目标表格中每列的平均数据长度，确定所述目标表格中每列的固定宽度，包括：

基于所述目标表格中每列的平均数据长度，确定所述目标表格中每列的固定宽度并存储至预设数组；

所述生成所述第一适配表格，包括：

从所述预设数组中获取所述目标表格中每列的固定宽度，以生成所述第一适配表格。

由此，基于目标表格中每列的平均数据长度，确定目标表格中每列的固定宽度并存储至预设数组，再从预设数组中获取目标表格中每列的固定宽度(调用预设数组中的数据)，生成第一适配表格。

该方法不仅可以将目标表格中每列的固定宽度进行存储，还可以随时调用预设数组中的数据，可以重复利用数据，节省程序的代码量，便于统一修改和计算，运行效率更高。

本申请实施例对预设数组不作限定，其例如可以是数值数组、字符数组、变量数组等。数组(Array)是有序的元素序列，是用于储存多个相同类型数据的集合。组成数组的各个变量称为数组的分量，也称为数组的元素，有时也称为下标变量。数组是在程序设计中，为了处理方便，把具有相同类型的若干元素按有序的形式组织起来的一种数据形式，这些有序排列的同类元素的集合称为数组。本申请中的预设数组为按列数排序，用于存储目标表格中每列的固定宽度的数组。

在一些可选的实施方式中，所述基于所述当前宽度，对目标表格中每列的宽度进行赋值以获取第二适配表格(即步骤S4)，包括：

基于所述当前宽度、所述目标表格的列数和所述目标表格中每列的平均数据长度，确定所述目标表格中每列的宽度，以生成所述第二适配表格，所述第二适配表格的宽度与所述当前宽度相同。

由此，根据当前宽度、目标表格的列数和目标表格中每列的平均数据长度，从而确定目标表格中每列的宽度，以生成第二适配表格(根据当前宽度、目标表格的列数和目标表格中每列的平均数据长度实时获取得到)；

可以保证在不同宽度的目标界面中第二适配表格都可以占满整张目标界面，防止出现目标界面的当前宽度变大，但是目标表格的较小，导致使用者无法清晰地阅读的问题，使表格可视化更加美观。

本申请实施例对目标表格的列数不作限定，其例如可以是1、2、3、5、7、8、10、15、16、32、64、128、526等。

在一些可选的实施方式中，可以根据目标界面的当前宽度对colWidth数组(即预设数组，colWidth数组可以根据目标表格中每列的平均数据长度储存目标表格中每列的列宽度值)进行预设比例的赋值，其中，colWidth数组可以根据目标表格中每列的平均数据长度进行规划。

在一些可选的实施方式中，所述获取目标表格中每列的固定宽度，以生成第一适配表格(即步骤S3)，还包括：

基于所述当前宽度W1和所述第一适配表格中第一列的宽度W2，确定空白列的宽度，所述空白列的宽度不小于W1-W2；

基于所述空白列的宽度，在所述第一适配表格的末尾增加空白列以实现数据对齐，从而在左右滑动所述第一适配表格的滚动条的过程中，使第一列能够与任何列相邻。

由此，首先获取当前宽度W1和第一适配表格中第一列的宽度W2，设置第一适配表末尾的空白列的宽度不小于W1-W2(当前宽度与第一适配表格中第一列的宽度的差)，基于空白列的宽度，在第一适配表格的末尾增加空白列以实现数据对齐，从而在左右滑动第一适配表格的滚动条的过程中，使第一列能够与任何列相邻。

该方法可以使第一适配表格中的任意一列数据能够跟第一列数据对齐(第一列是位置固定的)从而实现更好地比对数据的效果，在左右滑动第一适配表格的滚动条的过程中，因为有空白列的缘故，使用者可以将任意一列滑动至与第一列接壤，从而更加便捷地查看第一列和任意一列中数据的关系。

本申请实施例对空白列的宽度不作限定，其例如可以是10px、30px、50px、60px、100px、200px、500px、650px、800px、1000px、1500px、3000px、5000px等。在一个示例中，当前宽度为1200px，第一适配表格中第一列的宽度为150px，则第一适配表末尾的空白列的宽度不小于1050px。

参见图3至图5，图3示出了本申请实施例提供的一种第一适配表格的示意图，图4示出了本申请实施例提供的一种增加空白列的示意图，图5示出了本申请实施例提供的一种第二适配表格的示意图。

在一个具体实施例中，首先，使用***获取目标界面的当前宽度，并声明一个变量screenWidth用以储存目标界面的当前宽度，再使用***(watch监听函数)检测所述目标界面的宽度是否发生变化，如果目标界面的宽度发生变化，则获取目标界面变化后的宽度作为当前宽度；如果目标界面的宽度未发生变化，则不做操作；

在获取目标界面的当前宽度之后，检测当前宽度是否大于预设界面宽度，如果当前宽度不大于预设界面宽度，则获取目标表格中每列的固定宽度，以生成第一适配表格，在本申请实施例中，目标界面的预设宽度为650px，如果当前宽度不大于650px(例如当前宽度为600px)，则生成第一适配表格，其步骤可以是，获取目标表格中每列的平均数据长度，根据目标表格中每列的平均数据长度，确定目标表格中每列的固定宽度(每列的固定宽度是指这一列的宽度是固定不变的，不同列的宽度可以不相同)，基于目标表格中每列的平均数据长度，确定目标表格中每列的固定宽度并存储至预设数组，再从预设数组中获取目标表格中每列的固定宽度，并以目标表格中每列的固定宽度为列宽，生成第一适配表格。

例如，获取目标表格中每列的平均数据长度，然后先声明一个数组colWidth(即预设数组)，这个数组可以根据目标表格中每列的平均数据长度储存目标表格中每列的列宽度值，例如数组colWidth为colWidth{72，50，50，50，50，50，50，50，70，50，60，50，45，70，45}，是指目标表格中每列的列宽度值分别为72px、50px、50px、50px、50px、50px、50px、50px、70px、50px、60px、50px、45px、70px、45px。调用数组colWidth对目标表格的每一列宽度进行赋值，从而生成第一适配表格，第一适配表格如图3所示。

在一些实际场景中，如图4，使用者需要对第一适配表格中第一列和任意一列的数据进行比对，则需要在左右滑动第一适配表格的滚动条的过程中，使第一列能够与任何列相邻，首先获取当前宽度W1和第一适配表格中第一列的宽度W2，设置第一适配表末尾的空白列的宽度不小于W1-W2(当前宽度与第一适配表格中第一列的宽度的差)，基于空白列的宽度，在第一适配表格的末尾增加空白列以实现数据对齐，从而在左右滑动第一适配表格的滚动条的过程中，使第一列能够与任何列相邻。当前宽度为800px，第一适配表格中第一列的宽度为50px，则第一适配表末尾的空白列的宽度不小于750px。

如果当前宽度大于650px(例如当前宽度为770px)，则根据当前宽度、目标表格的列数和目标表格中每列的平均数据长度，从而确定目标表格中每列的宽度，以生成第二适配表格(根据当前宽度、目标表格的列数和目标表格中每列的平均数据长度实时获取得到)，其具体步骤可以是，根据目标界面的当前宽度对colWidth数组(即预设数组，这个数组可以根据目标表格中每列的平均数据长度储存目标表格中每列的列宽度值)进行预设比例的赋值，其中，colWidth数组可以根据目标表格中每列的平均数据长度进行规划。例如，使用watch()方法(即***，又称watch监听函数)监听变量screenWidth，当当前宽度变化时(例如，折叠屏展开和收起状态切换时或手机横屏和竖屏状态切换时)，我们可以实时获取到当前变化之后的屏幕宽度，再触发changeWidth()函数，便可以在每次折叠屏展开或者收起时重新给目标表格的每一列的宽度进行赋值。在本申请实施例中，根据目标界面的当前宽度按预设比例对colWidth数组进行动态赋值，可以保证在不同宽度的目标界面中第二适配表格都可以占满整张目标界面，第二适配表格如图5所示。

在一些具体应用场景中，可以使用第一设备往第二设备(第二设备即下文中的电子设备，例如电脑、电视、只能穿戴设备)上进行投屏(投屏又称为同屏、屏幕共享、多屏互动。具体来说，是通过交互方法将移动设备A(即第一设备如手机、ipad、电脑)的画面“实时地”显示在另一个设备B(即第二设备，如投影机、会议平板、拼接屏、电子白板、电视机)上，输出的内容包括表格、相册、视频、音频等各类多媒体信息，也包括在设备A上的实时操作画面)操作，当使用者在设备B上对表格进行放缩、拖拽时，可以利用***实时检测当前宽度并生成第二适配表格。如果将设备A的多个应用界面投放到接收设备上(此时每个应用界面可以称之为分屏界面)，可以设置多个***，根据多个当前宽度对多个colWidth数组(即预设数组，这个数组可以根据目标表格中每列的平均数据长度储存目标表格中每列的列宽度值)进行多个预设比例的赋值，从而得到多个大小相同或者大小不同的表格；也可以在多个表格中选择出主表格，将其他表格作为子表格关联至主表格，根据主表格的变化而进行变化。

还可以在表格适配过程中增加表格大小推荐功能，即根据***对目标界面的当前宽度的监听结果，推荐多种表格的大小供使用者选择，也可以让使用者自定义表格的大小，从而对目标界面进行适配。其中，目标界面还可以是分屏界面(例如，上下分屏、左右分屏、多分屏等)的其中一个，每个分屏界面用于显示不同的应用界面，每个应用界面可以包含多格不同类型的表格。当采用设备B显示设备A的多个应用界面时，多个应用界面可以占满设备B的屏幕，也可以不占满设备B的屏幕。目标界面可以是多个应用界面的其中一个。

在使用空白列的过程中，可以开启特定保存功能，即用户对表格进行编辑之后，只会保存用户的编辑(例如数据比对过程中的分析、更改、计算和填写等操作)，而不保存空白列，并在用户对表格进行“保存”时可以将空白列自动删除。

设备实施例

本申请实施例还提供了一种电子设备，其具体实施方式与上述方法实施例中记载的实施方式、所达到的技术效果一致，部分内容不再赘述。

本申请提供了一种电子设备，所述电子设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器被配置成执行所述计算机程序时实现以下步骤：

S1：实时获取目标界面的当前宽度；

S2：检测所述当前宽度是否大于预设界面宽度；如果不大于，则执行S3；如果大于，则执行S4；

S3：获取目标表格中每列的固定宽度，以生成第一适配表格；

S4：基于所述当前宽度，对目标表格中每列的宽度进行赋值以获取第二适配表格。

在一些可选的实施方式中，所述处理器被配置成执行所述计算机程序时采用以下方式实时获取目标界面的当前宽度：

利用***对所述目标界面的宽度进行实时监听，以获取所述当前宽度。

在一些可选的实施方式中，所述处理器被配置成执行所述计算机程序时采用以下方式利用***对所述目标界面的宽度进行实时监听，以获取所述当前宽度：

利用***检测所述目标界面的宽度是否发生变化；

如果发生变化，则获取所述目标界面变化后的宽度作为所述当前宽度；

如果未发生变化，则不做操作。

在一些可选的实施方式中，所述处理器被配置成执行所述计算机程序时采用以下方式获取目标表格中每列的固定宽度，以生成第一适配表格：

获取所述目标表格中每列的平均数据长度；

基于所述目标表格中每列的平均数据长度，确定所述目标表格中每列的固定宽度，以生成所述第一适配表格。

在一些可选的实施方式中，所述处理器被配置成执行所述计算机程序时采用以下方式基于所述目标表格中每列的平均数据长度，确定所述目标表格中每列的固定宽度：

基于所述目标表格中每列的平均数据长度，确定所述目标表格中每列的固定宽度并存储至预设数组；

所述生成所述第一适配表格，包括：

从所述预设数组中获取所述目标表格中每列的固定宽度，以生成所述第一适配表格。

在一些可选的实施方式中，所述处理器被配置成执行所述计算机程序时采用以下方式基于所述当前宽度，对目标表格中每列的宽度进行赋值以获取第二适配表格：

基于所述当前宽度、所述目标表格的列数和所述目标表格中每列的平均数据长度，确定所述目标表格中每列的宽度，以生成所述第二适配表格，所述第二适配表格的宽度与所述当前宽度相同。

在一些可选的实施方式中，所述处理器被配置成执行所述计算机程序时采用以下方式获取目标表格中每列的固定宽度，以生成第一适配表格：

基于所述当前宽度W1和所述第一适配表格中第一列的宽度W2，确定空白列的宽度，所述空白列的宽度不小于W1-W2；

基于所述空白列的宽度，在所述第一适配表格的末尾增加空白列以实现数据对齐，从而在左右滑动所述第一适配表格的滚动条的过程中，使第一列能够与任何列相邻。

参见图6，图6示出了本申请实施例提供的一种电子设备的结构示意图。

电子设备包括至少一个存储器210、至少一个处理器220以及连接不同平台***的总线230。

存储器210可以包括易失性存储器形式的可读介质，例如随机存取存储器(RAM)211和/或高速缓存存储器212，还可以进一步包括只读存储器(ROM)213。

其中，存储器210还存储有计算机程序，计算机程序可以被处理器220执行，使得处理器220实现上述任一项方法的步骤。

存储器210还可以包括具有至少一个程序模块215的实用工具214，这样的程序模块215包括但不限于：操作***、一个或者多个应用程序、其它程序模块以及程序数据，这些示例的每一个或某种组合中可能包括网络环境的实现。

相应的，处理器220可以执行上述计算机程序，以及可以执行实用工具214。

处理器220可以采用一个或多个应用专用集成电路(ASIC，Application SpecificIntegrated Circuit)、DSP、可编程逻辑器件(PLD，Programmable Logic Device)、复杂可编程逻辑器件(CPLD，Complex Programmable Logic Device)、现场可编程门阵列(FPGA，Field-Programmable Gate Array)或其他电子元件。

总线230可以为表示几类总线结构的一种或多种，包括存储器总线或者存储器控制器、***总线、图形加速端口、处理器或者使用多种总线结构的任意总线结构的局域总线。

电子设备也可以与一个或多个外部设备240例如键盘、指向设备、蓝牙设备等通信，还可与一个或者多个能够与该电子设备交互的设备通信，和/或与使得该电子设备能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等)通信。这种通信可以通过输入输出接口250进行。并且，电子设备还可以通过网络适配器260与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。网络适配器260可以通过总线230与电子设备的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理器、外部磁盘驱动阵列、RAID***、磁带驱动器以及数据备份存储平台等。

介质实施例

本申请实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述任一项方法的步骤，其具体实施方式与上述方法实施例中记载的实施方式、所达到的技术效果一致，部分内容不再赘述。

参见图7，图7示出了本申请实施例提供的一种程序产品的结构示意图。

所述程序产品用于实现上述任一项方法。程序产品可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本发明的程序产品不限于此，在本申请实施例中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行***、装置或者器件使用或者与其结合使用。程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

计算机可读存储介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读存储介质还可以是任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等，或者上述的任意合适的组合。可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，程序设计语言包括面向对象的程序设计语言诸如Java、C++等，还包括常规的过程式程序设计语言诸如C语言、Python语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

本申请从使用目的上，效能上，进步及新颖性等观点进行阐述，已符合专利法所强调的功能增进及使用要件，本申请以上的说明书及说明书附图，仅为本申请的较佳实施例而已，并非以此局限本申请，因此，凡一切与本申请构造，装置，特征等近似、雷同的，即凡依本申请专利申请范围所作的等同替换或修饰等，皆应属本申请的专利申请保护的范围之内。

Claims (10)

1.一种表格适配方法，其特征在于，所述方法包括：

S1：实时获取目标界面的当前宽度；

S2：检测所述当前宽度是否大于预设界面宽度；如果不大于，则执行S3；如果大于，则执行S4；

S3：获取目标表格中每列的固定宽度，以生成第一适配表格；

S4：基于所述当前宽度，对目标表格中每列的宽度进行赋值以获取第二适配表格。

2.根据权利要求1所述的表格适配方法，其特征在于，所述实时获取目标界面的当前宽度，包括：

利用***对所述目标界面的宽度进行实时监听，以获取所述当前宽度。

3.根据权利要求2所述的表格适配方法，其特征在于，所述利用***对所述目标界面的宽度进行实时监听，以获取所述当前宽度，包括：

利用***检测所述目标界面的宽度是否发生变化；

如果发生变化，则获取所述目标界面变化后的宽度作为所述当前宽度；

如果未发生变化，则不做操作。

4.根据权利要求1所述的表格适配方法，其特征在于，所述获取目标表格中每列的固定宽度，以生成第一适配表格，包括：

获取所述目标表格中每列的平均数据长度；

基于所述目标表格中每列的平均数据长度，确定所述目标表格中每列的固定宽度，以生成所述第一适配表格。

5.根据权利要求4所述的表格适配方法，其特征在于，所述基于所述目标表格中每列的平均数据长度，确定所述目标表格中每列的固定宽度，包括：

基于所述目标表格中每列的平均数据长度，确定所述目标表格中每列的固定宽度并存储至预设数组；

所述生成所述第一适配表格，包括：

从所述预设数组中获取所述目标表格中每列的固定宽度，以生成所述第一适配表格。

6.根据权利要求4所述的表格适配方法，其特征在于，所述基于所述当前宽度，对目标表格中每列的宽度进行赋值以获取第二适配表格，包括：

基于所述当前宽度、所述目标表格的列数和所述目标表格中每列的平均数据长度，确定所述目标表格中每列的宽度，以生成所述第二适配表格，所述第二适配表格的宽度与所述当前宽度相同。

7.根据权利要求1所述的表格适配方法，其特征在于，所述获取目标表格中每列的固定宽度，以生成第一适配表格，还包括：

基于所述当前宽度W1和所述第一适配表格中第一列的宽度W2，确定空白列的宽度，所述空白列的宽度不小于W1-W2；

基于所述空白列的宽度，在所述第一适配表格的末尾增加空白列以实现数据对齐，从而在左右滑动所述第一适配表格的滚动条的过程中，使第一列能够与任何列相邻。

8.一种电子设备，其特征在于，所述电子设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器被配置成执行所述计算机程序时实现以下步骤：

S1：实时获取目标界面的当前宽度；

S2：检测所述当前宽度是否大于预设界面宽度；如果不大于，则执行S3；如果大于，则执行S4；

S3：获取目标表格中每列的固定宽度，以生成第一适配表格；

S4：基于所述当前宽度，对目标表格中每列的宽度进行赋值以获取第二适配表格。

9.根据权利要求8所述的电子设备，其特征在于，所述处理器被配置成执行所述计算机程序时采用以下方式实时获取目标界面的当前宽度：

利用***对所述目标界面的宽度进行实时监听，以获取所述当前宽度。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1-7任一项所述方法的步骤。

Images