it-roy-ru.com

Как создать форму из json-схемы?

Как создать форму из JSON Schema?

Я пишу код в JavaScript и JQuery. С помощью этой части шаблона, такой как Form, я создаю это с помощью haml и добавляю это в файл js . Для бэкэнда я использую python. Я использую Django Framework.

Итак, я получил несколько ссылок для создания формы из JSON Schema.

Ссылочная ссылка: http://neyric.github.io/inputex/examples/json-schema.html

В моей форме: Входные элементы: текстовые поля, текстовое поле, список выбора, кнопки отправки и отмены присутствуют.

Поэтому я хочу спросить, возможно ли создание формы с использованием схемы JSON? Если да, то можете ли вы предоставить хорошие ссылки?

14
eegloo

jsonform - Создание форм из схемы JSON. Легко в шаблоне. Совместимо с Twitter Bootstrap из коробки.

https://github.com/joshfire/jsonform

5
Hitham S. AlQadheeb

Я искал то же самое, и оказалось, что есть несколько хороших вариантов. Это лучшие библиотеки, которые я смог найти на GitHub:

10
Ognjen

Вы ищете Формы Альпаки . http://www.alpacajs.org

Формы, управляемые JSON Schema с использованием jQuery с механизмами компоновки для Bootstrap, jQuery UI/Mobile. Это очень расширяемый и довольно украшенный.

Apache 2.0 лицензированное и потрясающее сообщество (я приверженец кода).

7
Michael Uzquiano

Просто наткнулся на этот вопрос и хотел добавить эту новую опцию:

JSONForms расширяет подход модели представления AngularJS, устраняя необходимость в написании HTML-шаблонов для создания форм, используя возможности схем JSON и JSON.

GitHub: JSONForms ( Демо )

3
muenchdo

Генерация форм из JSON Schema является обычной практикой, особенно для автоматически генерируемых пользовательских интерфейсов. 

В вашем случае, если вы заинтересованы только в создании ОДНОЙ формы, возможно, будет лучше напрямую ее кодировать.

Вот библиотека, которую я создал, которая, надеюсь, вам покажется интересной:

json-формы:

JSON Schema to Генератор форм HTML, поддерживающий динамические подсхемы (на лету). Расширяемая и настраиваемая библиотека с нулевыми зависимостями. Bootstrap дополнения предоставляются

Живая демоверсия на http://brutusin.org/json-forms

2
idelvall

Посмотрите на эту демонстрацию ngx-schema-form :

http://guillotina.io/ngx-schema-form/dist/ngx-schema-form/json

  • Принимает файл схемы JSON
  • Создает это в полностью рабочую редактируемую форму веб-страницы
  • Сохраняет изменения в модели JSON как объект Javascript
  • Позволяет добавить пользовательский код валидатора для любого раздела

Это работает очень хорошо для меня (я нашел это только пару дней назад). Я использую его с последней версией Angular, и она работает точно так, как задокументировано. Источник примеров здесь:

https://github.com/guillotinaweb/ngx-schema-form/tree/master/src/app/json-schema-example

0
Yavin5

Или ... вы можете взглянуть на превзойти . Это небольшая библиотека генератора форм javascript, которую я недавно написал для поддержки своих собственных проектов, потому что мне надоел тот факт, что все генераторы форм, на которые я смотрел, имели массу зависимостей или были явно больше, чем моя одностраничная веб-страница. приложение.

Я имею в виду, давайте посмотрим правде в глаза: если мой SPA размером не более 20 КБ, но сжатый, то я ожидаю, что библиотечные процедуры, которые делают что-то простое, например, создание формы, будут значительно меньше. Его основными особенностями будут:

  • Нулевые зависимости.
  • Меньше наполнения (не минимизировано, но разархивировано: <2 КБ).
  • Встроенная поддержка проверки HTML5/браузера для всех типов ввода HTML5 +.
  • Таможенная проверка, кажется, интегрирована.
  • Поддерживает все веб-фреймворки (включая Bootstrap).
  • Автозаполняет наполовину заполненные формы при перезагрузке страницы во всех браузерах.
  • JSON установить/получить для всех значений формы.
0
BuGless

Посмотрите на этот проект https://github.com/mirshahreza/json-edit

Плагин jquery для преобразования схемы json в форму. Это может быть полезно в вашем сценарии

0
Mohsen Mirshahreza

Другой вариант - " json-schema-js-gui-model ". Он преобразует схему json в модель графического интерфейса, которую вы можете легко использовать в любой веб-среде для создания пользовательской формы. Для получения подробных рекомендаций по последнему шагу в angular 2 docs есть рецепт создания динамической формы из модели графического интерфейса.

0
Michael