一种Web端后台数据表格自动适配的方法及设备

技术领域

本申请涉及互联网技术领域，尤其涉及一种Web端后台数据表格自动适配的方法及设备。

背景技术

随着全国各地智慧社区的建设，Web端数据管理后台成了市、区县、街道、社区必不可少的平台。Web端数据管理后台可以比较直观地管理数据，实现数据全面感知，全面提升工作效率。可以对社区的人口、车辆、房屋、组织、网格、疫苗等方面进行数据统计、查询、操作。满足了管理、日常数据分析、展示、汇报等工作场景，大大提升了基层工作人员的工作效率。

数据表格是Web端数据管理后台最为重要的组成部分，承担着数据展示和操作的功能，而目前UI设计稿的标准分辨率是1920px*1080px，设备的主流尺寸却多达十几种，一种分辨率下的表格设计标准被应用在十几种分辨率的设备上，最后导致表格在大的分辨率下字太小看不清楚，间距分布不匀称，有的很拥挤，有的太稀松，在偏小的分辨率下会造成，字号太大，浪费空间；间距分布不均匀，甚至有换行的情况出现。以上这几种情况都会给基层社区工作者带来很不好的使用体验，甚至内容出现歧义出现工作事故。

因此，现亟需一种适应标准分辨率的数据表格适配方法。

发明内容

本申请实施例提供了一种Web端后台数据表格自动适配的方法及设备，用于解决如下技术问题：一种分辨率下的表格设计标准被应用在十几种分辨率的设备上，导致表格显示不合理。

本申请实施例采用下述技术方案：

一方面，本申请实施例提供了一种Web端后台数据表格自动适配的方法，所述方法包括：对不同设备Web端后台页面进行模块化分割，得到表格模块；确定所述表格模块的宽度w与高度h；将所述宽度w与所述高度h分别与标准UI设计稿中表格的宽度W与高度H进行比对，并根据比对结果对不同设备Web端后台数据表格的表格要素进行调整；其中，所述表格要素至少包括表格字号、表格面积、表格元素间距及表格行高。

在本申请说明书的一个或多个实施例中，所述根据比对结果对不同设备Web端后台数据表格的表格要素进行调整，具体包括：将所述宽度w与所述宽度W进行比对；在所述宽度w等于所述宽度W时，将所述表格字号调整为所述标准UI设计稿中表格的字号，以及将所述表格面积调整为所述标准UI设计稿中表格的面积。

在本申请说明书的一个或多个实施例中，将所述宽度w与所述宽度W进行比对之后，所述方法还包括：确定所述宽度w与所述宽度W不相等；计算所述宽度w与所述宽度W二者之间的差值绝对值，并将所述差值绝对值除以500确定为所述表格要素的第一调整参数；通过所述宽度w与所述宽度W之间的大小关系，利用所述第一调整参数，对所述表格字号与所述表格面积进行调整。

在本申请说明书的一个或多个实施例中，通过所述宽度w与所述宽度W之间的大小关系，利用所述第一调整参数，对所述表格字号与所述表格面积进行调整，具体包括：在所述宽度w大于所述宽度W时，将所述表格字号调整为所述标准UI设计稿中表格的字号与所述第一调整参数之和，并将所述表格面积调整为所述标准UI设计稿中表格的面积与所述第一调整参数之和；以及，在所述宽度w小于所述宽度W时，将所述表格字号调整为所述标准UI设计稿中表格的字号减去所述调整参数所得的数值，并将所述表格面积调整为所述标准UI设计稿中表格的面积减去所述调整参数所得的数值。

在本申请说明书的一个或多个实施例中，所述根据比对结果对不同设备Web端后台数据表格的表格要素进行调整，具体包括：将所述宽度w与所述宽度W进行比对；在所述宽度w等于所述宽度W时，将所述表格元素间距调整为所述标准UI设计稿中表格的元素间距；以及，在所述宽度w大于所述宽度W时，将所述表格元素间距调整为所述标准UI设计稿中表格的元素间距与第二调整参数之和，所述第二调整参数通过所述宽度w与所述宽度W之间的差值绝对值与表格元素数量S的比值确定；以及，在所述宽度w小于所述宽度W时，通过表格元素长度之和L与所述表格元素数量S，确定第一判别参数；基于所述第一判别参数与所述宽度w之间的大小关系，对所述表格元素间距进行调整。

在本申请说明书的一个或多个实施例中，基于所述第一判别参数与所述宽度w之间的大小关系，对所述表格元素间距进行调整，具体包括：在所述宽度w大于所述第一判别参数时，将所述表格元素间距调整为所述标准UI设计稿中表格的元素间距减去所述第二调整参数；以及，在所述宽度w小于所述第一判别参数时，将所述表格元素间距调整为所述标准UI设计稿中表格的元素间距减去所述第二调整参数，同时在所述表格模块的底部增加滑动条，以实现所述表格模块的左右滑动。

在本申请说明书的一个或多个实施例中，所述根据比对结果对不同设备Web端后台数据表格的表格要素进行调整，具体包括：将所述高度h与所述高度H进行比对；在所述高度h等于所述高度H时，将所述表格行高调整为所述标准UI设计稿中表格的行高；以及，在所述高度h大于所述高度H时，将所述表格行高调整为所述标准UI设计稿中表格的行高与第三调整参数之和，所述第三调整参数通过所述高度h与所述高度H之间的差值绝对值与表格行数N的比值确定；以及，在所述高度h小于所述高度H时，通过所述表格字号加16，再乘上所述表格行数N，确定第二判别参数；基于所述第二判别参数与所述高度h之间的大小关系，对所述表格行距进行调整。

在本申请说明书的一个或多个实施例中，基于所述第二判别参数与所述高度h之间的大小关系，对所述表格行距进行调整，具体包括：在所述高度h大于所述第二判别参数时，将所述表格行距调整为所述标准UI设计稿中表格的行距减去所述第三调整参数；以及，在所述高度h小于所述第二判别参数时，将所述表格行距调整为所述标准UI设计稿中表格的行距减去所述第三调整参数，同时在所述表格模块的右侧增加滑动条，以实现所述表格模块的上下滑动。

在本申请说明书的一个或多个实施例中，所述方法还包括：针对同一设备缩放浏览器时，对所述同一设备的Web端后台页面进行模块化分割，得到表格模块，并确定所述表格模块的宽度w与高度h；在所述宽度w等于所述宽度W时，将所述元素模块间距调整为所述标准UI设计稿中表格的元素间距；以及，在所述宽度w大于所述宽度W时，将所述元素模块间距调整为所述标准UI设计稿中表格的元素间距与第二调整参数之和；以及，在所述宽度w小于所述宽度W且所述宽度w大于第一判别参数时，将所述元素间距调整为所述标准UI设计稿中表格的元素间距减去所述第二调整参数；以及，在所述宽度w小于所述第一判别参数时，将所述表格元素间距调整为所述标准UI设计稿中表格的元素间距减去所述第二调整参数，同时在所述表格模块的底部增加滑动条；在所述高度h等于所述高度H时，将所述表格行高调整为所述标准UI设计稿中表格的行高；以及，在所述高度h大于所述高度H时，将所述表格行高调整为所述标准UI设计稿中表格的行高与第三调整参数之和；以及，在所述高度h小于所述高度H且所述高度h大于第二判别参数时，将所述表格行距调整为所述标准UI设计稿中表格的行距减去所述第三调整参数；以及，在所述高度h小于所述第二判别参数时，将所述表格行距调整为所述标准UI设计稿中表格的行距减去所述第三调整参数，同时在所述表格模块的右侧增加滑动条。

另一方面，本申请实施例还提供了一种Web端后台数据表格自动适配的设备，所述设备包括：至少一个处理器；以及，与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有能够被所述至少一个处理器执行的指令，以使所述至少一个处理器能够执行如上述的一种Web端后台数据表格自动适配的方法。

本申请实施例提供的一种Web端后台数据表格自动适配的方法及设备，具有以下有益效果：通过上述方法实现了一种表格设计标准能够适应多种分辨率的设备，使数据表格在各种设备上都能合理的展示数据，提升了工作效率也提高了用户体验，具体如下：

(1)提高工作效率，节约时间成本。Web端后台数据表格自动适配的方法，首先提高了UI设计师的工作效率，对Web端后台只需要设计一种标准的设计稿，不必为了多种设备，设计不同分辨率的设计稿；其次，提高了前端工程师的工作效率，他们不必为了适配多种设备反复去调试代码。

(2)提高用户体验。传统的Web端后台数据表格适配方法，不能满足所有设备的屏幕都能展现出合理的元素间距，以及表格的高度、文字和面积的大小，给基层工作人员的体验是不好的，从而效率也会变低。现在Web端后台数据表格自动适配的方法可以满足所有设备，以及浏览器窗口缩放带来的分辨率变化，能够给社区基层工作人员带来更好的用户体验，易读易操作。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：

图1为本申请实施例提供的一种Web端后台数据表格自动适配的方法流程图；

图2为本申请实施例提供的一种应用场景下，模块化分割结果图；

图3为本申请实施例提供的一种Web端后台数据表格自动适配的设备的结构示意图。

具体实施方式

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

本申请实施例提供了一种Web端后台数据表格自动适配的方法及设备，通过对设备与浏览器屏幕进行自动截图，然后将截图上传给后台，后台利用自动识别技术，自动识别设备与浏览器的分辨率，接着根据不同的分辨率进行计算，计算出不同元素模块合适的间距、文字合适的大小、切图合适的大小，最后把它们根据相应的数值进行调整，达到一个比较好的适配效果。利用Web端后台数据表格自动适配的方法，可以让表格根据模块内容的不同从而保持一个比较合适的疏密状态、文字的大小更适合阅读，切图的大小更容易识别，这样可以给基层社区工作人员带来更好的使用体验。

下面通过附图对本申请实施例中的方法进行详细说明。

图1为本申请实施例提供的一种Web端后台数据表格自动适配的方法流程图，如图1所示，本申请实施例中的数据表格自动适配方法至少包括以下执行步骤：

步骤101、对不同设备Web端后台页面进行模块化分割，得到表格模块。

本申请实施例提供的数据表格自动适配方法，主要是为了实现一种分辨率下的表格设计标准可以被应用在十几种分辨率的设备上，达到较好的适配效果，因此，首先要对不同设备Web端的后台页面进行模块化分割。

Web端后台一般是由导航栏、侧边栏、和最主要的表格内容区域组成，因此在分割时可以按照这些功能区域进行分割，得到如图2所示的模块化分割结果图，并且由图2可以看出，模块化分割完成之后，得到导航栏模块、侧边栏模块与表格模块，但是本申请中的适配方法只需要表格模块的分辨率，所以需要把导航栏模块和侧边栏模块进行剔除。在本申请的一个示例中，此处的剔除可以通过将图2中的表格模块裁剪实现。

步骤102、确定所述表格模块的宽度w与高度h。

在得到表格模块之后，可由利用自动识别技术去识别表格模块的宽度w与高度h。需要说明的是，此处的自动识别技术可以通过现有的技术手段实现，本申请实施例对此不做赘述。

步骤103、将所述宽度w与所述高度h分别与标准UI设计稿中表格的宽度W与高度H进行比对，并根据比对结果对不同设备Web端后台数据表格的表格要素进行调整。

在得到表格模块的宽度w与高度h之后，就可以进行表格要素的调整，在本申请的一个示例中，前述表格要素至少包括表格字号、表格面积、表格元素间距及表格行高。

在基层治理这种业务下有很多表格元素，可以分为固定长度元素、不固定长度元素，固定长度元素，比如姓名、状态、操作按钮等，一般一个字段就是一个表格元素；而不固定长度元素，比如详情，家庭住址等,这时需要对这个元素进行自定义长度，能显示开的，把最长的字段定一个表格元素，字段特别长的、不能显示开的去给这个字段自定义一个长度，称为一个表格元素。

具体地，根据宽的变化去调节表格元素的横向间距，根据高的变化去调节表格的行高；此处文字的大小通过表格字号表征，切图的大小通过表格面积表征，且这两项只受宽的变化所控制，原因在于屏幕的比例主流的有16:9、16:10、4:3等，不同设备的屏幕比例也不固定，而切图和文字都是固定比例的，如果根据宽和高的变化都去调节文字和切图的大小，文字和切图就会变形，所以只能按照一个方向去调整。

在本申请实施例的一种或多种可能实现方式中，根据比对结果对不同设备Web端后台数据表格的表格要素进行调整，具体包括：

1)、对表格字号与表格面积进行调整：

首先，获取标准UI设计稿中表格的宽度W，之后，对宽度w与宽度W进行比对：

将标准UI设计稿中表格的表格字号用P1表示，表格面积的大小用P2表示，需要自动适配的表格字号用p1表示，表格面积的大小用p2表示，那么，

当w＝W时，则p1＝P1，p2＝P2；

当w>W时，p1＝P1+(w-W)/500，p2＝P2+(w-W)/500；

当w

此处的(w-W)/500与(W-w)/500可以为前述的第一调整参数。

2)、对表格元素间距进行调整；

对宽度w与宽度W进行比对：

将标准UI设计稿中表格的表格元素间距用D表示，需要自动适配的表格字号用d表示，需要自动适配的表格中的表格元素数量用S表示，表格元素长度之和用L表示，那么，

当w＝W时，则d＝D；

当w>W时，d＝D+(w-W)/S；

当L+(S-1)*32≤w

此处的L+(S-1)*32可以为前述的第一判别参数，(W-w)/S与(w-W)/S可以为前述的第二调整参数。

3)、对表格行高进行调整；

首先，获取标准UI设计稿中表格的高度H，之后，对高度h与高度H进行比对：

将标准UI设计稿中表格的表格行高用H1表示，需要自动适配的表格字号用h1表示，行数用N表示，那么，

当h＝H时，则h1＝H1；

当h>H时，h1＝H1+(h-H)/N；

当N*(P1+16)≤h

此处的N*(P1+16)可以为前述的第二判别参数，(h-H)/N与(H-h)/N可以为前述的第三调整参数。

至此，完成不同设备Web端后台数据表格中表格要素的调整。

在实际使用过程中，用户通常会对同一设备的浏览器进行缩放，因此，本申请实施例还提供了同一设备浏览器缩放时，表格要素的调整方案。

具体地，同一设备每缩放一次浏览器时，Web端后台页面进行一次模块化分割，得到最新的表格模块，也即确定最新的表格模块的宽度w与高度h。为了容易描述且便于理解，本申请实施例中在本节中不改变字母代表的含义，也即，需调整表格的表格字号用p1表示，表格面积用p2表示，表格要素间距用d表示，表格行高用h1表示。那么，在调整时，

首先将宽度w与宽度W进行比对，调整表格元素间距d：

当w＝W时，则d＝D；

当w>W时，d＝D+(w-W)/S；

当L+(S-1)*32≤w

其次，将h与H进行对比，调整表格行高h1：

当h>H时，h1＝H1+(h-H)/N；

当N*(P1+16)≤h

针对同一设备浏览器缩放导致的表格调整过程中，不需要调整表格字号与表格面积，这是因为表格字号与表格面积这两项会随着表格的缩放进行等比例缩放。

基于同样的发明构思，本申请实施例还提供了一种Web端后台数据表格自动适配的设备，其结构如图3所示。

图3为本申请实施例提供的一种Web端后台数据表格自动适配的设备的结构示意图。如图3所示，本申请实施例中的设备300具体包括：至少一个处理器301；以及，与至少一个处理器301通信连接(通过总线302连接)的存储器303；其中，存储器303存储有能够被至少一个处理器301执行的指令，以使至少一个处理器301能够执行如上述实施例所描述的一种Web端后台数据表格自动适配的方法。

在本申请实施例的一种或多种可能实现方式中，前述处理器用于执行，对不同设备Web端后台页面进行模块化分割，得到表格模块；确定所述表格模块的宽度w与高度h；将所述宽度w与所述高度h分别与标准UI设计稿中表格的宽度W与高度H进行比对，并根据比对结果对不同设备Web端后台数据表格的表格要素进行调整；其中，所述表格要素至少包括表格字号、表格面积、表格元素间距及表格行高。

本领域内的技术人员应明白，本说明书实施例可提供为方法、系统、或计算机程序产品。因此，本说明书实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本说明书实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本说明书是参照根据本说明书实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本说明书可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本说明书，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置、设备、非易失性计算机存储介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

以上所述仅为本说明书的一个或多个实施例而已，并不用于限制本说明书。对于本领域技术人员来说，本说明书的一个或多个实施例可以有各种更改和变化。凡在本说明书的一个或多个实施例的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本说明书的权利要求范围之内。