1.「電話」フィールドがあるお問い合わせフォーム。 ユーザーは、必要に応じて、電話用にいくつかの追加フィールドを追加できます。
2.支払いの請求書。 「支払人名」や「口座番号」などのフィールドの固定セットがあります。 さらに、ポジションのあるテーブルがあります。 各ポジションは、「名前」、「数量」、「価格」のフィールドで構成されています。 ユーザーは、任意の数の追加のポジションを追加できます。
このようなアカウントの例を使用して、jqDynaFormの操作を見てみましょう。 このフォームの例を次に示します。
プラグインのために準備する必要があるHTMLコードを見てみましょう。
<!-- Base form --> <h1>Simple form demo</h1> <div id="smallForm"> <h2>Invoice</h2> <p>Number: <input name="number" size="6"> Payer: <input name="payer"></p> <h3>Products</h3> <div data-holder-for="product"></div> <p> </p> <input type="button" value="Save" id="saveSmallForm"> </div> <!-- Library of dynamic blocks. Here is only one block named "product" --> <div style="display:none"> <div data-name="product" data-label="Product" class="product"> <input name="title" style="width:600px"> Price: <input name="price" style="width:100px; text-align:right"> X <input name="amount" class="short" value="1" style="width:50px"> </div> </div>
明確にするために不要なものはすべて捨てます。
<!-- --> <div> … … <div data-holder-for="<_>"></div> <input type="button" value="Save"> </div> <!-- --> <div data-name="_"> … … </div>
つまり フィールドの固定セットを持つ基本的なフォームがあります。 このフォーム内に、「data-holder-for」属性でマークされたDIVホルダーを配置します。 属性値は、ここに挿入できるブロックの名前を指定します。 このブロックのHTMLコードはフォームとは別に設定され、data-name属性でマークされます。
アイテムの追加、削除、並べ替えと移動のドラッグアンドドロップ動作のためのボタンは、プラグインによって完全に形成されます。
API
フォームフィールドの値を取得するには、次の呼び出しを行います
var json = $(<>).jqDynaForm('get');
そして、次の構造のJSONオブジェクトを返します。
{ "number": "123", "payer": "Fake Incorporated", "productArray": [ { "title": "HP Pavilion g7-2010nr 17.3-Inch", "price": "499.99", "amount": "3" }, { "title": "Samsung Galaxy Tab 2 (7-Inch, Wi-Fi)", "price": "248.00", "amount": "1" }, { "title": "HP Envy 4-1030us 14-Inch Ultrabook", "price": "779.99", "amount": "1" } ] }
重複するネストされたブロックは自動的に配列に配置されることに注意してください。 フィールドのキー値は、INPUTおよびSELECTタグの名前属性です。
このような既製のJSONオブジェクト（スクリプトによって生成されるか、データベースから読み取る）が既にある場合は、1回の呼び出しでフォームを再作成できます。
$(<__>).jqDynaForm('set', json);
この呼び出しの後、入力済みのフィールドとネストされたブロックが形成された元のフォームを取得します。 もちろん、正しい初期フォームと準備されたフィールドブロックを使用します。
より複雑な例
実際、フォームは、基本フォームだけでなく動的ブロック内にもホルダーを配置できるため、フォームの構造ははるかに複雑になる可能性があります。 ホルダーは自分自身を参照することもでき、ツリーのような再帰構造を形成します。 より複雑なフォームの例を次に示します。
特徴
最も重要な機能をリストします。
- 特別な制限のない無料のHTMLフォームコード
- ブロックのネストの階層構造の厳密な定義
- いくつかのレベルでネストを作成する
- 再帰構造を作成する
- フォームへの入力時の構造に対するアクション：ブロックの追加、ブロックの削除、ブロックの別の許可された場所へのソートと移動（ドラッグアンドドロップ）。
- 構造の形状をJSONオブジェクトに変える
- JSONオブジェクトからフォームを再作成する
- プログラミングの必要なしにフォームを作成します。 カスタマイズは特別な属性によって定義されます。
また、次の機能を追加する予定です。
- 簡素化された正規表現フィールド検証メカニズム
- 外部イベントハンドラー
JSONを使用する
受信したJSON構造の操作方法。 JavaScriptで処理でき、サーバーに送信して、たとえばphp-arrayツリー構造に変換できます。
通常、フィールド値はデータベースに保存されます。 古典的な「フラット」フォームでは、すべてが明確です。 このフォームは、リレーショナルデータベーステーブルの1つのレコードに収まるのに最適です。 そして、ここではフォームはツリーのようなものであり、データ構造もそれぞれツリーのようなものです。 多くのストレージオプションがありますが、ここにいくつかあります：
- MongoDBの使用（最も美しいオプション）
- JSONオブジェクトを通常のリレーショナルデータベースにテキストとして保存します。 ただし、個々のフォームフィールドの要求を満たす必要がある場合、これは常に受け入れられるとは限りません。 したがって、次の妥協案を検討します
- リレーショナルデータベースのフィールドにトップレベルフィールドを格納し、リレーショナルデータベースの同じレコードの追加フィールドにJSONオブジェクトのテキスト表現としてネストされたブロックのすべてのフィールドを格納します。
- 最も退屈なオプションは、リレーショナルデータベースのフィールドブロックのタイプごとに個別のテーブルを作成し、JSONオブジェクトをバイパスしてこれらのテーブルに「手動で」入力することです。
このプラグインを作成したきっかけは何ですか
私はさまざまな種類のWebアプリケーションの開発を数多く行っています。 多くのアプリケーションには、多数のフォームが含まれています。 多くの場合、フォームハンドラーの作成には時間がかかります。 通常の平らな形状の作成を簡素化するさまざまな種類のソリューションがあります。 しかし、動的なフォームが必要な場合、標準のソリューションは原則として既にあまり役に立ちません。
悪夢のようなプロジェクトの典型的な進展は次のとおりです。 以下の要件は、一定の期間のお客様からのものです。
- 会社データを保存するためのフォームを作成します。 そこで必要なのは、「名前」、「市」、「通り」、「家」のフィールドだけです。
- ああ！ 企業は多くの支店を持つことができます。 フォームで各ブランチのアドレスを個別に設定できるようにします。
- ここでは、フォーム内の各会社が実行した複数のプロジェクトを記録できるようにする必要があると考えました。
- 各支店に連絡先を追加してください。 そして...追加されましたか？ そして、各電話に人の名前を示す方法は？ ...各支店の多くの連絡担当者に尋ね、それぞれに個別の電話番号を示すことができる必要があります。
「追加」、「削除」、「転送」など、これらすべてのボタンを絶えずプログラミングするという悪夢を避けるために、動的構造の形成に悩まされないように、フィールド値を処理するのが便利です。このプラグインを作成することを考えました。
ソースコード
プラグインはまだ未加工であることを事前に警告します。 しかし、社会が興味を持っているなら、私はそれを修正し、次のバージョンをレイアウトする予定です。
プロジェクトページはGoogle Codeにあります
ここから実際のサンプルとソースをダウンロードできます
そして、ここでは、生きた例で遊ぶことができます
PS：ご意見をお聞かせください。