页面表格布局方法及装置与流程

本发明涉及信息技术领域，尤其涉及一种页面表格布局方法及装置。

背景技术：

页面表格布局插件，如Gridstack插件，可以实现页面表格布局。页面表格布局插件通常按照固定的列数分割页面，如将页面固定的分割为12列，因此每个单元格的宽度是固定的，单元格之间的水平间距也是固定的。在实际的页面表格布局时，用户只需要提供小部件布局即可。

目前，在页面表格布局时，通常通过页面表格布局插件提供的单元格之间的固定水平间距进行页面布局。然而，用户对页面表格布局的需要可能与页面表格布局插件提供的固定单元格之间的水平间距不相同，若按照页面表格布局插件提供的固定单元格之间的水平间距进行页面表格布局，会造成页面表格布局不准确，从而导致页面表格布局的准确率较低。然而，目前页面表格布局插件未提供调整单元格之间水平间距的配置参数。

技术实现要素：

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的页面表格布局方法及装置。

依据本发明的一个方面，本发明提出了一种页面表格布局方法，包括：

当接收到页面表格布局指令时，初始化页面表格布局插件，所述页面表格布局指令携带需要添加小部件的属性信息以及单元格的预置水平间距；

通过所述页面表格布局插件提供的预置添加函数和所述需要添加小部件的属性信息，在页面中添加小部件；

通过所述小部件对应的层叠样式表和所述单元格的预置水平间距，更新所述添加的小部件。

依据本发明的另一个方面，本发明提出了一种页面表格布局装置，包 括：

初始化单元，用于当接收到页面表格布局指令时，初始化页面表格布局插件，所述页面表格布局指令携带需要添加小部件的属性信息以及单元格的预置水平间距；

添加单元，用于通过所述页面表格布局插件提供的预置添加函数和所述需要添加小部件的属性信息，在页面中添加小部件；

更新单元，用于通过所述小部件对应的层叠样式表和所述单元格的预置水平间距，更新所述添加的小部件。

借由上述技术方案，本发明提供的一种页面表格布局方法及装置。当接收到页面表格布局指令时，初始化页面表格布局插件，所述页面表格布局指令携带需要添加小部件的属性信息以及单元格的预置水平间距；通过页面表格布局插件提供的预置添加函数和所述需要添加小部件的属性信息，在页面中添加小部件；通过所述小部件对应的层叠样式表和所述单元格的预置水平间距，更新所述添加的小部件。本发明实施例，通过所述小部件对应的层叠样式表和所述单元格的预置水平间距，，可以设置每个单元格的水平间距，从而能够实现按照用户的需求进行页面布局，保证页面表格布局的准确性，提升页面表格布局的准确率。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了本发明实施例提供的一种页面表格布局方法的流程图；

图2示出了本发明实施例提供的另一种页面表格布局方法的流程图；

图3示出了本发明实施例提供的一种页面表格布局装置的结构示意图；

图4示出了本发明实施例提供的一种页面表格布局装置的结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

本发明实施例提供了一种页面表格布局方法，如图1所示，该方法包括：

101、当接收到页面表格布局指令时，初始化页面表格布局插件。

其中，所述页面表格布局指令携带需要添加小部件的属性信息以及单元格的预置水平间距。所述页面表格布局插件可以为Gridstack插件。Gridstack插件是一个jQuery插件，可以实现可拖和放的，多列网格的插件化布局。Gridstack插件允许用户构建可拖动的、响应式的页面布局。所述小部件用于承载和显示页面元素，页面元素可以为用户需要在页面上显示的图片等。所述小部件的属性信息可以为小部件的位置信息和尺寸信息。所述尺寸信息可以为小部件的宽度和高度。所述水平间距为单元格的左右间距。

需要说明的是，页面表格布局插件通常会将页面按照N行×M列进行分割，分割成N×M个单元格。在页面表格布局插件中根据单元格进行小部件的添加。页面表格布局插件在配置参数中未提供设置每个单元格左右间距的配置参数。通常每个单元格的左右间距的默认值分别为10个像素点。

所述单元格的预置水平间距为用户输入的单元格水平间距，如用户需要设置每个单元格的水平间距为15个像素点。

102、通过页面表格布局插件提供的预置添加函数和需要添加小部件的属性信息，在页面中添加小部件。

其中，所述预置添加函数可以为add_widget函数，具体可以为add_widget(x，y，width，height)。x，y表示小部件在页面中的位置，width为在页面中跨的行，height为在页面中跨的列。若小部件的属性信息为x＝0，y＝0，width＝1，height＝2，单元格的宽度为8.3个像素点、高度为10个像素点，则通过调用add_widget(0，0，1，2)，在页面中添加的小部件为从页 面左上角开始宽度为16.6个像素点，高度为10个像素点的表格。每个单元格之间的默认水平间距为10个像素点。

103、通过小部件对应的层叠样式表和单元格的预置水平间距，更新添加的小部件。

例如，在页面中添加的小部件为从页面左上角开始宽度为16.6个像素点，高度为10个像素点的表格，单元格的预置水平间距为10个像素点，通过所述小部件对应的层叠样式表，即通过小部件对应的层叠样式表的right属性(右边缘)和left属性(左边缘)，调整小部件的水平间距，将页面中单元格的水平间距更新为15个像素点。

对于本发明实施例，通过所述小部件对应的层叠样式表将页面中单元格的水平间距，可以设置每个单元格的水平间距，从而能够实现按照用户的需求进行页面布局，保证页面表格布局的准确性，提升页面表格布局的准确率。

本发明实施例提供的一种页面表格布局方法。当接收到页面表格布局指令时，初始化页面表格布局插件，所述页面表格布局指令携带需要添加小部件的属性信息以及单元格的预置水平间距；通过所述页面表格布局插件提供的预置添加函数和所述需要添加小部件的属性信息，在页面中添加小部件；通过所述小部件对应的层叠样式表和所述单元格的预置水平间距，更新所述添加的小部件。本发明实施例，通过所述小部件对应的层叠样式表和所述单元格的预置水平间距，可以设置每个单元格的水平间距，从而能够实现按照用户的需求进行页面布局，保证页面表格布局的准确性，提升页面表格布局的准确率。

本发明实施例提供了另一种页面表格布局方法，如图2所示，该方法包括：

201、当接收到页面表格布局指令时，初始化页面表格布局插件。

其中，所述页面表格布局指令携带需要添加小部件的属性信息以及单元格的预置水平间距。所述页面表格布局插件可以为Gridstack插件。所述小部件的属性信息包括小部件的位置信息和小部件的尺寸信息。所述尺寸信息可以为小部件的宽度和高度。所述水平间距为单元格的左右间距。所 述单元格的预置水平间距为用户输入的单元格水平间距，如用户需要设置每个单元格的水平间距为15个像素点。

202、通过页面表格布局插件提供的预置添加函数和需要添加小部件的属性信息，在页面中添加小部件。

对于本发明实施例，在步骤202之前具体还可以包括：获取所述页面表格布局插件中的拖动框；配置所述拖动框对应的层叠样式表的水平间距。其中，页面表格布局插件只提供一个拖动框，拖动框对应的层叠样式表的类中含有placeholder-content，通过拖动框对应的层叠样式表的right属性(右边缘)和left属性(左边缘)，调整拖动框的水平间距。通过配置所述拖动框对应的层叠样式表的水平间距，能够对拖动框的水平间距进行调整，从而能够避免拖动框遮盖单元格，保证页面布局的美观。

对于本发明实施例，步骤202具体可以为：通过页面表格布局插件提供的add_widget函数和需要添加小部件的属性信息，在页面中添加小部件

203、通过小部件对应的层叠样式表和单元格的预置水平间距，更新添加的小部件。

对于本发明实施例，通过所述小部件对应的层叠样式表将页面中单元格的水平间距，可以设置每个单元格的水平间距，从而能够实现按照用户的需求进行页面布局，保证页面表格布局的准确性，提升页面表格布局的准确率。

204、将小部件对应的可缩放图标提示调整到小部件的预置位置。

对于本发明实施例，更新完添加的小部件后，小部件上的可缩放图标会保持在原始的位置，若可缩放图标会保持在原始的位置会影响页面的展示效果。因此，将可缩放图标调整小部件右下角的resizable(可变调整尺寸提示的位置上，能够保证页面的展示效果，提升用户的体验。

需要说明的是，在步骤204之后，具体还可以包括：获取小部件相邻的页面元素中，层叠样式表的类包含ui-resizable-se的元素，并设置该元素的右间距，使得该元素的右间距与小部件的右间距相同。通过将小部件相邻的页面元素中，层叠样式表的类包含ui-resizable-se的元素的右间距设置为小部件的右间距，能够保证页面的展示效果，提升用户的体验。

本发明实施例提供的另一种页面表格布局方法。当接收到页面表格布局指令时，初始化页面表格布局插件，所述页面表格布局指令携带需要添加小部件的属性信息以及单元格的预置水平间距；通过页面表格布局插件提供的预置添加函数和所述需要添加小部件的属性信息，在页面中添加小部件；通过所述小部件对应的层叠样式表和所述单元格的预置水平间距，更新所述添加的小部件。本发明实施例，通过所述小部件对应的层叠样式表和所述单元格的预置水平间距，，可以设置每个单元格的水平间距，从而能够实现按照用户的需求进行页面布局，保证页面表格布局的准确性，提升页面表格布局的准确率。

进一步地，本发明实施例提供了一种页面表格布局装置，如图3所示，该装置包括：初始化单元31、添加单元32、更新单元33。

所述初始化单元31，用于当接收到页面表格布局指令时，初始化页面表格布局插件，所述页面表格布局指令携带需要添加小部件的属性信息以及单元格的预置水平间距。

所述添加单元32，用于通过所述页面表格布局插件提供的预置添加函数和所述需要添加小部件的属性信息，在页面中添加小部件。

所述更新单元33，用于通过所述小部件对应的层叠样式表和所述单元格的预置水平间距，更新所述添加的小部件。

如图4，所述装置还包括：获取单元34和配置单元35。

所述获取单元34，用于获取所述页面表格布局插件中的拖动框。

所述配置单元35，用于配置所述拖动框对应的层叠样式表的水平间距。

所述添加单元32，具体用于通过所述页面表格布局插件提供的add_widget函数和所述需要添加小部件的属性信息，在页面中与所述需要添加小部件的位置信息对应的位置添加小部件。

所述装置还包括：调整单元36。

调整单元36，用于调整单元，用于将所述小部件对应的可缩放图标提示调整到所述小部件的预置位置。

其中，所述单元格的预置水平间距为用户输入的单元格的水平间距。

该装置实施例与前述方法实施例对应，为便于阅读，本装置实施例不 再对前述方法实施例中的细节内容进行逐一赘述，但应当明确，本实施例中的装置能够对应实现前述方法实施例中的全部内容。

本发明实施例提供的一种页面表格布局装置。当接收到页面表格布局指令时，初始化页面表格布局插件，所述页面表格布局指令携带需要添加小部件的属性信息以及单元格的预置水平间距；通过所述页面表格布局插件提供的预置添加函数和所述需要添加小部件的属性信息，在页面中添加小部件；通过所述小部件对应的层叠样式表和所述单元格的预置水平间距，更新所述添加的小部件。本发明实施例，通过所述小部件对应的层叠样式表和所述单元格的预置水平间距，，可以设置每个单元格的水平间距，从而能够实现按照用户的需求进行页面布局，保证页面表格布局的准确性，提升页面表格布局的准确率。

所述页面表格布局装置包括处理器和存储器，上述初始化单元、添加单元、更新单元、获取单元、配置单元和调整单元等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。

处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来设置单元格的水平间距，实现按照用户的需求进行页面布局，保证页面表格布局的准确性，提升页面表格布局的准确率。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。

本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序代码：

当接收到页面表格布局指令时，初始化页面表格布局插件，所述页面表格布局指令携带需要添加小部件的属性信息以及单元格的预置水平间距；

通过所述页面表格布局插件提供的预置添加函数和所述需要添加小部件的属性信息，在页面中添加小部件；

通过所述小部件对应的层叠样式表和所述单元格的预置水平间距，更新所述添加的小部件。

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

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

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

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