CN117473949A - 表单动态布局方法及系统 - Google Patents
表单动态布局方法及系统 Download PDFInfo
- Publication number
- CN117473949A CN117473949A CN202311312472.6A CN202311312472A CN117473949A CN 117473949 A CN117473949 A CN 117473949A CN 202311312472 A CN202311312472 A CN 202311312472A CN 117473949 A CN117473949 A CN 117473949A
- Authority
- CN
- China
- Prior art keywords
- layout
- dynamic
- laid out
- slot
- list
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 55
- 238000004422 calculation algorithm Methods 0.000 claims abstract description 16
- 238000012544 monitoring process Methods 0.000 claims abstract description 14
- 238000004590 computer program Methods 0.000 claims description 16
- 238000012549 training Methods 0.000 claims description 11
- 238000004364 calculation method Methods 0.000 claims description 8
- 238000009877 rendering Methods 0.000 claims description 7
- 238000005538 encapsulation Methods 0.000 claims description 4
- 230000006870 function Effects 0.000 description 16
- 238000010586 diagram Methods 0.000 description 11
- 238000012423 maintenance Methods 0.000 description 6
- 230000008569 process Effects 0.000 description 6
- 230000009466 transformation Effects 0.000 description 6
- 230000008859 change Effects 0.000 description 5
- 230000004048 modification Effects 0.000 description 5
- 238000012986 modification Methods 0.000 description 5
- 238000005516 engineering process Methods 0.000 description 4
- 238000004806 packaging method and process Methods 0.000 description 4
- 238000012545 processing Methods 0.000 description 4
- 230000007246 mechanism Effects 0.000 description 3
- 239000008186 active pharmaceutical agent Substances 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 239000012634 fragment Substances 0.000 description 2
- 230000006872 improvement Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000036961 partial effect Effects 0.000 description 2
- 230000002829 reductive effect Effects 0.000 description 2
- 230000004044 response Effects 0.000 description 2
- 238000004891 communication Methods 0.000 description 1
- 230000008094 contradictory effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000000670 limiting effect Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/103—Formatting, i.e. changing of presentation of documents
- G06F40/106—Display of layout of documents; Previewing
-
- 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
- G06F40/18—Editing, e.g. inserting or deleting of tables; using ruled lines of spreadsheets
-
- 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/186—Templates
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Document Processing Apparatus (AREA)
Abstract
本申请实施例提供一种表单动态布局方法及系统，属于计算机技术领域。方法包括：采集待布局表单元素；基于所述待布局表单元素，调用对应的动态布局组件；其中，所述动态布局组件基于预设表单模板和布局算法封装获得；执行所述动态布局组件，生成适应于当前待布局表单元素的表单；实时监测已生成表单的表单元素调整情况，基于调整情况重复执行所述动态布局组件，保持表单的更新状态。本发明方案提高了表单布局中模板代码的可复用性，减少了冗余和重复的代码，使代码更加简洁且易于维护。
Description
技术领域
本申请涉及计算机技术领域，具体涉及一种表单动态布局方法及一种表单动态布局系统。
背景技术
在中后台界面开发中，涉及存在大量字段的表单，而这些字段的排列布局一般都是固定的，比如两列布局或者三列布局。在后续业务调整或者面向不同分辨率要实现响应式布局，需要动态调整布局时，按照传统方案，需要设置多套模板，不仅代码臃肿，也很难维护，调整一个字段就要调整多个模板，容易遗漏出错，尤其是字段调整比较多的时候，更是费劲。在当今的软件开发中，表单是一种常见的用户输入和数据采集方式许多表单的布局需要根据不同条件进行灵活调整，以满足不同的需求。目前已有一些实现方案，如使用代码生成器来生成表单布局。
使用代码生成器来实现表单布局存在以下缺点：首先，生成的代码通常会包含很多冗余和重复的部分，增加了代码的复杂性和可读性差。其次，当需要对表单布局进行修改时，需要手动修改生成的代码，这会增加维护的困难程度。另外，对于已有的项目，使用代码生成器改变布局可能会破坏原有的代码结构。针对现有方案存在的布局灵活性差和代码维护难度高的问题，需要创造一种新的表单布局方案。
发明内容
本申请实施例的目的是提供一种表单动态布局方法及系统，以解决现有表单布局方案存在的布局灵活性差和代码维护难度高的问题。
为了实现上述目的，本申请第一方面提供一种表单动态布局方法，包括：采集待布局表单元素；基于所述待布局表单元素，调用对应的动态布局组件；其中，所述动态布局组件基于预设表单模板和布局算法封装获得；执行所述动态布局组件，生成适应于当前待布局表单元素的表单；实时监测已生成表单的表单元素调整情况，基于调整情况重复执行所述动态布局组件，保持表单的更新状态。
在本申请实施例中，所述待布局表单元素包括：元素参数信息和行/列属性信息。
在本申请实施例中，所述动态布局组件的封装规则包括：调取预设表单模板，并在预设表单模板中生成多个插槽；读取各插槽内容，并基于各插槽内容确定插槽内容的总长度信息；基于表单元素和插槽内容的总长度信息，通过布局算法自适应训练表单行/列布局规则；将行/列布局规则封装为组件，作为动态布局组件。
在本申请实施例中，所述预设表单模板为VUE模板。
在本申请实施例中，所述行/列布局规则包括：表单行布局数量、表单列布局数量、单个表单插槽的宽度。
在本申请实施例中，基于表单元素和插槽内容的总长度信息，通过布局算法自适应训练表单布局规则，包括：S100)自适应调整表单行布局数量、表单列布局数量和插槽内容的总长度信息中任两个参数的值，作为参考计算值；S200)基于预设表单布局函数和所述参考计算值计算获得表单行布局数量、表单列布局数量和插槽内容的总长度信息中的另一个参数的值；S300)基于本次调整的表单行布局数量、表单列布局数量和插槽内容的总长度信息中任两个参数的值和计算获得的另一个参数的值生成一组对应关系；S400)重复步骤S100)-S300)，直到获得预设数量组对应关系，作为训练样本；基于所述训练样本构建基于不同表单元素进行表单布局的规则模型。
在本申请实施例中，所述预设表单布局函数为：
其中，Nrows为表单行布局数量；Ncols为表单列布局数量；L为插槽内容的总长度信息。
在本申请实施例中，所述单个表单插槽的宽度的计算规则包括：基于栅格布局，确定栅格数量；基于栅格数量和表单列布局数量求商获得对应数量列下单个表单插槽的宽度。
在本申请实施例中，所述执行所述动态布局组件，生成适应于当前待布局表单元素的表单，包括：执行所述动态布局组件，为当前待布局表单元素确定表单布局规则；基于所述表单布局规则和待布局表单元素，生成确定行数量和列数量的二维数组；调用渲染函数，对所述二维数组用栅格布局元素进行渲染，获得表单。
在本申请实施例中，所述实时监测已生成表单的表单元素调整情况，基于调整情况重复执行所述动态布局组件，保持表单的更新状态，包括：响应于已生成表单的表单元素调整触发信号，采集调整后的表单元素；将调整后的表单元素作为更新后的待布局表单元素，重复执行一次所述动态布局组件，获得适应于更新后的待布局表单元素的更新后的表单；推送并显示更新后的表单。
本申请第二方面提供一种表单动态布局系统，包括：采集单元，用于采集待布局表单元素；调用单元，用于基于所述待布局表单元素，调用对应的动态布局组件；其中，所述动态布局组件基于预设表单模板和布局算法封装获得；执行单元，用于执行所述动态布局组件，生成适应于当前待布局表单元素的表单；更新单元，用于实时监测已生成表单的表单元素调整情况，基于调整情况重复执行所述动态布局组件，保持表单的更新状态。
本申请第三方面提供一种处理器，被配置成执行上述的表单动态布局方法。
本申请第四方面提供一种机器可读存储介质，该机器可读存储介质上存储有指令，该指令在被处理器执行时使得所述处理器被配置成执行上述的表单动态布局方法。
本申请第五方面提供一种计算机程序产品，包括计算机程序，该计算机程序在被处理器执行时实现上述的表单动态布局方法。
通过上述技术方案，本发明方案基于动态布局组件执行动态的布局操作，将历史代码中的表单模板用动态布局组件包裹，只需稍微调整历史代码的代码结构，即可引入动态调整布局机制，对现有项目的改造非常方便。且持续监测表单数据的变化情况，然后基于表单元素变化情况表单布局动态调整，保证输出的表单永远是符合表单布局需求的。组件提高了模板代码的可复用性，减少了冗余和重复的代码，使代码更加简洁且易于维护。
本申请实施例的其它特征和优点将在随后的具体实施方式部分予以详细说明。
附图说明
附图是用来提供对本申请实施例的进一步理解，并且构成说明书的一部分，与下面的具体实施方式一起用于解释本申请实施例，但并不构成对本申请实施例的限制。在附图中：
图1示意性示出了根据本申请实施例的表单动态布局方法的步骤流程图；
图2示意性示出了根据本申请实施例的表单动态布局系统的系统结构图；
图3示意性示出了根据本申请实施例的计算机设备的内部结构图。
具体实施方式
为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，应当理解的是，此处所描述的具体实施方式仅用于说明和解释本申请实施例，并不用于限制本申请实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。
需要说明，若本申请实施例中有涉及方向性指示(诸如上、下、左、右、前、后……)，则该方向性指示仅用于解释在某一特定姿态(如附图所示)下各部件之间的相对位置关系、运动情况等，如果该特定姿态发生改变时，则该方向性指示也相应地随之改变。
另外，若本申请实施例中有涉及“第一”、“第二”等的描述，则该“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本申请要求的保护范围之内。
在中后台界面开发中，涉及存在大量字段的表单，而这些字段的排列布局一般都是固定的，比如两列布局或者三列布局。在后续业务调整或者面向不同分辨率要实现响应式布局，需要动态调整布局时，按照传统方案，需要设置多套模板，不仅代码臃肿，也很难维护，调整一个字段就要调整多个模板，容易遗漏出错，尤其是字段调整比较多的时候，更是费劲。本发明方案要解决的是在超多字段表单中布局灵活性和代码维护性的问题。相较于传统的固定模板设置或代码生成器方案，本方案的灵活性和适应性更好，对于现有项目改造更友好，同时代码简洁易于维护。
在当今的软件开发中，表单是一种常见的用户输入和数据采集方式许多表单的布局需要根据不同条件进行灵活调整，以满足不同的需求。目前已有一些实现方案，如使用代码生成器来生成表单布局。但这些方案存在一些问题，如生成的代码冗杂、可读性差以及可维护性差等。
使用代码生成器来实现表单布局存在以下缺点：首先，生成的代码通常会包含很多冗余和重复的部分，增加了代码的复杂性和可读性差。其次，当需要对表单布局进行修改时，需要手动修改生成的代码，这会增加维护的困难程度。另外，对于已有的项目，使用代码生成器改变布局可能会破坏原有的代码结构。因此，本方案旨在提供一种通过获取VUE的模板插槽内容来动态生成布局的方法，以解决现有技术中表单布局的缺点，使布局灵活性更强、代码更简洁易于维护。
本发明方案针对现有表单布局方案存在的布局灵活性差和代码维护难度高的问题，提出了一种表单动态布局方法，本发明方案基于动态布局组件执行动态的布局操作，将历史代码中的表单模板用动态布局组件包裹，只需稍微调整历史代码的代码结构，即可引入动态调整布局机制，对现有项目的改造非常方便。且持续监测表单数据的变化情况，然后基于表单元素变化情况表单布局动态调整，保证输出的表单永远是符合表单布局需求的。组件提高了模板代码的可复用性，减少了冗余和重复的代码，使代码更加简洁且易于维护。
图1示意性示出了根据本申请实施例的表单动态布局方法的流程示意图。如图1所示，在本申请一实施例中，提供了一种表单动态布局方法，包括以下步骤：
步骤S10：采集待布局表单元素。
具体的，所述待布局表单元素包括：元素参数信息和行/列属性信息。本发明方案基于需要进行表单布局的元素进行表单布局自动适配，并在适配完成后自动进行表单元素填充，使得输入纯表单元素的情况下，便可以获得匹配布局好的表单。为了适应表单元素，需要采集元素信息和行/列属性信息，以便于为元素提供适配的表单布局。
步骤S20：基于所述待布局表单元素，调用对应的动态布局组件。
具体的，所述动态布局组件基于预设表单模板和布局算法封装获得。所述动态布局组件的封装规则包括：调取预设表单模板，并在预设表单模板中生成多个插槽；读取各插槽内容，并基于各插槽内容确定插槽内容的总长度信息；基于表单元素和插槽内容的总长度信息，通过布局算法自适应训练表单布局规则；将所述行/列布局规则封装为组件，作为动态布局组件。
优选的，所述预设表单模板为VUE模板。
在一种可能的实施方式中，在超多字段表单中，使用VUE作为前端框架来构建表单组件。VUE支持使用模板插槽(slot)来定义可重用的模板片段，这为动态生成布局提供了基础。首先，需要在表单模板中定义适当的插槽，以便用户能够在编写代码时插入相应的内容。插槽可以包含各种表单元素，如输入框、下拉列表等。接下来，需要通过VUE的相关API来获取插槽内容。可以使用VUE提供的特定方法，如this.$slots来获取插槽内容，并将其存储在适当的数据结构中。
在本发明实施例中，通过获取插槽内容并动态生成布局，极大地提高了模板代码的可复用性，减少了冗余和重复的代码，使代码更加简洁且易于维护。
优选的，所述表单布局规则包括：表单行布局数量、表单列布局数量、单个表单插槽的宽度。基于表单元素和插槽内容的总长度信息，通过布局算法自适应训练表单布局规则，包括：
S100)自适应调整表单行布局数量、表单列布局数量和插槽内容的总长度信息中任两个参数的值，作为参考计算值；
S200)基于预设表单布局函数和所述参考计算值计算获得表单行布局数量、表单列布局数量和插槽内容的总长度信息中的另一个参数的值；
S300)基于本次调整的表单行布局数量、表单列布局数量和插槽内容的总长度信息中任两个参数的值和计算获得的另一个参数的值生成一组对应关系；
S400)重复步骤S100)-S300)，直到获得预设数量组对应关系，作为训练样本；基于所述训练样本构建基于不同表单元素进行表单布局的规则模型。
优选的，所述预设表单布局函数为：
其中，Nrows为表单行布局数量；Ncols为表单列布局数量；L为插槽内容的总长度信息。
优选的，所述单个表单插槽的宽度计算规则包括：基于栅格布局，确定栅格数量；基于栅格数量和表单列布局数量求商获得对应数量列下单个表单插槽的宽度。
优选的，进行组件发的封装时，将上述布局逻辑封装成组件，并加入额外的控制参数和逻辑，可以实现根据不同的参数条件来进行灵活布局。例如，根据不同的参数条件决定某些表单字段的显隐。部分表单字段元素的大小单独控制，动态调整表单元素之间的间距和样式等等。通过这些灵活的布局处理，我们可以在不大幅修改代码的情况下，仅仅通过简单的参数调整即可自动生成适应性很强的表单布局。
步骤S30：执行所述动态布局组件，生成适应于当前待布局表单元素的表单。
具体的，所述执行所述动态布局组件，生成适应于当前待布局表单元素的表单，包括：执行所述动态布局组件，为当前待布局表单元素确定表单布局规则；基于所述表单布局规则和待布局表单元素，生成确定行数量和列数量的二维数组；调用渲染函数，对所述二维数组用栅格布局元素进行渲染，获得表单。
在一种可能的实施方案中，新应用中，只需将表单元素放置在步骤3封装的动态布局组件中即可，不需要用额外的布局控制元素去控制表单的布局，需要调整为几列布局，只需要调整动态布局组件的列参数即可。对于历史代码的改造，只需要将历史代码中的表单元素用动态布局组件包裹，即可应用上动态调整机制，使用方便，功能强大，且改造工作量很小，对现有项目的改造非常友好。
步骤S40：实时监测已生成表单的表单元素调整情况，基于调整情况重复执行所述动态布局组件，保持表单的更新状态。
具体的，所述实时监测已生成表单的表单元素调整情况，基于调整情况重复执行所述动态布局组件，保持表单的更新状态，包括：响应于已生成表单的表单元素调整触发信号，采集调整后的表单元素；将调整后的表单元素作为更新后的待布局表单元素，重复执行一次所述动态布局组件，获得适应于更新后的待布局表单元素的更新后的表单；推送并显示更新后的表单。
在一种可能的实施方式中，一旦获取了VUE的模板插槽内容，就可以根据一定的规则动态生成布局。这些规则可以根据项目需求来定义，比如指定每个插槽在布局中的位置和大小。可以使用一些布局算法和技术来实现动态布局生成。比如动态调整列数，从两列布局调整为三列布局，实现的技术细节如下所述：
1)通过this.$slots获取所有插槽内容，得知插槽内容的长度为n,假设为n＝28；
2)通过this.props获取到动态指定的列数cols为3，就可以计算出调整后布局的最大行数rows＝向上取整(n/cols)，得出rows＝10；
3)利用栅格布局，以24栅格布局为例，算出单个插槽元素的对应宽度span＝24/cols＝8,得出三列布局下，单个插槽元素的宽度为8；
4)循环遍历所有插槽内容，并将其依次塞入一个10行3列的二维数组；
5)调用VUE的渲染函数，将步骤4中的二维数组用栅格布局元素包裹渲染出来，即得最终展现界面。在此渲染逻辑中，还可以加入其他控制逻辑，根据不同的参数条件来控制插槽元素的表现。
6)监听cols参数变动，当cols发生变动且不等于当前列数时，重新执行步骤1)-5)。
在本发明方案实施例中，本方案可以实现简单的参数控制来达到动态调整表单布局的目的，非常灵活且代码简洁易维护。
图1为一个实施例中表单动态布局方法的流程示意图。应该理解的是，虽然图1的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，图1中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
在一个实施例中，如图2所示，提供了一种表单动态布局系统，所述系统包括：
采集单元，用于采集待布局表单元素。
具体的，所述待布局表单元素包括：元素参数信息和行/列属性信息。本发明方案基于需要进行表单布局的元素进行表单布局自动适配，并在适配完成后自动进行表单元素填充，使得输入纯表单元素的情况下，便可以获得匹配布局好的表单。为了适应表单元素，需要采集元素信息和行/列属性信息，以便于为元素提供适配的表单布局。
调用单元，用于基于所述待布局表单元素，调用对应的动态布局组件。
具体的，所述动态布局组件基于预设表单模板和布局算法封装获得。所述动态布局组件的封装规则包括：调取预设表单模板，并在预设表单模板中生成多个插槽；读取各插槽内容，并基于各插槽内容确定插槽内容的总长度信息；基于表单元素和插槽内容的总长度信息，通过布局算法自适应训练表单布局规则；将所述行/列布局规则封装为组件，作为动态布局组件。
优选的，所述预设表单模板为VUE模板。
在一种可能的实施方式中，在超多字段表单中，使用VUE作为前端框架来构建表单组件。VUE支持使用模板插槽(slot)来定义可重用的模板片段，这为动态生成布局提供了基础。首先，需要在表单模板中定义适当的插槽，以便用户能够在编写代码时插入相应的内容。插槽可以包含各种表单元素，如输入框、下拉列表等。接下来，需要通过VUE的相关API来获取插槽内容。可以使用VUE提供的特定方法，如this.$slots来获取插槽内容，并将其存储在适当的数据结构中。
在本发明实施例中，通过获取插槽内容并动态生成布局，极大地提高了模板代码的可复用性，减少了冗余和重复的代码，使代码更加简洁且易于维护。
优选的，所述表单布局规则包括：表单行布局数量、表单列布局数量、单个表单插槽的宽度。基于表单元素和插槽内容的总长度信息，通过布局算法自适应训练表单布局规则，
包括：S100)自适应调整表单行布局数量、表单列布局数量和插槽内容的总长度信息中任两个参数的值，作为参考计算值；
S200)基于预设表单布局函数和所述参考计算值计算获得表单行布局数量、表单列布局数量和插槽内容的总长度信息中的另一个参数的值；
S300)基于本次调整的表单行布局数量、表单列布局数量和插槽内容的总长度信息中任两个参数的值和计算获得的另一个参数的值生成一组对应关系；
S400)重复步骤S100)-S300)，直到获得预设数量组对应关系，作为训练样本；基于所述训练样本构建基于不同表单元素进行表单布局的规则模型。
优选的，所述预设表单布局函数为：
其中，Nrows为表单行布局数量；Ncols为表单列布局数量；L为插槽内容的总长度信息。
优选的，所述单个表单插槽的宽度计算规则包括：基于栅格布局，确定栅格数量；基于栅格数量和表单列布局数量求商获得对应数量列下单个表单插槽的宽度。
优选的，进行组件发的封装时，将上述布局逻辑封装成组件，并加入额外的控制参数和逻辑，可以实现根据不同的参数条件来进行灵活布局。例如，根据不同的参数条件决定某些表单字段的显隐。部分表单字段元素的大小单独控制，动态调整表单元素之间的间距和样式等等。通过这些灵活的布局处理，我们可以在不大幅修改代码的情况下，仅仅通过简单的参数调整即可自动生成适应性很强的表单布局。执行单元，用于执行所述动态布局组件，生成适应于当前待布局表单元素的表单。
执行单元，用于执行所述动态布局组件，生成适应于当前待布局表单元素的表单。
具体的，所述执行所述动态布局组件，生成适应于当前待布局表单元素的表单，包括：执行所述动态布局组件，为当前待布局表单元素确定表单布局规则；基于所述表单布局规则和待布局表单元素，生成确定行数量和列数量的二维数组；调用渲染函数，对所述二维数组用栅格布局元素进行渲染，获得表单。
在一种可能的实施方案中，新应用中，只需将表单元素放置在步骤3封装的动态布局组件中即可，不需要用额外的布局控制元素去控制表单的布局，需要调整为几列布局，只需要调整动态布局组件的列参数即可。对于历史代码的改造，只需要将历史代码中的表单元素用动态布局组件包裹，即可应用上动态调整机制，使用方便，功能强大，且改造工作量很小，对现有项目的改造非常友好。
更新单元，用于实时监测已生成表单的表单元素调整情况，基于调整情况重复执行所述动态布局组件，保持表单的更新状态。
具体的，所述实时监测已生成表单的表单元素调整情况，基于调整情况重复执行所述动态布局组件，保持表单的更新状态，包括：响应于已生成表单的表单元素调整触发信号，采集调整后的表单元素；将调整后的表单元素作为更新后的待布局表单元素，重复执行一次所述动态布局组件，获得适应于更新后的待布局表单元素的更新后的表单；推送并显示更新后的表单。
本申请实施例提供了一种存储介质，其上存储有程序，该程序被处理器执行时实现上述表单动态布局方法。
本申请实施例提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行上述表单动态布局方法。
在一个实施例中，提供了一种计算机设备，该计算机设备可以是服务器，其内部结构图可以如图3所示。该计算机设备包括通过系统总线连接的处理器A01、网络接口A02、存储器(图中未示出)和数据库(图中未示出)。其中，该计算机设备的处理器A01用于提供计算和控制能力。该计算机设备的存储器包括内存储器A03和非易失性存储介质A04。该非易失性存储介质A04存储有操作系统B01、计算机程序B02和数据库(图中未示出)。该内存储器A03为非易失性存储介质A04中的操作系统B01和计算机程序B02的运行提供环境。该计算机设备的网络接口A02用于与外部的终端通过网络连接通信。该计算机程序B02被处理器A01执行时以实现一种表单动态布局方法。
本领域技术人员可以理解，图3中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。
本申请还提供了一种计算机程序产品，所述计算机程序在被处理器执行时实现上述的表单动态布局方法。
本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体，可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。
以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。
Claims (14)
1.一种表单动态布局方法，其特征在于，所述方法包括：
采集待布局表单元素；
基于所述待布局表单元素，调用对应的动态布局组件；其中，所述动态布局组件基于预设表单模板和布局算法封装获得；
执行所述动态布局组件，生成适应于当前待布局表单元素的表单；
实时监测已生成表单的表单元素调整情况，基于调整情况重复执行所述动态布局组件，保持表单的更新状态。
2.根据权利要求1所述的方法，其特征在于，所述待布局表单元素包括：
元素参数信息和行/列属性信息。
3.根据权利要求1所述的方法，其特征在于，所述动态布局组件的封装规则包括：
调取预设表单模板，并在预设表单模板中生成多个插槽；
读取各插槽内容，并基于各插槽内容确定插槽内容的总长度信息；
基于表单元素和插槽内容的总长度信息，通过布局算法自适应训练表单行/列布局规则；
将行/列布局规则封装为组件，作为动态布局组件。
4.根据权利要求1所述的方法，其特征在于，所述预设表单模板为VUE模板。
5.根据权利要求3所述的方法，其特征在于，所述行/列布局规则包括：
表单行布局数量、表单列布局数量、单个表单插槽的宽度。
6.根据权利要求5所述的方法，其特征在于，基于表单元素和插槽内容的总长度信息，通过布局算法自适应训练表单布局规则，包括：
S100)自适应调整表单行布局数量、表单列布局数量和插槽内容的总长度信息中任两个参数的值，作为参考计算值；
S200)基于预设表单布局函数和所述参考计算值计算获得表单行布局数量、表单列布局数量和插槽内容的总长度信息中的另一个参数的值；
S300)基于本次调整的表单行布局数量、表单列布局数量和插槽内容的总长度信息中任两个参数的值和计算获得的另一个参数的值生成一组对应关系；
S400)重复步骤S100)-S300)，直到获得预设数量组对应关系，作为训练样本；
基于所述训练样本构建基于不同表单元素进行表单布局的规则模型。
7.根据权利要求6所述的方法，其特征在于，所述预设表单布局函数为：
其中，Nrows为表单行布局数量；
Ncols为表单列布局数量；
L为插槽内容的总长度信息。
8.根据权利要求5所述的方法，其特征在于，所述单个表单插槽的宽度的计算规则包括：
基于栅格布局，确定栅格数量；
基于栅格数量和表单列布局数量求商获得对应数量列下单个表单插槽的宽度。
9.根据权利要求3所述的方法，其特征在于，所述执行所述动态布局组件，生成适应于当前待布局表单元素的表单，包括：
执行所述动态布局组件，为当前待布局表单元素确定表单布局规则；
基于所述表单布局规则和待布局表单元素，生成确定行数量和列数量的二维数组；
调用渲染函数，对所述二维数组用栅格布局元素进行渲染，获得表单。
10.根据权利要求1所述的方法，其特征在于，所述实时监测已生成表单的表单元素调整情况，基于调整情况重复执行所述动态布局组件，保持表单的更新状态，包括：
响应于已生成表单的表单元素调整触发信号，采集调整后的表单元素；
将调整后的表单元素作为更新后的待布局表单元素，重复执行一次所述动态布局组件，获得适应于更新后的待布局表单元素的更新后的表单；
推送并显示更新后的表单。
11.一种表单动态布局系统，其特征在于，所述系统包括：
采集单元，用于采集待布局表单元素；
调用单元，用于基于所述待布局表单元素，调用对应的动态布局组件；其中，所述动态布局组件基于预设表单模板和布局算法封装获得；
执行单元，用于执行所述动态布局组件，生成适应于当前待布局表单元素的表单；
更新单元，用于实时监测已生成表单的表单元素调整情况，基于调整情况重复执行所述动态布局组件，保持表单的更新状态。
12.一种处理器，其特征在于，被配置成执行根据权利要求1至10中任一项所述的表单动态布局方法。
13.一种机器可读存储介质，该机器可读存储介质上存储有指令，其特征在于，该指令在被处理器执行时使得所述处理器被配置成执行根据权利要求1至10中任一项所述的表单动态布局方法。
14.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序在被处理器执行时实现根据权利要求1至10中任一项所述的表单动态布局方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311312472.6A CN117473949A (zh) | 2023-10-11 | 2023-10-11 | 表单动态布局方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311312472.6A CN117473949A (zh) | 2023-10-11 | 2023-10-11 | 表单动态布局方法及系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117473949A true CN117473949A (zh) | 2024-01-30 |
Family
ID=89636974
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311312472.6A Pending CN117473949A (zh) | 2023-10-11 | 2023-10-11 | 表单动态布局方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117473949A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117971187A (zh) * | 2024-03-29 | 2024-05-03 | 山东浪潮数字商业科技有限公司 | 一种基于Vue使用配置化数据的表格开发方法和装置 |
-
2023
- 2023-10-11 CN CN202311312472.6A patent/CN117473949A/zh active Pending
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117971187A (zh) * | 2024-03-29 | 2024-05-03 | 山东浪潮数字商业科技有限公司 | 一种基于Vue使用配置化数据的表格开发方法和装置 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US5450536A (en) | Technique for automatically resizing tables | |
| CN106897205A (zh) | 一种测试数据生成方法及装置 | |
| CN117473949A (zh) | 表单动态布局方法及系统 | |
| CN111340201A (zh) | 卷积神经网络加速器及其执行卷积运算操作的方法 | |
| CN106844288A (zh) | 一种随机字符串生成方法及装置 | |
| CN113313247B (zh) | 基于数据流架构的稀疏神经网络的运算方法 | |
| CN111159278B (zh) | 数据展示方法及装置、电子设备和计算机可读存储介质 | |
| CN111680472A (zh) | 表格数据处理方法、装置、计算机设备及可读存储介质 | |
| CN113312344B (zh) | 数据序列化、反序列化方法、设备、系统、介质及产品 | |
| CN104765775B (zh) | 一种日志保存方法及装置 | |
| CN114328315A (zh) | 基于dma的数据预处理方法、dma部件及芯片结构 | |
| CN105867886A (zh) | 一种写表格的方法及装置 | |
| CN111159985A (zh) | 数据导出方法、装置、计算机设备和计算机可读存储介质 | |
| CN111079082A (zh) | 一种提高涉及稀疏矩阵计算速率的方法和系统 | |
| CN115829000A (zh) | 数据处理方法、装置、电子设备及存储介质 | |
| CN114328486A (zh) | 基于模型的数据质量核查方法及装置 | |
| CN110796238B (zh) | 基于arm架构fpga硬件系统的卷积神经网络权重压缩方法及其装置 | |
| CN112612427A (zh) | 一种车辆停靠点数据处理方法、装置、存储介质及终端 | |
| CN109582295B (zh) | 一种数据处理方法、装置、存储介质及处理器 | |
| CN117033526B (zh) | 数据存储方法、数据查询方法、装置、设备及存储介质 | |
| CN113282624B (zh) | 规则匹配方法、装置、电子设备及存储介质 | |
| CN116414378A (zh) | 基于WeexSDK框架的页面打包方法、页面加载方法及装置 | |
| US11914564B1 (en) | Merkle tree-based data management method and apparatus | |
| CN113052291B (zh) | 数据处理方法和装置 | |
| US20240168662A1 (en) | Computer-implemented method for the efficient generation of a large volume of configuration data |
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 |