Есть иерархическая структура полей (select,input
), c возможностью для пользователя объединения и вложения их друг в друга. Иначе говоря дерево логических выражений, где каждая вершина-значение - это несколько форм ввода.
Так как это дерево необходимо сохранять в некую структуру и восстанавливать обратно (строить HTML) из неё. То посоветовали использовать JSON + какую-либо JS-библиотеку, чтобы уйти от изменений кода в случае незначительных изменений формы.
HTML выглядит следующим образом (сгенерирован для примера, из HTML удалены из лишние компоненты типа кнопок):
<div class="conditions-group logical-or">
<div class="conditions">
<div class="conditions-group logical-and">
<div class="conditions">
<div class="condition row">
<div class="metric">
<select class="form-control"></select>
</div>
<div class="operator">
<select class="form-control "></select>
</div>
<div class="value">
<input value="" class="form-control">
</div>
</div>
<div class="condition row">
<div class="metric">
<select class="form-control"></select>
</div>
<div class="operator">
<select class="form-control "></select>
</div>
<div class="value">
<input value="" class="form-control">
</div>
</div>
</div>
<div class="condition row">
<div class="metric">
<select class="form-control"></select>
</div>
<div class="operator">
<select class="form-control "></select>
</div>
<div class="value">
<input value="" class="form-control">
</div>
</div>
</div>
</div>
Блоки строятся с помощью JQuery на основе текущих.
Прошу помочь: Что поможете посоветовать для реализации такого типа задачи? Если JS-библиотека, то какая?
Заранее большое спасибо.
Использую bootstrap 3, у страницы появляется горизонтальный скроллЕсли убрать какую-то одну секцию (section) - он исчезает
Подскажите, пожалуйста, как сверстать такое расположение иконок? Если приглядеться, там по окружности (белый фон с несколькими кругами) расположены...