web-dev-qa-db-ja.com

jsonスキーマからフォームを作成する方法

JSONスキーマからフォームを作成する方法は？

JavaScriptとjqueryでコードを書いています。フォームのようなこのテンプレートパーツを使用して、これをhamlで作成し、jsファイルに追加します。バックエンドにはpythonを使用しています。私はDjangoフレームワークを使用しています。

JSONスキーマからフォームを作成するためのリンクをいくつか取得しました。

参照リンク： http://neyric.github.io/inputex/examples/json-schema.html

私のフォームでは：入力要素：テキストボックス、テキストエリア、選択リスト、送信ボタン、キャンセルボタンがあります。

JSONスキーマを使用したフォームの作成が可能かどうかを確認したいのですが。もしそうなら、あなたはいくつかの良いリンクを提供できますか？

javascriptpythondjangopython-2.7django-views
19
eegloo

jsonform-JSONスキーマからフォームを作成します。簡単にテンプレート化できます。 Twitterと互換性がありますBootstrapそのまま使用できます。

https://github.com/joshfire/jsonform

6
Hitham S. AlQadheeb

私は同じものを探していましたが、いくつかの良いオプションがあることがわかりました。これらは、GitHubで見つけることができる最高のライブラリです。

12
Ognjen

あなたはアルパカフォームを探しています。 http://www.alpacajs.org

Bootstrap、jQuery UI /モバイル用のレイアウトエンジンでjQueryを使用するJSONスキーマ駆動型フォーム。それは非常に拡張性があり、かなり整っています。

Apache 2.0ライセンスの素晴らしいコミュニティー（私はコードコミッターです）。

7
Michael Uzquiano

この質問に遭遇し、この新しいオプションを追加したかっただけです：

JSONFormsは、JSONおよびJSONスキーマの機能を利用してフォームを作成するためにHTMLテンプレートを作成する必要をなくすことにより、AngularJSビューモデルアプローチを拡張します。

GitHub： JSONForms （ Demo ）

3
muenchdo

JSONスキーマからのフォームの生成は、特に自動的に生成されたユーザーインターフェースのための一般的な方法です。

あなたの場合、1つのフォームの作成のみに関心がある場合は、直接コーディングする方が良いでしょう。

ここに私が作成したライブラリーがあります。

json-forms：

JSONスキーマからHTMLフォームジェネレーターへ、動的サブスキーマをサポート（オンザフライで解決）。依存関係のない拡張可能でカスタマイズ可能なライブラリ。 Bootstrap提供されるアドオン

http://brutusin.org/json-forms のライブデモ

2
idelvall

この ngx-schema-form のデモをご覧ください。

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

  • JSONスキーマファイルを取得します
  • 完全に機能する編集可能なWebページフォームに生成します
  • JSONモデルへの変更をJavaScriptオブジェクトとして保存します
  • 任意のセクションにカスタム検証コードを追加できます

これは私にとっては非常にうまく機能します（数日前に見つけただけです）。私は最新のAngularでそれを使用し、ドキュメントどおりに動作しています。ソースの例はここにあります：

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

0
Yavin5

または... outperform を確認できます。これは小さなjavascriptフォームジェネレーターライブラリーです。私が最近見たすべてのフォームジェネレーターには依存関係がたくさんあるか、単一ページのWebよりも明らかに大きいという事実にうんざりして、自分のプロジェクトをサポートするために最近書きました。応用。

つまり、正直に言うと、私のSPAが20KBの縮小されていないもののgzip圧縮されている場合、フォームを生成するような単純な処理を行うライブラリルーチンが大幅に小さくなることを期待しています。主な機能は次のとおりです。

  • 依存関係はありません。
  • 詰め物が少ない（非縮小だがgzip圧縮：<2KB）。
  • すべてのHTML5 +入力タイプに対するネイティブHTML5 /ブラウザー検証サポート。
  • カスタム検証はシームレスに統合されています。
  • そこにあるすべてのWebフレームワーク（Bootstrapを含む）をサポートします。
  • すべてのブラウザーでページを再ロードするときに、半分入力されたフォームを自動入力します。
  • すべてのフォーム値のJSON設定/取得。
0
BuGless

このプロジェクトを見てください https://github.com/mirshahreza/json-edit

Jsonスキーマをフォームに変換するjqueryプラグインは、シナリオに役立つ場合があります

0
Mohsen Mirshahreza

別のオプションは " json-schema-js-gui-model "です。 jsonスキーマをGUIモデルに変換し、任意のWebフレームワークで簡単に使用してカスタムフォームを作成できます。最後のステップに関する詳細なアドバイスについては、 angular 2 docs に、guiモデルから動的フォームを作成するためのレシピがあります。

0
Michael