形式でデータの一括取得が出来ていることを確認できます。よる削除の処理も行うことが可能で、データベースとの連携も対応してくれます。実装に移っていきます。連携バックエンドの受け入れ態勢は整いましたので、フロントエンドの組み込みを行なっていきます。用のアプリを新たに追加します。新規作成し、編集していきます。収める形で記述していきます。読み込む形としました。...また、今回の実装方法として、グリッドの各行への変更内容を一旦保持して、保存ボタンのクリックによって全ての変更をまとめてデータベースにコミットするような形としております。本記事では一括でのコミットに関しての説明は省略いたします。以下のドキュメントに詳細が書かれておりますので参考にしていただければ幸いです。用いてグリッドにデータバインディングを行います。ように解釈してくれます。ルーティングの調整をして、こちらの状態で一度テストしてみます。グリッドにデータの一覧を表示することが出来ました。処理が成功したことを意味しています。処理はどうでしょうか。新規行の追加処理のテストをしてみます。処理はエラーとなります。側でセキュリティの保護処理が行われたためのエラーです。利用する場合にはトークンを生成して付与する必要があります。トークンを指定する組み込みのオプションはないため、別の方法での実装が必要です。通信が発生する前の処理を設定することが可能です。対してトークンを指定します。対策用のトークンが簡単に取得できるテンプレートタグがはじめから用意されているため、以下の記述をスクリプトに追加します。}});もう一度テストしてみましょう。データベースでも新しいデータの存在が確認できます。データの総額を変更します。処理にエラーが発生していることが確認できます。スラッシュで終わっていない形の場合、エラーを返します。ような形になるため、このエラーが発生します。しても指定しておきます。最後に、保存ボタンを押した時の処理として以下の2行を加えます。一致するとは限りません。グリッドで反映するという処理を行っています。今回作成したデモの最終的な振る舞いは以下のようになります。よってスムーズに一括で行えるようになりました。利用することによってバックエンドとフロントエンドの役割分担が出来ている点が特徴かと思います。今回作成したデモアプリケーションは以下にアップロードしておりますのでご興味のある方は触ってみていただければと思います。-こんにちは!ソリューションコンサルタントの滝元です。Webア...2023-11-21よくあるけど開発が大変な「多段明細」UIをReactで実装するこんにちは!ソリューションコンサルタントの滝元です。使ってみようこんにちは、テクニカルコンサルティングチームの三田です。»Aboutインフラジスティックス・ジャパンのチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。Reserved引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。