如何实现一个电子表单设计器

大家好，欢迎来到IT知识分享网。

什么是电子表单设计器

电子表单设计器是一种在线设计工具，可以用于创建和设计电子表单。电子表单设计器一般会提供可视化的交互操作，让用户可以轻松的拖放各种页面元素，如文本框、复选框、下拉框等，实现表单的布局和样式配置，用户也可以通过设计器配置表单的属性，如校验规则、数据绑定规则等，实现表单的数据交互逻辑。设计好的电子表单，通常可以直接发布，提供给业务用户使用。

一个典型的电子表单设计器，如下图：

电子表单实现方式

电子表单通常由多个部分组成，一般包括在线设计器、解析器、存储、渲染、实例管理等多个部分，市场上电子表单的实现技术，大致可以分为两大类：

• 第一类：使用在线设计器将设计好的电子表单生成代码，然后将代码进行打包部署，提供给业务用户使用。这种方式一般可在线设计的功能比较有限，依赖开发人员进行二次开发，才能实现更复杂的业务。
• 第二类：使用在线设计器将设计好的电子表单生成模型文件，然后提供一个解析引擎，可以基于模型文件在线动态渲染表单，实现表单的功能。这种方式可以在线设计更复杂的功能，包括业务逻辑、数据交互等，能够显著提高开发效率，也方便电子表单的管理。

第二种方式通常叫做基于模型的电子表单技术，是大部分低代码平台中电子表单的使用方式。

因为电子表单技术包括很多方面，包括表单设计、数据存储、实例管理等，今天不会展开介绍，本文主要介绍一下电子表单中在线设计器一般如何实现。

电子表单设计器的关键技术

要实现一款能够用于企业应用的电子表单设计器，笔者认为，以下功能都是必备功能、缺一不可的。

拖拽交互技术

在线设计器必须基于B/S架构，提供可视化的交互方式，支持用户通过拖拽方式进行表单布局的设置和调整。设计器一般分为按钮区域、控件区域、属性区域和画布区域。用户可以从控件区域拖拽控件到画布区，也可以在画布区域内对控件位置进行随意的调整。

嵌套布局设置

控件一般分为普通控件和布局控件。普通控件例如文本框、数字框、按钮等，布局控件例如卡片布局、页签布局、栅格布局等，布局控件内可以放普通控件，同时，布局控件也必须支持嵌套，即布局控件内部可以放其他布局控件，这样才能灵活的设置各种形式的表单，满足不同场景的需求。

控件模型定义

在线设计器最终的输出是模型文件，模型文件必须结构清晰，方便解析，一般以JSON形式进行定义。模型文件一般分为两部分，全局属性和控件列表。控件列表内的模型，就对应画布上一个一个的控件，控件可以嵌套控件，同样，控件模型也可以嵌套控件模型。

如果设计一个下图这样的表单，对应的模型展示在下面。

config 代表全局配置，list 代表控件模型列表，控件模型内可以嵌套控件模型，控件模型内又包括控件基本信息、控件属性、控件校验规则、控件事件等。

{ "config": { "layout": "horizontal", "selfUpdate": false, "isRecordDataLog": false, "hideDialogButtons": false, "customLabelWrap": false, "customStyle": "", "customFormTitle": "", "customCssCode": "", "buttons": [], "grid": false, "labelWidth": "100px" }, "list": [ { "tableName": "yongzsq", "model": "sqrssgs", "key": "select_1jkQ0XcA", "type": "select", "name": "申请人所属公司", "options": { "width": "100%", "multiple": false, "disabled": false, "readOnly": false, "hidden": false, "showSearch": false, "clearable": false, "options": [ { "value": "1", "label": "下拉框1" }, { "value": "2", "label": "下拉框2" } ], "customCss": "" }, "rules": [ { "required": false, "message": "必填项" } ] }, { "key": "grid_eca9sxjT", "type": "grid", "name": "栅格布局", "options": { "gutter": 0, "hidden": false, "customCss": "" }, "columns": [ { "span": 12, "list": [ { "tableName": "yongzsq", "model": "sqr", "key": "user_dhiNxNZ9", "type": "user", "name": "申请人", "options": { "defaultValue": "", "currentUser": false, "multiple": false, "disabled": false, "readOnly": false, "hidden": false, "customCss": "" }, "rules": [ { "required": false, "message": "必填项" } ] } ] }, { "span": 12, "list": [ { "tableName": "yongzsq", "model": "sqrq", "key": "date_zZ912dJX", "type": "date", "name": "申请日期", "options": { "width": "100%", "defaultValue": "", "currentDate": false, "showTime": false, "disabled": false, "readOnly": false, "clearable": false, "format": "YYYY-MM-DD", "hidden": false, "customCss": "" }, "rules": [ { "required": false, "message": "必填项" } ] } ] } ] } ] } 

自定义事件

通过拖拽控件，可以设置表单的布局，但是，表单事件是业务规则中必不可少的功能。当通过配置无法实现用户需求的时候，用户可以通过设计器提供的事件入口，编写自定义的业务代码，实现更复杂的业务场景。

例如，控件有change事件、blur事件、click事件等：

例如，表单有打开事件、数据加载事件、数据保存事件等，表单还可以自定义按钮栏，支持自定义按钮的功能：

 设计器必须提供一个方便易用的在线脚本编辑器，提供用户编写自定义代码的效率。

自定义样式

设计器提供的控件，一般都是统一的样式，但实际业务中，总会有一些情况，要求控件可以自定义样式，例如某个输入框的字体要求红色、或者边框要进行加粗等。设计器提供的样式扩展功能，不能仅仅是固定的样式，因为固定的样式难以枚举业务场景的需求，所以设计器必须允许用户通过css覆盖的方式，实现各种场景下自定义样式的功能。

设计器必须提供在线的css编辑器，编辑器应方便易用，提高用户开发效率。

自定义组件

在线设计器的控件是固定的，但是用户场景是无限的，有些业务场景下，当现有控件无法满足需求时，用户可以自定义控件，设计器应支持用户使用自定义开发的控件。

在线预览

设计器必须具备在线预览功能，在线预览的效果与表单实际运行的布局、样式、逻辑、扩展事件等必须一致，用户可以边开发边预览查看效果，实现真正的所见即所得，这是提高在线表单开发效率必须功能。

数据绑定

设计器还应提供数据绑定的功能。数据绑定是指表单控件与数据字段进行绑定，当表单渲染运行的时候，可以自动的从数据库读取对应字段的数据，展示到表单控件上，并且将用户在控件上填写的数据，自动的保存到数据库的对应字段中。这部分的控制逻辑主要在表单渲染、数据存储上，设计器主要提供的字段和数据绑定关系的配置功能。

数据校验规则

表单用于填写数据的场景时，一般要求具备数据校验的功能，所以设计器应提供校验规则的配置。常见的数据校验规则包括必填校验、唯一校验、正则校验、组合校验、自定义函数校验等。

可扩展的架构

在电子表单设计器的代码实现层面，还必须具备控件可扩展的架构特性，一款表单设计器的控件是否方便扩展，是这款表单设计器能否长久延续发展的重要特性之一。客户的业务场景各种各样，要适应客户业务的发展，我们必须不断扩展表单的控件，提升电子表单的能力，所以，当电子表单设计器基本功能稳定后，扩展控件将是一个长期的工作。

模型版本管理

随着业务的变化，用户会不断的调整表单，这要求表单设计器必须具备模型备份或模型版本管理的功能。表单设计器输出的是表单模型文件，一般模型文件会存放在数据库中，大部分的低代码平台都可以很方便的提供这个功能。

总结

以上是笔者对于如何实现基于模型驱动的电子表单设计器的一些想法，供大家参考。设计器只是电子表单技术体系中的一个方面，在表单如何渲染、数据如何存储、实例如何管理等方面，还有很多需要探索的地方。本文调研的平台和截图来源是云程低代码平台，感兴趣的可以访问网站 （ 云程 | 云程低代码平台 (yunchengxc.com) ） 进行参考。