私の Web ページには、ドロップダウンとテーブルが含まれています。ユーザーがドロップダウンで選択を行うと、テーブルにデータが動的に入力されます。このテーブルにデータを入力する最良の方法は何だろうと思っています。サーバー側のテクノロジーに Spring MVC と JSP を使用しています。ユーザーがドロップダウン選択を行った後、最初にすべてを取得するのではなく、データを取得するために別の要求を行う可能性が高くなります。私が持っている1つのアイデアは次のとおりです。
これは良い解決策ですか？それとももっと良い方法があるのでしょうか？
プロジェクトでサードパーティのJQueryプラグインが許可されている場合は、DataTablesを確認することをお勧めします。箱から出して、それはあなたが必要とするすべてをするべきです。私はここ数年、さまざまなプロジェクトでDTを使用してきましたが、DTは強力で安定したプラグインであることがわかりました。
より良い方法は、handlebars.js や mustache.js テンプレート (またはその他のフロントエンド テンプレート エンジン) などを使用することです。どちらも JSON オブジェクトを取得し、それを HTML に追加できるテンプレートに挿入するためです。これは、AJAX 経由でデータを取得している場合に非常にうまく機能し、AJAX がとにかく JSON を返す場合にはさらに効果的です。
データが非常に大量または急速に変化する「ライブ」情報でない限り、<tbody id="xxx">...</tbody>テーブル内の一連の要素 (ドロップダウン オプションごとに 1 つ) でページと共に提供します。ドロップダウン メニューに「onchange」ハンドラを追加します。これは、現在選択されているオプションに対応する tbody を表示し、その他すべてを非表示にします。
必要に応じて、AJAX で同様のアプローチを採用してデータを取得できます。オプションごとに 1 つの空の<tbody id="xxx">...</tbody>要素を含むページを提供します。次に、ドロップダウンの onchange ハンドラーから「オンデマンド」で tbody を設定し、上記のように表示/非表示を切り替えます。必要に応じて、inchange ハンドラーにテストを含めて、各データ セットが 1 回だけフェッチされるようにすることができます。データが既に受信されている場合は、その tbody にキャッシュされます。最終的に、すべての tbody が読み込まれると、このソリューションは上記のソリューションと同じになります。