FormBuilder表单编辑页面实现咨询：如何基于已有JSON数据在管理面板渲染可编辑表单

别担心，FormBuilder其实专门提供了加载已有表单结构的配置项——formData，刚好能解决你的需求。你只需要把数据库里存储的表单JSON数组传入这个配置项，就能渲染出可编辑的表单页面了。

具体实现步骤： #

• 第一步：从数据库或后端接口获取你已经存储的表单JSON数据（就是你提供的那个数组）
• 第二步：在初始化formBuilder的options配置中，添加formData属性，值就是你获取到的表单JSON
• 第三步：正常初始化formBuilder，它会自动根据传入的formData渲染出完整的可编辑表单

修改后的代码示例： #

// 从数据库获取的已保存表单JSON数据
const savedFormData = [
  { "type":"header", "subtype":"h1", "label":"<h2>İş Başvuru Formu</h2>", "access":false },
  { "type":"text", "required":false, "label":"Adınız Soyadınız", "className":"form-control", "name":"text-1629792064114-0", "access":false, "subtype":"text" },
  { "type":"text", "required":false, "label":"Doğum Yeri", "className":"form-control", "name":"text-1629792065034-0", "access":false, "subtype":"text" },
  { "type":"date", "required":false, "label":"Doğum Tarihi", "className":"form-control", "name":"date-1629792096274-0", "access":false },
  { "type":"select", "required":false, "label":"Cinsiyetiniz", "className":"form-control", "name":"select-1629792210826-0", "access":false, "multiple":false, "values":[ { "label":"Erkek", "value":"option-1", "selected":true }, { "label":"Kız", "value":"option-2", "selected":false }, { "label":"Option 3", "value":"option-3", "selected":false } ] },
  { "type":"text", "required":false, "label":"Boyunuz", "className":"form-control", "name":"text-1629792252737-0", "access":false, "subtype":"text" },
  { "type":"text", "required":false, "label":"Kilonuz", "className":"form-control", "name":"text-1629792262338-0", "access":false, "subtype":"text" },
  { "type":"button", "subtype":"submit", "label":"Button", "className":"btn-default btn", "name":"button-1629792543318-0", "access":false, "style":"default" }
];

// 初始化配置，添加formData属性
var options = {
  // 保留你之前的其他配置项
  formData: savedFormData // 关键配置：加载已有表单数据
};

// 渲染可编辑的表单
var formBuilder = $(".form-create").formBuilder(options);

这样处理后，页面上的formBuilder就会完全还原你之前保存的表单结构，并且支持和创建页面一样的编辑操作——比如拖拽调整字段顺序、修改字段属性、添加/删除字段等。

内容的提问来源于stack exchange，提问作者mehmet degirmenci