2009-04-21 3 views
1

最終的に、単純な要件の実装が圧倒的になっているWebアプリケーションのポイントに到達しました。いいリファクタリングや簡単なゴミとやり直しの時間だと思っています。ここでWeb UI gurusの場合

は、私はテーブルの上に実装する必要が簡単な要件は次のとおりです。

1) 2列はソート可能にする)

今、それが持って、なぜ私が説明させて2ヘッダー行と最初の3列をフリーズとても複雑です。表は単純な2次元表ではありません。最初の3つの列は、名前、電子メール、および役割の1つで、1日あたり3種類のデータを表す列が未定義です。言い換えれば、ユーザーはデータの希望日数を定義し、毎日データ1、データ2、データ3と呼ばれる3つの列で表されます。

未熟なASCII表現はそのようになります:

      01/01/1970     01/02/1970     total 
name email role data1 data2 data3 data1 data2 data3 data1 data2 data3 

toto [email protected] boss  23  test  54  10  test1 54 

これは非常に悪い表現ですが、それはあなたの出力がどのように見えるかの漠然としたアイデアを与える必要があります。だから私は最初の行に日付を表​​示する必要がありますが、3列のオフセットは、最初の3つのヘッダーが固定されているヘッダーですが、次の列は同じ3ヘッダーの繰り返しです。適切な場所にあるデータ....

今私は正確に(並べ替えとフリーズはありません)JSPと、私は別のすべての要素を表示する方法。

あなたはおそらく私の頭痛を理解し始めます...カスタムメイドの多くのものがありますが、これらの新しい機能を追加するにはどのように適切な/効率的な方法で行う必要はありませんか?並べ替えとフリーズ?

私はいくつかのjqueryデータグリッドとその他のjavascriptコンポーネントを見ましたが、どれも第1行に基づく2行目のグループ化で2行のヘッダーを許可するほど柔軟ではありませんでした。

ありがとうございました。

+0

私はあなたの質問を理解するのに苦労します。たぶんあなたは問題を簡単な言葉で、少数の文で説明しようとするべきです... –

答えて

2

これは非常にカスタムの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なしでは不可能に近いでしょう。