我正在尝试从 json 文件以编程方式构建响应式表单。该文件将包含有关需要显示的每个元素的信息(例如:标签+文本字段，然后是标签+组合框，然后是标签+等，包括标签的数据)。当用户使用他的数据(他的表单)加载页面时，我希望能够读取该 json 以编程方式构建任何表单，并具有响应式布局(如果同一行中有 2 个元素的空间，则有两列，如果不是，一栏等)。该元素也应该正确使用空间(他们可以访问的宽度，就像正常的 Bootstrap 字段一样)。
我的目标是编写我的布局代码，然后忘掉它。我希望能够添加更多元素并获得如我所描述的响应式布局(针对不同的屏幕尺寸和设备)。
我在网上搜索了很多，但只能找到针对特定响应形式/需求的硬编码解决方案。
有没有简单的方法来做到这一点？甚至根本没有办法？是否有免费的框架/插件可以执行此操作或帮助我执行此操作？
无论如何，谢谢你的帮助。如果我的问题不清楚，请要求澄清，我很乐意根据需要添加更多信息。
PS:我使用 asp 代码从数据库中获取我的 json。现在我有 dhtmlx 布局和组件，但它们没有响应。不过，我的一些组件将不得不在新环境中共存。
最佳答案
我没有得到答案，但仍然使用 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);
}
关于css - 从数据以编程方式创建响应式 Bootstrap 表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37829108/