これは非常にカスタムのGUIなので、私はかなり自家製のソリューションを使用します。私はいくつかのステップに問題を分解し、ブラウザがほとんどの作業(ergo JavaScript)を担当するようにします。
まず、オブジェクトでデータを表現します。この問題に基づいて、私はあなたが3層のオブジェクト構造を持っていることをお勧めしたいと思います:1つはユーザを表します(例の各行)。このオブジェクト内の子配列は、毎日のデータを保持します。配列の各メンバーは、ユーザーが選択したセルを保持するオブジェクトになります。 JSPはこのデータ構造を書き出す責任がありますが、JavaScriptはそこからデータ構造を取ります。 JSP(または任意の中間層である)によって書かれたインスタンスは、次のようになります
function DayOfData(dateString, dataObject) {
this.date = Date.parse(dateString); //storing a Date is cleaner separation of presentation & data
this.dataCells = dataObject;
}
function User(name, email, role) {
this.name = name; //and so on
this.data = [];
this.addData = function(date, dataSet) {
this.data.push(new DayOfData(date, dataObject));
}
}
:ここではコンストラクタは次のようになります
var users = []; //a global to hold it all
users[someId] = new User("foo", "[email protected]", "boss");
users[someId].addData("1/1/1970", {"label 1": 23, "label 2": "test"});
//...and so on
お知らせデータを格納するJSONオブジェクトは、ユーザが表示することを選択したセル。この匿名オブジェクトでは、ビジュアルラベルを値と相関させています。これは、いくつかの一意のIDからラベルを抽象化するためのさらに別の子オブジェクトを作成するより簡単です。本当に必要な場合は余分なステップを踏むことができますが、それは階層のもう1つのレベルなので、より簡単なルートに進むのが最善だと思います。
(もちろん、これをすべて適切に名前空間にしたいのですが...裸のグローバル変数を使用して構文を単純化しています。本当に堅牢なシステムの場合は、プライベートメンバーも使用します)
私は表示段階で(JSPがこの構造のデータを書き出した後に)TrimPathを使用します。単にこのような何かを(TrimPathがそれを処理した後、これは表示コードでテーブルに置かなるだろう)になりますテンプレートに、ユーザーの配列を渡す:
<tbody>
{for user in user}
<tr>
<td>${user.name}</td> <!-- and so on -->
{for day in user.data}
{for datum in day}
<td>${datum}</td>
{/for}
{/for}
</tr>
{for}
</tbody>
あなたはこの上のわずかな変化を行う必要があると思いますパターンを使用してヘッダ行を書き込むことができますが、GUIの動的部分ではないため、おそらくサーバサイドのコードで簡単に行うことができます。テーブルの上端(THEAD要素内にあります)のラベルの行を「フリーズ」にするには、CSSを使用してTBODYの高さを設定し、次にoverflow-yを「scroll」に設定します。それはあなたが望む効果を達成すべきです。
列を並べ替えるには、実際にユーザーがクリックする列に基づいてユーザー配列(Array.sortの説明を参照)を並べ替えます。次に、TBODYをクリアして、TrimPathでテンプレートを再処理します。
これは複雑で複雑ですが、実際はそうではありません。レイアウトを変更することを避けたいので、データとプレゼンテーションを分離することが重要です。上で概説したように、TrimPath(または同様の)テンプレートと組み合わされたデータ専用のJavaScriptオブジェクトのコレクションは、優れたMVCパターンを実現し、離散的なステップに分解することによって問題を簡単にします。ソート可能なデータテーブルを管理する(主要な部門に水平にグループ化されたデータはもちろんですが)、それは良いMVCなしでは不可能に近いでしょう。
私はあなたの質問を理解するのに苦労します。たぶんあなたは問題を簡単な言葉で、少数の文で説明しようとするべきです... –