いろいろな実装

JavaScriptとTable要素を利用した、Webアプリケーションのサンプルです。

テーブルにフォーカスがある状態の時は、選択されているセルが、選択状態の色となります。

テーブルにフォーカスがある状態でEnterキーを押下すると、選択中のセルが編集可能となります。編集後再度Enterキーを押下すると、選択状態になります。編集可能状態でEscキーを押下すると、編集内容を破棄して、選択状態に戻ります。

テーブル間のフォーカス移動は、マウスでテーブルをクリックするか、Tabキーにより行います。

スタンダードな実装

スタンダードな実装です。機能的には、簡単な計算処理と、編集不可のセルが選択できないように、スキップする処理が実装されています。

単価か個数を変更すると、合計と一番下の総合計が自動的に計算されます。また、日付と金額については、編集時と表示時でフォーマットを変更しています。

テーブルの内容に関しては、特に意味はないので、つっこみは無しにしてください。「あっ、商品名がないや。」と、作ってから思いましたから(^^;

１つのモデルで、２つのビュー

少しだけ、上級編です。１つのモデル（データ）を、複数のビューで共有して表示するパターンです。行数はそれほどではないがやたらに横に長い表を、いくつかに分けて表示したりできます。

やっていることは大したことではありません。モデルにモデルと同じインターフェイスのフィルターをかぶせて、そのフィルターの中でgetValue()等の列数を変更しているだけです。

２つのビューで、１つのモデルを共有しているので、上の表の商品名を変更すると、下の表の商品名も同時に変更されます。

また、フォーカスがある状態で、上下の矢印キーで選択行を変更すると、両方のテーブルで同じように選択行が変更されます。

上下のテーブルのフォーカスは、マウスでテーブルをクリックするか、Tab/Shift+Tabキーで移動することができます。

一覧と詳細のパターン

これは、「１つのモデルで、２つのビュー」のバリエーションです。

実際のアプリケーションでは、このパターンの方が使用頻度は多いかもしれません。

上のテーブルにフォーカスがある状態で、上下の矢印キーにより選択する行を変更すると、下のテーブルの表示内容が変化します。

下のテーブルにフォーカスがある状態では、矢印キーにより入力可能な項目を選択することができます。

上下のテーブルのフォーカスは、マウスでテーブルをクリックするか、Tab/Shift+Tabキーで移動することができます。