Создать отзывчивую форму бутстрапа программно из данных

Я пытаюсь создать отзывчивую форму программно из json-файла. Файл будет содержать информацию о каждом элементе, который должен быть показан (например: label + textfield, затем label + combobox, затем метки + и т. Д., Включая данные для этикеток). Я хотел бы иметь возможность читать json для создания любых форм программным образом, когда пользователь загружает страницу своими данными (своей формой), с отзывчивым макетом (если есть место для двух элементов в одной строке, имеют два столбца, если нет, один столбец и т. д.). Элемент должен правильно использовать пространство (ширина, к которой у них есть доступ, например, обычные поля начальной загрузки).Создать отзывчивую форму бутстрапа программно из данных

Моя цель - скопировать мой макет, а затем забыть об этом. Я хочу иметь возможность добавлять дополнительные элементы и получать гибкую компоновку, как я описал (для разных размеров экрана и устройств).

Я много искал в Интернете, но мог найти только жестко закодированные решения для конкретных реагирующих форм/потребностей.

Есть ли простой способ сделать это? Или даже способ вообще? Есть ли свободные рамки/плагины, чтобы сделать это или помочь мне это сделать?

Благодарю вас за помощь. Если мой вопрос неясен, попросите разъяснения, и я с удовольствием добавлю дополнительную информацию по мере необходимости.

PS: Я получаю свой json из базы данных с кодом asp. Сейчас у меня есть макет и компоненты dhtmlx, но они не реагируют. Тем не менее, некоторые из моих компонентов должны будут сосуществовать в новой среде.

источник

2016-06-15 David G.

Я не получил ответа, но все же создал 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); 
}

источник

2016-06-22 15:12:22

Создать отзывчивую форму бутстрапа программно из данных

ответ

Смежные вопросы