bsFormBuilder

Это инструмент для создания перетаскиваемых форм на основе Bootstrap (v4.x) и JQuery.

Демонстрация

• Демонстрационный сайт: http://bsformbuilder.jpress.cn
• Рекомендуется использовать средство форматирования кода: http://www.codeformat.cn

Особенности

1. На основе Bootstrap (v4.x) + JQuery, простой в использовании.
2. Перетаскиваемые HTML-компоненты, поддерживающие расширение с помощью Json.
3. Панель свойств компонентов, поддерживающая расширение с помощью Json.
4. Поддерживает экспорт html и json, а затем создание пользовательского интерфейса с помощью json.
5. Поддерживает импорт json в bsFormBuilder для вторичного редактирования.
6. Богатый API, удобный для вторичной разработки и расширения.
7. Поддерживает функцию «шаблона», можно выбрать существующий шаблон для вторичной разработки.
8. Встроенный облегчённый движок рендеринга HTML, очень быстрый и удобный.

Быстрое использование

<div id="builder"></div>
<script>
    $('#builder').bsFormBuilder({...});
</script>

Перед использованием необходимо импортировать соответствующие файлы bootstrap и jquery.

<link href="path/bootstrap.min.css" rel="stylesheet">
<link href="path/bootstrap-icons.css" rel="stylesheet">

<script src="path/jquery.min.js"></script>
<script src="path/bootstrap.bundle.min.js"></script>

<!-- Импорт зависимостей bs-form-builder -->
<link href="path/bs-form-builder.min.css" rel="stylesheet">
<script src="path/bs-form-builder.min.all.js"></script>

Документация по разработке

1. Инициализация

Инициализируйте с помощью $('#builder').bsFormBuilder({options...}), метод bsFormBuilder может принимать параметры конфигурации options, содержимое которых следующее:

{
  //режим: "view" режим предварительного просмотра, "builder" режим конструктора, значение по умолчанию - builder
  mode: "builder", 
  templateEngine: null, //поддержка настраиваемого механизма рендеринга шаблонов, по умолчанию используется fasty
  bsFormContainerSelector: ".bsFormContainer", // контейнер дизайна
  bsFormContainerFilterSelector: ".bsFormFilter", // класс компонента, который нельзя перетащить в контейнере дизайна
  bsFormContainerSortableGroup: "shared", // конфигурация группы в главном контейнере
  bsFormContainerPlaceHolderSelector: ".bsFormContainer-placeholder", // подсказка содержимого в контейнере дизайна
  bsFormPropsSelector: ".bsFormProps", // содержимое панели
  bsFormPropsTitleSelector: ".bsFormPropsTitle", // заголовок панели
  bsFormPropsFilter:null, // фильтр свойств, используемый для фильтрации свойств специальных компонентов
  bsFormPropsItemAppended:null, //мониторинг добавления html-содержимого props, можно установить содержимое панели props или событие
  customBuilderStructure: false, // настраиваемая структура контейнера
  onDataChange:null, // мониторинг изменений данных (до обновления)
  onDataChanged:null, // мониторинг изменения данных (после обновления)
  renderEmptyDrags: null,//вызов этого метода при отсутствии каких-либо компонентов в категории перетаскивания слева
  useComponents:[], //какие компоненты использовать
  unUseComponents:[], //исключить какие компоненты (не использовать какие компоненты)
  customRender:null, //поддерживает настраиваемый рендеринг или серверный рендеринг
  optionsDatasources: null, // определение источника данных
  //инициализировать данные
  datas:[],
  //список кнопок действий
  actionButtons:[],
  //шаблон кнопки действия
  actionButtonTemplate:'',     
  //конфигурация расширения компонентов, содержимое конфигурации может переопределить системную конфигурацию
  components: {},
  //свойства по умолчанию для каждого компонента
  defaultProps: [],
  //конфигурации шаблона рендеринга свойств
  propTemplates: {},
  //метод инициализации обратного вызова
  onInit: function(bsFormBuilder){},
}

2. Вызов метода

• Вызовите $('#builder').bsFormBuilder('methodName',arguments...).
• Или вы можете получить экземпляр bsFormBuilder через $('#builder').bsFormBuilder().data('bsFormBuilder') и напрямую вызвать его методы.

Методы, поддерживаемые bsFormBuilder:

• init: инициализация, автоматически вызывается bsFormBuilder.
• render(data, withActive): рендерит html-контент на основе данных.
• renderDefault(data): системный встроенный метод рендеринга по умолчанию, когда компонент не определяет свой собственный метод рендеринга, используйте этот метод для рендеринга.
• deepCopy(target, withNewElementIdAndId): инструмент глубокого копирования.
• createComponentData(component): создать данные на основе компонента.
• genRandomId(): генерирует случайный идентификатор.
• makeFormItemActive(elementId): устанавливает состояние выбора.
• deleteFormItem(elementId): удаляет formItem.
• copyFormItem(elementId): копирует formItem.
• getDataByElementId(elementId): получает данные на основе узла.
• removeDataByElementId(elementId): удаляет данные на основе идентификатора узла.
• getParentArrayByElementId(elementId): получает родительский массив на основе идентификатора узла.
• refreshDataIndex($parentElement): обновляет атрибут индекса данных.
• refreshPropsPanel(): рендерит (обновляет) панель свойств.
• renderPropTemplate(prop, data, template): рендерит шаблон свойств.
• exportToJson(): экспортирует данные json.
• exportToHtml(): экспортирует html-данные.
• getDatas(): получает данные и может их модифицировать.
• addDataToRoot(data): добавляет данные в корневой узел.
• addDatasToRoot(array): добавляет массив данных в корневой узел.
• addDataToContainer(data, containerElementId, index): добавляет данные в дочерний контейнер.
• addDatasToContainer(array, containerElementId, index): добавляет массив данных в дочерний контейнер.
• updateDataAttr(data, attr, value): обновляет свойство данных и синхронизирует его с отображением html.
• refreshDataElement(data): обновляет данные до отображения html.
• isViewMode(): является ли это режимом просмотра.
• isBuilderMode(): является ли это режимом конструктора (конструктора).
• clear(): очищает все содержимое дизайна, затем можно повторно спроектировать.
• destroy(): уничтожает весь компонент.

3. Расширение компонентов

В bsFormBuilder компоненты определяются содержимым json, полный json-контент одного компонента выглядит следующим образом:

{
    "name": "Входное поле",
    "tag": "input",
    "drag": {
            "title": "Входное поле",
            "type": "base",