动态生成复选框_开源H5可视化编辑器Dooring之 动态表单设计器实现

前言

之前笔者有写过一篇如何设计动态表单配置平台的文章，但是由于笔者电脑问题代码丢失，所以后期重新实现了一套表单设计器，并优化了之前的设计方式，特地做一下总结和复盘。

你将收获

• 动态表单开发的一般思路
• 可视化领域中的表单引擎
• 从零实现一款动态表单设计器
• 利用H5-Dooring开发一款表单设计平台

正文

按照习惯，我们先看看表单设计器实现的效果展示：

上图中我们将表单设计器集成到了H5-Dooring中，使其可以实现拖拽生成表单。

其次我们可以根据右边的配置项，动态的添加某个表单组件或或者修改组件字段和数据源。在配置好表单之后我们还可以定制表单提交的api接口地址，以便实现用户数据的可溯源性。

在开发之前，我们先分析一下动态表单设计的一般实现思路。

动态表单开发的一般思路

1. 静态化配置列表
静态化配置列表是最传统的表单配置方式之一，基本思路就是利用母表来生成配置项，进而实现表单配置。类似于以下方式：

早期的网站配置就是类似于这种呢方案实现的，比如说我们要定制网站的主色，网站某些组件是否可见，是一种比较简单的方式。但是缺点是每增加一个配置属性，都要开发人员重新编写一个字段配置代码，这种方式在表单开发中非常不灵活，而且对代码层有强依赖性，所以只适合做小型配置系统。比如个人网站，简单的自定义表单。

2. 基于json schema的动态表单配置

基于json schema的动态表单配置有两种实现方案， 一种就是支持在线修改json文件从而实现定制化，另一种就是完全无代码操作，但是前提都需要提供一套通用的表单模版。类似于如下案例：

此种方案可以实现基本的表单自治。也是本文主要实