一种适合配置型表单页面的布局方法.pdf

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN110825471A(43)申请公布日2020.02.21(21)申请号201910971353.9(22)申请日2019.10.14(71)申请人紫光云（南京）数字技术有限公司地址210000江苏省南京市浦口区江浦街道浦滨路320号浦口科创广场科创总部大厦B座17楼(72)发明人白溪阳方科李升琴张开棒赵巍(51)Int.Cl.G06F9/451(2018.01)G06F16/958(2019.01)权利要求书1页说明书5页附图1页(54)发明名称一种适合配置型表单页面的布局方法(57)摘要本发明公开了一种适合配置型表单页面的布局方法，涉及互联网技术领域。本发明包括在布局系统中选择预定义好的表单布局模版，由用户根据需要选择表单的布局并配置相应的表单元素，从而构成一张表单；获取表单元素数据信息，并根据表单元素数据信息自动匹配生成每个表单元素渲染的方式；对配置的表单元素进行相应的渲染；生成表单画面，显示表单画面。本发明为配置型表单提供了简单灵活的布局方式；对于表单元素的新增、删除非常友好，不需要改变其他元素的布局，各元素之间的布局没有耦合性。CN110825471ACN110825471A权利要求书1/1页1.一种适合配置型表单页面的布局方法，其特征在于，包括：S01、在布局系统中选择预定义好的表单布局模版，由用户根据需要选择表单的布局并配置相应的表单元素，从而构成一张表单；S02、获取表单元素数据信息，并根据表单元素数据信息自动匹配生成每个表单元素渲染的方式；S03、对配置的表单元素进行相应的渲染；S04、生成表单画面，显示表单画面。2.根据权利要求1所述的一种适合配置型表单页面的布局方法，其特征在于，所述表单元素包括columnNumber、colspan、rowspan；所述columnNumber表示列号，所述colspan表示所占列数，所述rowspan所占行数。3.根据权利要求1所述的一种适合配置型表单页面的布局方法，其特征在于，所述S01中表单布局模版预定义具体包括：从预先设置的组件库中获取多个目标组件；根据预先设置的布局规则和多个所述目标组件，生成页面模板；根据所述页面模板，生成包括多个所述目标组件的页面。4.根据权利要求3所述的一种适合配置型表单页面的布局方法，其特征在于，所述布局规则包括位置规则、类型规则和数量规则。2CN110825471A说明书1/5页一种适合配置型表单页面的布局方法技术领域[0001]本发明属于技术领域，特别是涉及一种适合配置型表单页面的布局方法。背景技术[0002]浏览器表单页面是一种比较常见的页面类型。浏览器的表单通常是由html,js,css组成，html主要负责绘制页面布局，表单元素，js用于监听事件，动态页面效果，发送请求等页面逻辑。Css用于页面样式调整。[0003]在同一个项目里面，我们一般会使用一套风格的表单元素去开发。在一些前端主流框架中(vue,react，angular等)，我们一般会通过组件的形式吧表单组件的封装好，在写代码的时候关注点就在于页面布局，组件配置和js逻辑。Js逻辑包括组件之间的联动，表单初始化，提交等。在不考虑布局和组件联动情况下，通过json配置的方式生成表单，相对是比较简单的。现有的浏览器表单页面存在布局不灵活，同时不能通过简单配置适配任意使用场景的缺点。发明内容[0004]本发明的目的在于提供一种适合配置型表单页面的布局方法，以解决背景技术中提到的问题。[0005]为解决上述技术问题，本发明是通过以下技术方案实现的：[0006]本发明为一种适合配置型表单页面的布局方法，包括：[0007]S01、在布局系统中选择预定义好的表单布局模版，由用户根据需要选择表单的布局并配置相应的表单元素，从而构成一张表单；[0008]S02、获取表单元素数据信息，并根据表单元素数据信息自动匹配生成每个表单元素渲染的方式；[0009]S03、对配置的表单元素进行相应的渲染；[0010]S04、生成表单画面，显示表单画面。[0011]进一步地，所述表单元素包括columnNumber、colspan、rowspan；[0012]所述columnNumber表示列号，所述colspan表示所占列数，所述rowspan所占行数。[0013]进一步地，所述S01中表单布局模版预定义具体包括：[0014]从预先设置的组件库中获取多个目标组件；[0015]根据预先设置的布局规则和多个所述目标组件，生成页面模板；[0016]根据所述页面模板，生成包括多个所述目标组件的页面。[0017]进一步地，所述布局规则包括位置规则、类型规则和数量规则。[0018]本发明具有以下有益效果：[0019]本发明为配置型表单