CN106649228A - 页面表格布局方法及装置 - Google Patents

页面表格布局方法及装置 Download PDF

Info

Publication number
CN106649228A
CN106649228A CN201510729288.0A CN201510729288A CN106649228A CN 106649228 A CN106649228 A CN 106649228A CN 201510729288 A CN201510729288 A CN 201510729288A CN 106649228 A CN106649228 A CN 106649228A
Authority
CN
China
Prior art keywords
widget
page
unit
layout
cell
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201510729288.0A
Other languages
English (en)
Inventor
张昭
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Gridsum Technology Co Ltd
Original Assignee
Beijing Gridsum Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Gridsum Technology Co Ltd filed Critical Beijing Gridsum Technology Co Ltd
Priority to CN201510729288.0A priority Critical patent/CN106649228A/zh
Publication of CN106649228A publication Critical patent/CN106649228A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G06F40/177—Editing, e.g. inserting or deleting of tables; using ruled lines

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种页面表格布局方法及装置，涉及信息技术领域，能够设置每个单元格宽度，从而能够实现按照用户的需求进行页面布局，保证页面表格布局的准确性，提升页面表格布局的准确率。所述方法包括：当接收到页面表格布局指令时，初始化页面表格布局插件，所述页面表格布局指令携带小部件的属性信息以及单元格的预置宽度；通过所述页面表格布局插件提供的预置添加函数和所述小部件的属性信息，在页面中添加小部件；通过小部件对应的层叠样式表和所述单元格的预置宽度，更新所述添加的小部件。本发明适用于页面表格的布局。

Description

页面表格布局方法及装置
技术领域
本发明涉及信息技术领域，尤其涉及一种页面表格布局方法及装置。
背景技术
页面表格布局插件，如Gridstack插件，可以实现页面表格布局。页面表格布局插件通常按照固定的列数分割页面，如将页面固定的分割为12列，因此每个单元格的宽度是固定的。
目前，在页面表格布局时，通常通过页面表格布局插件提供的固定单元格宽度进行页面布局。然而，用户可能不按照页面表格布局插件设置的固定列数的整数倍切割页面，若根据页面表格布局插件提供的固定单元格宽度进行页面表格布局，布局的页面表格在展示时，可能会出现变形，造成页面表格布局不准确，从而导致页面表格布局的准确率较低。然而，目前页面表格布局插件未提供设置每个单元格宽度的配置参数。
发明内容
鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的页面表格布局方法及装置。
依据本发明的一个方面，本发明提出了一种页面表格布局方法，包括：
当接收到页面表格布局指令时，初始化页面表格布局插件，所述页面表格布局指令携带小部件的属性信息以及单元格的预置宽度；
通过所述页面表格布局插件提供的预置添加函数和所述小部件的属性信息，在页面中添加小部件；
通过小部件对应的层叠样式表和所述单元格的预置宽度，更新所述添加的小部件。
依据本发明的另一个方面，本发明提出了一种页面表格布局装置，包括：
初始化单元，用于当接收到页面表格布局指令时，初始化页面表格布局插件，所述页面表格布局指令携带小部件的属性信息以及单元格的预置宽度；
添加单元，用于通过所述页面表格布局插件提供的预置添加函数和所述小部件的属性信息，在页面中添加小部件；
更新单元，用于通过小部件对应的层叠样式表和所述单元格的预置宽度，更新所述页面中添加小部件。
借由上述技术方案，本发明提供的一种页面表格布局方法及装置。当接收到页面表格布局指令时，初始化页面表格布局插件，所述页面表格布局指令携带小部件的属性信息以及单元格的预置宽度；通过所述页面表格布局插件提供的预置添加函数和所述小部件的属性信息，在页面中添加小部件；通过小部件对应的层叠样式表和所述单元格的预置宽度，更新所述添加的小部件。本发明实施例，通过小部件对应的层叠样式表和所述单元格的预置宽度，可以设置每个单元格宽度，从而能够实现按照用户的需求进行页面布局，保证页面表格布局的准确性，提升页面表格布局的准确率。
附图说明
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
图1示出了本发明实施例提供的一种页面表格布局方法的流程图；
图2示出了本发明实施例提供的另一种页面表格布局方法的流程图；
图3示出了本发明实施例提供的一种页面表格布局装置的结构示意图；
图4示出了本发明实施例提供的一种页面表格布局装置的结构示意图。
具体实施方式
下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。
本发明实施例提供了一种页面表格布局方法，如图1所示，该方法包括：
101、当接收到页面表格布局指令时，初始化页面表格布局插件。
其中，所述页面表格布局指令携带小部件的属性信息以及单元格的预置宽度。所述页面表格布局插件可以为Gridstack插件。Gridstack插件是一个jQuery插件，可以实现可拖和放的，多列网格的插件化布局。Gridstack插件允许用户构建可拖动的、响应式的页面布局。所述小部件用于承载和显示页面元素，页面元素可以为用户需要在页面上显示的图片等。所述小部件的属性信息可以为小部件的位置信息和尺寸信息。所述尺寸信息可以为小部件的宽度和高度。
需要说明的是，所述页面表格布局插件通常会将页面按照N行×M列进行分割，分割成N×M个单元格。在页面表格布局插件中根据单元格进行小部件的添加。一般M为固定值12。若N＝10，则页面表格布局插件将页面分割成10行×12列，则每个单元格的宽度比例为0.83个像素点。
所述单元格的预置宽度为用户输入的单元格宽度，如页面共100个像素点，用户需要将页面分割成10行×10列，则单元格的预置宽度为1个像素点。
102、通过页面表格布局插件提供的预置添加函数和小部件的属性信息，在页面中添加小部件。
其中，所述预置添加函数可以为add_widget函数，具体可以为add_widget(x，y，width，height)。x，y表示小部件在页面中的位置，width为在页面中跨的行，height为在页面中跨的列。若小部件的属性信息为x＝0，y＝0，width＝1，height＝2，单元格的宽度为0.83个像素点、高度为1个像素点，则通过调用add_widget(0，0，1，2)，在页面中添加的小部件为从页面左上角开始宽度为1.66个像素点，高度为1个像素点的表格。
103、通过小部件对应的层叠样式表和单元格的预置宽度，更新添加的小部件。
例如，在页面中添加的小部件为从页面左上角开始宽度为1.66个像素点，高度为1个像素点的表格，单元格的预置宽度为一个像素点，则通过层叠样式表将页面中第一列单元格的宽度和第二个单元格的宽度分别更新为一个像素点，此时，小部件为从页面左上角开始宽度为2个像素点，高度为1个像素点的表格。
对于本发明实施例，通过小部件对应的层叠样式表和所述单元格的预置宽度，可以设置每个单元格宽度，从而能够实现按照用户的需求进行页面布局，保证页面表格布局的准确性，提升页面表格布局的准确率。
本发明实施例提供的一种页面表格布局方法。当接收到页面表格布局指令时，初始化页面表格布局插件，所述页面表格布局指令携带小部件的属性信息以及单元格的预置宽度；通过所述页面表格布局插件提供的预置添加函数和所述小部件的属性信息，在页面中添加小部件；通过小部件对应的层叠样式表和所述单元格的预置宽度，更新所述添加的小部件。本发明实施例，通过小部件对应的层叠样式表和所述单元格的预置宽度，可以设置每个单元格宽度，从而能够实现按照用户的需求进行页面布局，保证页面表格布局的准确性，提升页面表格布局的准确率。
本发明实施例提供了另一种页面表格布局方法，如图2所示，该方法包括：
201、当接收到页面表格布局指令时，初始化页面表格布局插件。
其中，所述页面表格布局指令携带小部件的属性信息以及单元格的预置宽度。所述页面表格布局插件可以为Gridstack插件。所述小部件的属性信息包括小部件的位置信息和小部件的尺寸信息。所述尺寸信息可以为小部件的宽度和高度。所述单元格的预置宽度为用户输入的单元格的宽度。
202、通过页面表格布局插件提供的预置添加函数和小部件的属性信息，在页面中添加小部件。
对于本发明实施例，步骤202具体可以为：通过页面表格布局插件提供的add_widget函数和小部件的属性信息，在页面中与所述小部件的位置信息对应的位置添加小部件。
203、通过小部件对应的层叠样式表和单元格的预置宽度，更新添加的小部件。
204、在页面中显示更新的小部件。
本发明实施例提供的另一种页面表格布局方法。当接收到页面表格布局指令时，初始化页面表格布局插件，所述页面表格布局指令携带小部件的属性信息以及单元格的预置宽度；通过所述页面表格布局插件提供的预置添加函数和所述小部件的属性信息，在页面中添加小部件；通过小部件对应的层叠样式表和所述单元格的预置宽度，更新所述添加的小部件。本发明实施例，通过小部件对应的层叠样式表和所述单元格的预置宽度，可以设置每个单元格宽度，从而能够实现按照用户的需求进行页面布局，保证页面表格布局的准确性，提升页面表格布局的准确率。
进一步地，本发明实施例提供了一种页面表格布局装置，如图3所示，该装置包括：初始化单元31、添加单元32、更新单元33。
所述初始化单元31，用于当接收到页面表格布局指令时，初始化页面表格布局插件，所述页面表格布局指令携带小部件的属性信息以及单元格的预置宽度。
所述添加单元32，用于通过所述页面表格布局插件提供的预置添加函数和所述小部件的属性信息，在页面中添加小部件。
所述更新单元33，用于通过小部件对应的层叠样式表和所述单元格的预置宽度，更新所述添加的小部件。
如图4，所述装置还包括：显示单元34。
所述显示单元34，用于在所述页面中显示所述更新的小部件。
所述添加单元32，具体用于通过所述页面表格布局插件提供的add_widget函数和小部件的属性信息，在页面中添加小部件。
所述小部件的属性信息包括小部件的位置信息和小部件的尺寸信息。
所述单元格的预置宽度为用户输入的单元格的宽度。
该装置实施例与前述方法实施例对应，为便于阅读，本装置实施例不再对前述方法实施例中的细节内容进行逐一赘述，但应当明确，本实施例中的装置能够对应实现前述方法实施例中的全部内容。
本发明实施例提供的一种页面表格布局装置。当接收到页面表格布局指令时，初始化页面表格布局插件，所述页面表格布局指令携带小部件的属性信息以及单元格的预置宽度；通过所述页面表格布局插件提供的预置添加函数和所述小部件的属性信息，在页面中添加小部件；通过小部件对应的层叠样式表和所述单元格的预置宽度，更新所述添加的小部件。本发明实施例，通过小部件对应的层叠样式表和所述单元格的预置宽度，可以设置每个单元格宽度，从而能够实现按照用户的需求进行页面布局，保证页面表格布局的准确性，提升页面表格布局的准确率。
所述页面表格布局装置包括处理器和存储器，上述初始化单元、添加单元、更新单元和显示单元等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。
处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来设置每个单元格宽度，实现按照用户的需求进行页面布局，保证页面表格布局的准确性，提升页面表格布局的准确率。
存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flashRAM)，存储器包括至少一个存储芯片。
本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序代码：
当接收到页面表格布局指令时，初始化页面表格布局插件，所述页面表格布局指令携带小部件的属性信息以及单元格的预置宽度；
通过所述页面表格布局插件提供的预置添加函数和所述小部件的属性信息，在页面中添加小部件；
通过小部件对应的层叠样式表和所述单元格的预置宽度，更新所述添加的小部件。
本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flashRAM)。存储器是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (10)

1.一种页面表格布局方法，其特征在于，包括：
当接收到页面表格布局指令时，初始化页面表格布局插件，所述页面表格布局指令携带小部件的属性信息以及单元格的预置宽度；
通过所述页面表格布局插件提供的预置添加函数和所述小部件的属性信息，在页面中添加小部件；
通过小部件对应的层叠样式表和所述单元格的预置宽度，更新所述添加的小部件。
2.根据权利要求1所述的页面表格布局方法，其特征在于，所述通过小部件对应的层叠样式表和所述单元格的预置宽度，更新所述添加的小部件之后，还包括：
在所述页面中显示所述更新的小部件。
3.根据权利要求1所述的页面表格布局方法，其特征在于，所述通过所述页面表格布局插件提供的预置添加函数和所述小部件的属性信息，在页面中添加小部件包括：
通过所述页面表格布局插件提供的add_widget函数和所述小部件的属性信息，在页面中添加小部件。
4.根据权利要求1所述的页面表格布局方法，其特征在于，所述小部件的属性信息包括小部件的位置信息和小部件的尺寸信息。
5.根据权利要求1所述的页面表格布局方法，其特征在于，所述单元格的预置宽度为用户输入的单元格的宽度。
6.一种页面表格布局装置，其特征在于，包括：
初始化单元，用于当接收到页面表格布局指令时，初始化页面表格布局插件，所述页面表格布局指令携带小部件的属性信息以及单元格的预置宽度；
添加单元，用于通过所述页面表格布局插件提供的预置添加函数和所述小部件的属性信息，在页面中添加小部件；
更新单元，用于通过小部件对应的层叠样式表和所述单元格的预置宽度，更新所述添加的小部件。
7.根据权利要求6所述的页面表格布局装置，其特征在于，所述装置还包括：
显示单元，用于在所述页面中显示所述更新的小部件。
8.根据权利要求6所述的页面表格布局装置，其特征在于，
所述添加单元，具体用于通过所述页面表格布局插件提供的add_widget函数和所述小部件的属性信息，在页面中添加小部件。
9.根据权利要求6所述的页面表格布局装置，其特征在于，所述小部件的属性信息包括小部件的位置信息和小部件的尺寸信息。
10.根据权利要求6所述的页面表格布局装置，其特征在于，所述单元格的预置宽度为用户输入的单元格的宽度。
CN201510729288.0A 2015-10-30 2015-10-30 页面表格布局方法及装置 Pending CN106649228A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201510729288.0A CN106649228A (zh) 2015-10-30 2015-10-30 页面表格布局方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201510729288.0A CN106649228A (zh) 2015-10-30 2015-10-30 页面表格布局方法及装置

Publications (1)

Publication Number Publication Date
CN106649228A true CN106649228A (zh) 2017-05-10

Family

ID=58809396

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201510729288.0A Pending CN106649228A (zh) 2015-10-30 2015-10-30 页面表格布局方法及装置

Country Status (1)

Country Link
CN (1) CN106649228A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114077466A (zh) * 2020-08-12 2022-02-22 北京智邦国际软件技术有限公司 一种Web界面表单中多行多列字段自动布局算法

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102741811A (zh) * 2009-12-24 2012-10-17 国际商业机器公司 改善基于模板的JavaScript小部件的性能
CN104641334A (zh) * 2012-09-17 2015-05-20 哈曼国际工业有限公司 用于大小调整和布置图形用户界面的元素的系统

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102741811A (zh) * 2009-12-24 2012-10-17 国际商业机器公司 改善基于模板的JavaScript小部件的性能
CN104641334A (zh) * 2012-09-17 2015-05-20 哈曼国际工业有限公司 用于大小调整和布置图形用户界面的元素的系统

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
WURURANG1963: "QGridLayout", 《HTTP://WWW.DOCIN.COM/P-854897457.HTML》 *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114077466A (zh) * 2020-08-12 2022-02-22 北京智邦国际软件技术有限公司 一种Web界面表单中多行多列字段自动布局算法

Similar Documents

Publication Publication Date Title
US10290128B2 (en) Interactive scene graph manipulation for visualization authoring
CN105487864A (zh) 代码自动生成的方法和装置
CN105335445A (zh) 布局显示方法和装置
CN104794116A (zh) 一种页面中元素的布局方法和装置
CN104793945A (zh) 防止内存溢出的大批量图片显示方法及其装置
KR102248823B1 (ko) 데이터 시각화 서비스 시스템, 방법 및 어플리케이션
CN109460540A (zh) 一种表格分页显示方法及装置
CN106933887A (zh) 一种数据可视化方法及装置
CN104462036B (zh) 一种同步编辑文档的格式信息的方法及系统
CN106484388B (zh) 用户界面的实现方法和装置
CN108460003B (zh) 文本数据的处理方法和装置
CN106250110A (zh) 建立模型的方法及装置
CN106610824A (zh) 一种页面高度自适应的方法及装置
CN109948083B (zh) 网页处理方法及装置
CN106649228A (zh) 页面表格布局方法及装置
CN106998489B (zh) 一种焦点越界搜索方法及装置
CN106681972A (zh) 表格显示方法及装置
CN106535002A (zh) 一种桌面启动器模板布局的更新方法及装置
CN115145565A (zh) 一种基于规则引擎的数据可视化大屏布局方法与装置
CN109388680B (zh) 一种提高浏览器端gis点数据渲染效率的方法和装置
CN106649348A (zh) 页面表格布局方法及装置
CN106651994A (zh) 气泡图的显示方法及装置
CN109144624A (zh) Ios中展示不等高列表的方法、存储介质、设备及系统
CN106997292A (zh) 处理矩形树图的方法和装置
CN109829147B (zh) 报表导出方法及装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
CB02 Change of applicant information

Address after: 100083 No. 401, 4th Floor, Haitai Building, 229 North Fourth Ring Road, Haidian District, Beijing

Applicant after: Beijing Guoshuang Technology Co.,Ltd.

Address before: 100086 Cuigong Hotel, 76 Zhichun Road, Shuangyushu District, Haidian District, Beijing

Applicant before: Beijing Guoshuang Technology Co.,Ltd.

CB02 Change of applicant information
RJ01 Rejection of invention patent application after publication

Application publication date: 20170510

RJ01 Rejection of invention patent application after publication