javascript - 如何使用 jquery 构建动态表单生成器

Question

我想用 jquery 开发一个动态表单构建器，用户可以构建自己的表单并更改表单名称、输入类型、大小等。我知道有一些很酷的拖放在线表单构建器，但我想开发一个非常好的表单构建器。简单的表单生成器。

我已经开始开发这个，但遇到了一些问题。

当用户单击标签(输入字段)时，它会使用 jquery 动态创建一个带有编辑和删除按钮的输入字段。

下面的代码将输入字段附加到现在为空的 div 中。

$(document).ready(function() {
  $(".text").click(function(){
    $("#textInput").append('<input class="form-control"  type="text">' + '<input class="btn btn-default" type="button" value="Edit" id="editbtn"><input class="btn btn-default"  type="button" value="Delete" >'             ).show().css('display', 'block')});
});


    

.items {
  border: 1px solid lightgray; 
  display: none;  
  padding: 0 10px 10px 10px;
  }

<div class="items" id="textInput">
  <h3>Your Form</h3>
  <hr>    
</div>

单击文本输入时，我想显示一个表格或模式，用户可以在其中保存对输入字段的更改，首先编辑按钮不起作用，其次如何编辑和保存对输入字段的更改(该过程将如何工作)。

这就是我想要实现的

Answer 1

我一直致力于动态表单生成器的研究，并借鉴了一些优秀的开源解决方案的想法。

他们这样做:

1. 在后端将表单结构描述为 JSON。
2. 然后使用以下库之一在前端呈现 JSON 以形成。

jsonform/jsonform

源代码:jsonform/jsonform

示例:

rjsf-team/react-jsonschema-form

源代码:https://github.com/rjsf-team/react-jsonschema-form