根据数据以编程方式创建响应式 bootstrap 表单

Question

我正在尝试从 json 文件以编程方式构建响应式表单。该文件将包含有关需要显示的每个项目的信息（例如：标签+文本字段，然后是标签+组合框，然后是标签+等，包括标签的数据）。我希望能够读取 json 以编程方式构建任何表单，当用户使用他的数据（他的表单）加载页面时，具有响应式布局（如果有 2 个项目的 space同一行，有两列，如果没有，一列，等等）。该项目也应该正确使用 space（他们可以访问的宽度，就像正常的 bootstrap 字段一样）。

我的目标是编写我的布局代码，然后忘记它。我希望能够添加更多项目并获得像我描述的响应式布局（针对不同的屏幕尺寸和设备）。

我在网上搜索了很多，但只能找到特定响应式的硬编码解决方案 forms/needs。

有没有简单的方法可以做到这一点？甚至根本没有办法？有没有免费的 frameworks/plugins 来做这件事或帮我做这件事？

谢谢你的帮助。如果我的问题不清楚，请要求澄清，我很乐意根据需要添加更多信息。

PS：我使用 asp 代码从数据库中获取 json。现在我有 dhtmlx 布局和组件，但它们没有响应。不过，我的一些组件将不得不在新环境中共存。

Answer 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);
}

根据数据以编程方式创建响应式 bootstrap 表单

Create responsive bootstrap form programmatically from data

css

populate

twitter-bootstrap

programmatically-created

responsive