我试图以编程方式从json文件构建响应式表单。该文件将包含有关需要显示的每个项目的信息（例如：标签+文本字段，然后标签+组合框，然后标签+等，包括标签的数据）。我希望能够读取json以编程方式构建任何表单，当用户使用他的数据（他的表单）加载页面时，具有响应式布局（如果同一行中有2个项目的空间，则有两列，如果没有，一栏等）。该项目也应正确使用空间（它们可以访问的宽度，如正常的引导字段）。
我的目标是编写我的布局，然后忘记它。我希望能够添加更多项目并获得我所描述的响应式布局（针对不同的屏幕尺寸和设备）。
我搜索了很多网页，但只能找到特定响应表单/需求的硬编码解决方案。
有一种简单的方法吗？甚至是一种方式？是否有免费的框架/插件来帮助我这样做？
无论如何，谢谢你的帮助。如果我的问题不清楚，请询问澄清，我很乐意根据需要添加更多信息。
PS：我从带有asp代码的数据库中获取了json。现在我有dhtmlx布局和组件，但他们没有响应。不过，我的一些组件必须在新环境中共存。
答案 0 :(得分：1)
我没有得到答案，但仍然使用bootstrap从数据生成html表单。这只是一个例子。数据是我制作的对象。您可以在此处看到一些响应式的构造示例。
您需要下载链接的样式表和脚本（请参阅HTML文件）才能使用它。对于大多数应用程序，您只需要bootstrap和JQuery，其他包括用于特定控件的。
我希望这可以提供帮助。
这是我的index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="js/bootstrap-checkbox.min.js" defer></script>
<script src="js/bootstrap-filestyle.min.js" defer></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>
<script src="js/myJavaScript.js"></script>
</head>
<body onload="addAllElements()">
<h1>Exemple de formulaire responsive généré pour Bootstrap</h1>
<br/>
<div class="row" id="mainRow">
</div>
</body>
</html>
这是我的javascript文件
//This function should read a json file and produce the right form
function addAllElements() {
//A test for generated forms (from objects)
for (var i = 0; i < 3; i++) {
addElement({
label: "SAQ ID :",
tag: "input",
type: "text",
infos: { name: "sapID" }
});
addElement({
label: "Family of equipement :",
tag: "textarea",
infos: { name: "familyEQ" }
});
addElement({
label: "Category of equipement :",
tag: "textarea",
infos: { name: "categoryEQ" }
});
addElement({
label: "Name of the equipement :",
tag: "input",
type: "text",
infos: { name: "nameEQ" }
});
addElement({
label: "Serial Number :",
tag: "input",
type: "text",
infos: { name: "serial" }
});
addElement({
label: "Type/Model :",
tag: "input",
type: "text",
infos: { name: "typeModel" }
});
addElement({
label: "Photo :",
tag: "pictureUpload",
type: "file",
infos: { name: "photo" }
});
addElement({
label: "Can the material be assigned or sold :",
tag: "checkbox",
type: "checkbox",
infos: {}
});
addElement({
label: "Some rich text editing :",
tag: "richEditor",
});
}
//We add the styling for checkboxes, file inputs and rich editors
$(':checkbox').checkboxpicker();
$(":file").filestyle({ buttonText: "File", buttonName: "btn-primary", placeholder: "No file" });
$('.richEditor').summernote();
}
//This function add a single element to the form
function addElement() {
//We create the group div (the whole element div)
var newDiv = document.createElement("div");
if(arguments[0].tag !== "richEditor"){
newDiv.className = "form-group col-xs-12 col-sm-6 col-lg-4 col-xl-3";
}else{
newDiv.className = "form-group col-xs-12 col-sm-12 col-lg-12 col-xl-12";
}
//We create and add the label to the div
var newLabel = document.createElement("label");
if(arguments[0].tag == "richEditor"){
newLabel.className = "col-xs-12 col-sm-2 col-lg-2 col-xl-2 control-label";
}else{
newLabel.className = "col-xs-12 col-sm-5 control-label";
}
newLabel.innerHTML = arguments[0].label;
newDiv.appendChild(newLabel);
//We create and add the input to the div
var inputDiv = document.createElement("div");
if(arguments[0].tag == "richEditor"){
inputDiv.className = "col-xs-12 col-sm-10 col-lg-10 col-xl-10";
//inputDiv.style.paddingLeft = "5%"
}else{
inputDiv.className = "col-xs-12 col-sm-7";
}
newDiv.appendChild(inputDiv);
switch (arguments[0].tag) {
case "input":
var newInput = document.createElement("input");
newInput.className = "form-control";
newInput.type = (arguments[0].type !== undefined ? arguments[0].type : "");
newInput.placeholder = (arguments[0].infos.placeholder !== undefined ? arguments[0].infos.placeholder : "");
newInput.name = (arguments[0].infos.name !== undefined ? arguments[0].infos.name : "");
inputDiv.appendChild(newInput);
break;
case "textarea":
var newInput = document.createElement("textarea");
newInput.className = "form-control";
newInput.type = (arguments[0].type !== undefined ? arguments[0].type : "");
newInput.placeholder = (arguments[0].infos.placeholder !== undefined ? arguments[0].infos.placeholder : "");
newInput.name = (arguments[0].infos.name !== undefined ? arguments[0].infos.name : "");
newInput.style = "resize: vertical;";
inputDiv.appendChild(newInput);
break;
case "pictureUpload":
var newInput = document.createElement("input");
newInput.className = "form-control stylesheet";
newInput.type = "file";
newInput.placeholder = (arguments[0].infos.placeholder !== undefined ? arguments[0].infos.placeholder : "");
newInput.name = (arguments[0].infos.name !== undefined ? arguments[0].infos.name : "");
inputDiv.appendChild(newInput);
break;
case "checkbox":
var newInput = document.createElement("input");
newInput.className = "form-control";
newInput.type = "checkbox";
var att = document.createAttribute("data-reverse");
newInput.setAttributeNode(att);
att = document.createAttribute("checked");
newInput.setAttributeNode(att);
inputDiv.appendChild(newInput);
break;
case "richEditor":
var newInput = document.createElement("div");
newInput.className = "form-control richEditor";
inputDiv.appendChild(newInput);
break;
default:
}
var mainRow = document.getElementById("mainRow");
mainRow.appendChild(newDiv);
}