これをフォームに表示する最も良い方法は？

Question

私のウェブサイトには、ピボットテーブルを使ってリンクされた2つのテーブルがあります。私がしようとしているのは、ユーザーが2つのテーブル間の関係を更新する（ピボットテーブルからレコードを挿入したり削除したりする）ことです。私はPHPでこれをやっても問題はありませんが、私が心配しているのは、フォームがユーザのWebブラウザに表示される方法です。

私は今それをやっている方法は、列ヘッダーと（データベーステーブルを表す）行ヘッダとの間の関係に対応する各チェックボックスで、チェックボックスの完全なテーブルを持つことです。ユーザはチェックボックスをチェックして、その関係にレコードが存在することをPHPに伝えることができます（チェックされていないボックスは関係がないことを意味します）。しかし、かなりの数の列とかなりの数の行があり、使用するのが少し面倒であれば、このメソッドはかなり醜い（ページ境界の外に伸びる列）ことがあります。

このフォームをユーザーに表示するにはどうすればよいでしょうか？

Answer 1

これは何よりもアプリケーションのUIの詳細であるように、私はされずに困難である（それがどのような作品の組み合わせに降りてくるように、単一正しい答えがあるように起こっているとは思いません見たり遊んだりすることができます）とあなたの個人的な好み。

いくつか進行私はを通じて実行します：

• ビジュアルフィードバック
  をユーザーに視覚的なフィードバックを提供することによって、あなたのテーブルをよりインタラクティブに。最も基本的なレベルでは、セルに色を追加してみてください。これにより、ユーザーはどのオプションが「再生中」であるかを素早く確認することができます。これは逆の場合があります（チェックされていないセルを強調表示します）。しかし、これはフォームが何を指示しているかによって決まります - チェックされていない状態が悪いことを明確にすることが重要な場合、赤。

次のレベルアップは、いくつかのダイナミックハイライトを追加することです。テーブルが大きい場合は、カーソルの下のセルに対応する行と列のヘッダーセルを強調表示することができます。また、行/列全体（十字線スタイル）を強調表示して、ユーザーが「コンパニオン」セルを調べることもできます。

• ダイナミックテーブル
  少しより複雑なあなたのテーブルにいくつかのスパイスを追加することです。チェックボックスの行と列を表示する代わりに、グラフィカルアイコン/イメージを使用します。彼らは目にははるかに簡単で、おそらくテーブルの寸法をより細かく制御できるようになります。 UI全体は、Javascriptとオンクリックで行うことができます.JQueryのようなものを採用すれば、これはかなり簡単です。

• スプリットこれは表A &表Bの全ての組み合わせを用いて開始するピボットテーブルに設定されないという仮定に基づいている
  インターフェイス - ユーザがA.itemに関連しようとした場合にのみB.itemで
  すべての可能な組み合わせを表示する代わりに、アクティブなものだけを表示します（ピボットテーブルにエントリがある）。次に、レコードを第1のテーブルから第2のテーブルに関連付けることを可能にする第2のフォーム（おそらく2つのドロップダウン）をユーザに提供する。

• フィルタインターフェース
  インターフェイスをフィルタリングする能力をユーザに提供する - テーブルのいずれかから単一のレコードとの間の関係だけを表示します。これにより、テーブルを単一の列に限定する効果があり、設計に合わせるのが少し楽になります。

しかし、私はまだレコードの非常に便利に素早くクロスリファレンスたくさんのことができるようなビューなど、あなたが何をしているか、に応じて、ユーザーのように、すべてのレコードの「ビッグビュー」を取得できるようになります。

Answer 2

たぶん、データグリッドを使うのか？これらは非常に強力である：

• jQuery TableFilter（「移動」をクリック）
• ExtJS Grid Filter（列名の近くに表示される小さな下矢印▼をクリックしてください）

それはにかかる作業時間がかかるかもしれませんしかし、それはAjaxを介して動作します。