【技术实现步骤摘要】
本专利技术属于表单布局调整，具体涉及一种基于标准宽度的前端表单项自适应布局方法及系统。
技术介绍
1、本部分的陈述仅仅是提供了与本专利技术相关的
技术介绍
信息，不必然构成在先技术。
2、目前，前端表单有以下几种比较常见的布局方式：
3、使用百分比布局，即设定每个表单项在表单区域占据的宽度的百分比，然后使用flex布局依次展示这些表单项。这种布局方式的缺点是不能依据表单区域的宽度进行自适应换行，表单项可能会展示的过短或者过长，如图1、图2所示，影响用户体验。
4、使用固定宽度布局，即设定每个表单项的宽度为固定值，然后根据宽度依次展示这些表单项。这种布局方式的要求开发人员实际计算各个表单项的宽度，而且表单区域宽度的变化也可能会导致表单区域右侧出现空白区域或者不能对齐，如图3所示，影响页面布局统一性。
5、响应式布局，即将表单区域划分为12列，指定每个表单项占据的列数，然后确定几种分辨率区间，根据不同的分辨率区间设置不同的占据列数，这种布局方式需要手动指定每个表单项占据的列数，设置分辨率区间，不同的分辨率区间指定不同的占据列数，增加编码复杂度和维护复杂度，影响开发效率。
6、综上，目前的前端表单布局方式均有一定的缺陷。
技术实现思路
1、本专利技术为了解决上述问题，提出了一种基于标准宽度的前端表单项自适应布局方法及系统，本专利技术能够解决现有常用的布局方式会造成表单项不能按照表单区域宽度自适应，或者自适应后显示过长过短或者参差不齐
2、根据一些实施例，本专利技术采用如下技术方案：
3、一种基于标准宽度的前端表单项自适应布局方法，包括以下步骤：
4、预先设置表单的标准宽度和标准列数，利用表单的标准宽度除以标准列数，得到表单项的标准宽度；
5、获取当前表单区域的宽度，利用该宽度除以表单项的标准宽度后向下取整，确定一行最多展示的表单项的数量，计算每个表单项一行中占据的百分比；
6、读取表单项字段的配置数据；
7、判断表单项中是否有合并列参数，如果有，根据合并列参数计算占据对应的列数，更新所述表单项的百分比，以实现对应的表单项占据多列；
8、判断表单项中是否有整行参数，如果有，更新所述表单项的百分比，以实现该表单项占据整行；
9、根据相应的百分比，调整各表单项的宽度，渲染整个表单。
10、作为可选择的实施方式，所述标准列数根据期望表单展示的列数确定，所述的标准宽度根据最常用分辨率下表单占据的区域宽度确定，所述的表单项标准宽度由标准宽度以及标准列数的比值确定。
11、作为可选择的实施方式，当前表单区域的实际宽度发生变化时，返回至从获取当前表单区域的宽度的步骤，且迭代执行以下步骤。
12、作为可选择的实施方式，计算每个表单项一行中占据的百分比的过程为一行最多展示的表单项的数量的倒数，乘以百分百的结果。
13、作为可选择的实施方式，根据相应的百分比，使各表单项相应调整宽度至占满整行时，若表单项字段的配置数据表示该表单项字段为一行中的最后一个，则补齐100％。
14、作为可选择的实施方式，根据合并列参数计算占据对应的列数为根据每个表单项一行中占据的百分比和合并列参数的大小，计算两者的乘积，得到对应表单项的百分比。
15、作为可选择的实施方式，若表单项中有整行参数，则该表单项的百分比为百分百。
16、作为可选择的实施方式，预先配置一表单布局函数，所述表单布局函数存储有表单元素id，标准宽度、标准列数和表单项字段的配置数据。
17、一种基于标准宽度的前端表单项自适应布局方法，包括以下步骤：
18、监听单元，被配置为预先设置表单的标准宽度和标准列数，利用表单的标准宽度除以标准列数，得到表单项的标准宽度，获取当前表单区域的宽度，在宽度变化时调用计算单元；
19、计算单元，被配置为计算当前表单区域的宽度除以表单项标准宽度后向下取整，确定一行最多展示的表单项的数量，计算每个表单项一行中占据的百分比；读取表单项的配置数据，判断表单项中是否有合并列参数，如果有，根据合并列参数计算占据对应的列数，更新所述表单项的百分比，以实现对应的表单项占据多列；判断表单项中是否有整行参数，如果有，更新所述表单项的百分比，以实现该表单项占据整行；
20、渲染单元，被配置为根据计算单元计算出的各个表单项的相应的百分比，调整各表单项的宽度，渲染整个表单。
21、一种电子设备，包括存储器和处理器以及存储在存储器上并在处理器上运行的计算机指令，所述计算机指令被处理器运行时，完成上述方法中的步骤。
22、与现有技术相比，本专利技术的有益效果为：
23、本专利技术只需要提供常用分辨率下表单区域宽度和期望显示列数两个数据，就可以让表单项快速美观的展示到系统中，提升开发速度和用户体验。
24、本专利技术通过读取配置数据，更新相应的百分比，根据百分比自适应调整，可以解决现有常用的布局方式会造成表单项不能按照表单区域宽度自适应，或者自适应后显示过长过短或者参差不齐，对开发人员来说编码复杂，整体修改困难，做成的页面观感差，影响用户使用感的问题。也解决了响应式布局需要在每一个表单项上设定根据分辨率设定不同列宽代码量大，后续难以维护的问题。
25、本专利技术通过一次编码即可解决以上的问题，弥补了常见布局的缺陷，自动适配主流分辨率，实现表单的快速布局，且整体表单展示风格统一，易于后期的修改和维护。
26、为使本专利技术的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。
本文档来自技高网...【技术保护点】
1.一种基于标准宽度的前端表单项自适应布局方法，其特征是，包括以下步骤：
2.如权利要求1所述的一种基于标准宽度的前端表单项自适应布局方法，其特征是，所述标准列数根据期望表单展示的列数确定，所述标准宽度根据当前分辨率下表单所在区域的宽度以及标准列数的比值确定。
3.如权利要求1所述的一种基于标准宽度的前端表单项自适应布局方法，其特征是，当前表单区域的实际宽度发生变化时，返回至从获取当前表单区域的宽度的步骤，且迭代执行以下步骤。
4.如权利要求1所述的一种基于标准宽度的前端表单项自适应布局方法，其特征是，计算每个表单项一行中占据的百分比的过程为一行最多展示的表单项的数量的倒数，乘以百分百的结果。
5.如权利要求1所述的一种基于标准宽度的前端表单项自适应布局方法，其特征是，根据相应的百分比，使各表单项相应调整宽度至占满整行时，若表单项字段的配置数据表示该表单项字段为一行中的最后一个，则补齐100％。
6.如权利要求1所述的一种基于标准宽度的前端表单项自适应布局方法，其特征是，根据合并列参数计算占据对应的列数为根据每个表单项一
7.如权利要求1所述的一种基于标准宽度的前端表单项自适应布局方法，其特征是，若表单项中有整行参数，则该表单项的百分比为百分百。
8.如权利要求1所述的一种基于标准宽度的前端表单项自适应布局方法，其特征是，预先配置一表单布局函数，所述表单布局函数存储有表单元素id，标准宽度、标准列数和表单项字段的配置数据。
9.一种基于标准宽度的前端表单项自适应布局方法，其特征是，包括以下步骤：
10.一种电子设备，其特征是，包括存储器和处理器以及存储在存储器上并在处理器上运行的计算机指令，所述计算机指令被处理器运行时，完成权利要求1-8中任一项所述的方法中的步骤。
...【技术特征摘要】
1.一种基于标准宽度的前端表单项自适应布局方法，其特征是，包括以下步骤：
2.如权利要求1所述的一种基于标准宽度的前端表单项自适应布局方法，其特征是，所述标准列数根据期望表单展示的列数确定，所述标准宽度根据当前分辨率下表单所在区域的宽度以及标准列数的比值确定。
3.如权利要求1所述的一种基于标准宽度的前端表单项自适应布局方法，其特征是，当前表单区域的实际宽度发生变化时，返回至从获取当前表单区域的宽度的步骤，且迭代执行以下步骤。
4.如权利要求1所述的一种基于标准宽度的前端表单项自适应布局方法，其特征是，计算每个表单项一行中占据的百分比的过程为一行最多展示的表单项的数量的倒数，乘以百分百的结果。
5.如权利要求1所述的一种基于标准宽度的前端表单项自适应布局方法，其特征是，根据相应的百分比，使各表单项相应调整宽度至占满整行时，若表单项字段的配置数据表示该表单项字段为一行中的最后一个，...
【专利技术属性】
技术研发人员：冯志祥，孙成，张博，赵正宁，姜国莹，盖华慧，程守贺，周超，侯召忠，姜勇泉，
申请(专利权)人：山东山大华天软件有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。