OData、Angular.js、Bootstrap、およびJavaScriptグリッドを使用してこれらのフォームを作成するプロセスを検討してください。 このようなアプリケーションのすべての要件は、これらのツールで既に実装されており、実際に何も書く必要はありません。
調査フォームの主な要件をリストします（括弧内はこの要件を実装するツールです）：
- フォームフィールド：「名」、「姓」、「メール」、「コメント」
- フォームは、システム管理者（Angular.js）が後で表示および分析できるように、データベースにデータを保存する必要があります
- フォームは、サーバー（Angular.js）に送信する前にデータを検証する必要があります
- フォームは、サーバー（Angular.js）にデータを送信するときにページをリロードしないでください。
- フォームは、サイズを変更して、サイトページ（ブートストラップ）に挿入される画面またはdivブロックのさまざまな幅に合わせる必要があります。
ユーザーリストフォームの基本要件：
- 多数のユーザーがいる場合にページメカニズムまたは仮想スクロールを提供する
- 任意のフィールド（グリッド列）によるソートを提供します
- データ取得を提供する
- データを追加、編集、削除する機能を提供する
JavaScriptグリッドは、これらの要件をすべて満たしています。 たとえば、 Kendo UI 、 DevExtreme Web 、 Syncfusion HTML5コントロール 、 Infragistics HTML5コントロール 、 OpenUI5 、 Wijmoライブラリを見る価値があります 。
基本的なサーバーリクエスト：
- 新しいエントリを追加
- レコードを編集
- エントリを削除
- 特定の条件を満たすレコードの総数を取得します
- 共通のレコードセットから選択を取得して、1ページに表示する
- レコードのセット全体を取得する
- 1つ以上のフィールドでエントリを並べ替える
- 特定の条件セットでレコードをフィルタリングする
- バッチ更新操作の実行-一度にレコードのグループを追加、変更、削除する
これらのすべてのリクエストにハンドラーを実装する必要を回避するために、既製のODataサーバーであり、これらすべてのリクエストの完全な自動処理を提供するdataboomを使用します。
調査票
BootstrapとAngular.jsを使用して調査フォーム（詳細フォーム）を作成します。
- ブートストラップを使用すると、フォームの設計が大幅に簡素化され、要素のサイズ変更や配置などを簡単に行うことができます。
- Angular.jsは、データを検証してサーバーに送信するための最小限のコードを提供します。 Bootstrap + Angular.jsバンドルを使用すると、その場で簡単なフォームを作成できます。
さまざまな形状の既製のテンプレートを常に手元に用意することをお勧めします。 例：
- さまざまなタイプのフィールドを持つ単純な詳細フォーム。
- 小さなリストを含む単純な詳細フォーム、たとえば、連絡先のリストを持つ個人に関するデータの詳細フォーム
- 等
JSFiddle、Bootply、CodePen、PlunkerなどのWebサイトにテンプレートを保持しておくと非常に便利です。
同様のフォームの例に基づいた単純なコピーアンドペーストの使用：
- フォームフィールドを作成し、名前を変更します。
- 「名」、「姓」、「メール」の各フィールドは必須であることを示しています
- フォームからデータを保存するようにURLを設定します-この場合、「https://samples.databoom.space/api1/sandboxdb/collections/user」。
- フォームのレイアウトを少しカスタマイズします（この場合、他のフィールドの右側にコメントを配置します）。 そして、私たちがする必要があるのはそれだけです。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example - example-example32-production</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <link href="http://bootswatch.com/cerulean/bootstrap.min.css" rel="stylesheet" type="text/css"> <style>.form-control {border-width:2px}</style> </head> <body ng-app="formExample" ng-controller="ExampleController"> <div class="container"> <div class="col-md-12"> <h1>Simple Bootstrap + Angular.js form</h1> <br /> </div> <form name="myForm"> <div class="col-md-4"> <div class="form-group"> <label for="firstname">First Name:</label> <input class="form-control" id="firstname" type="text" placeholder="Enter first name" ng-model="user.firstname" required autofocus /> </div> <div class="form-group"> <label for="lastname">Last Name:</label> <input class="form-control" type="text" id="lastname" placeholder="Enter last name" ng-model="user.lastname" required /> </div> <div class="form-group"> <label for="email">Email:</label> <input class="form-control" type="email" id="email" name="input" placeholder="Enter email" ng-model="user.email" required> </div> </div> <div class="col-md-8"> <div class="form-group"> <label for="comment">Comment:</label> <textarea rows="9" class="form-control" id="comment" placeholder="Enter comment" ng-model="user.comment"></textarea> </div> </div> <div class="col-md-12"> <input class="btn btn-primary" type="submit" ng-click="insert(myForm.$valid, user)" value="Add new user" /> <input class="btn btn-info" type="submit" ng-click="update(myForm.$valid, user)" value="Update" /><br /><br /> </div> </form> </div> <script> angular.module('formExample', []) .controller('ExampleController', ['$scope', '$http', function ($scope, $http) { $scope.update = function (isvalid, user) { if (!isvalid) return; $http.post('https://samples.databoom.space/api1/sandboxdb/collections/user', JSON.stringify(user)) .success(function (data, status, headers, config) { $scope.user = data.d.results; }); }; $scope.insert = function (isvalid, user) { if (!isvalid) return; user.id = undefined; $scope.update(isvalid, user); } }]); </script> </body> </html>
ユーザーリスト
Kendo UIライブラリのグリッドコントロールの例に基づいて、ユーザーのリスト（リストフォーム）を作成します。 ほとんどすべてのプログラミングは、データ変更操作に正しいURLを指定し、グリッド列を記述することに削減されます。
<!DOCTYPE html> <html> <head> <base href="http://demos.telerik.com/kendo-ui/grid/remote-data-binding"> <style>html {font-size: 12px;font-family: Arial, Helvetica, sans-serif;} body {margin: 0;} </style> <title></title> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" /> <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script> </head> <body> <div id="example"> <div id="grid"></div> <script> $(document).ready(function () { $("#grid").kendoGrid({ dataSource: { type: "odata", transport: { read: "https://samples.databoom.space/api1/sandboxdb/collections/user", create: { url: "https://samples.databoom.space/api1/sandboxdb/collections/user" }, update: { url: "https://samples.databoom.space/api1/sandboxdb/collections/user" }, destroy: { url: function (data) { return "https://samples.databoom.space/api1/sandboxdb/collections/user(" + data.id + ")"; } } }, pageSize: 20, serverPaging: true, serverFiltering: true, serverSorting: true, schema: { model: { id: "id" } } }, filterable: true, editable: true, toolbar: ["create", "save", "cancel"], sortable: true, pageable: true, columns: ["firstname", "lastname", "email", "comment", { command: "destroy", title: " ", width: 150 }] }); }); </script> </div> </body> </html>
サーバー
この例で必要なすべてのリクエストを処理するために、コードを開発する必要はまったくありません。 すべてのデータベースクエリはOdata標準で完全にカバーされており、databoomが自動的に処理します。
おわりに
たとえば、 Angular.js 、 Bootstrap 、 Kendo UI 、 DevExtreme Web 、 Syncfusion HTML5コントロール 、 Infragistics HTML5コントロール 、 OpenUI5 、 Wijmo 、 JayData 、 Breeze.js 、 datajs 、 ODataJS 、 databoomなど。 それらはそれぞれ独自の問題を解決します。 特定のタスク用のライブラリセットの選択に成功すると、開発時間を大幅に短縮できます。
上記のライブラリを使用して既製のフォームテンプレートを使用すると、コピーと貼り付けを使用してコードを少し変更するだけで、その場で開発を行うことができます。