web-dev-qa-db-ja.com

テーブルの行に1つ以上のアイテムを追加するにはどうすればよいですか?

環境

私は非常に複雑なエンタープライズソリューションに取り組んでいます。それらをコントラクトと呼んでいるリストを示すこのテーブルがあります。すべての契約(行)には、1つ以上の顧客(および1つ以上の製品)を含めることができます。

問題

これらのユースケースについて考える必要があります。1.顧客IDをコピーして貼り付けたい。
2。人々はすべての顧客を一度に削除できるはずです。
3。人々はまだ顧客が選択されたものの概要を持っている必要があります。
4。人々は顧客を閲覧し、好きなものを選ぶことができるべきです。
(ソリューションをコンパクトにできる必要があるため、)

私の提案

My solution
-「CD-0005」をクリックすると、参照ウィンドウがトリガーされます
-欠落コピーおよび貼り付け機能

enter image description here
-超醜く見えます
-すべてのアイテムの概要を提供するのが難しい(入力ホバーに関するツールチップがあるのはどういうわけか奇妙です)

どう思いますか?この問題はどのように解決できますか?

5
Marek Dlugos
  1. ホバー時に各顧客IDの前にコピーリンクを追加できます。

enter image description here

  1. テーブルヘッダーにフィルターを追加する
  2. 選択した行を強調表示するか、選択したときにお客様IDをバッジにします
  3. お客様IDバッジを作成すると、必要なIDを識別し、状態を切り替えるのが容易になります。

「クリアムーブ」がテーブルを処理する方法が気に入りました。インスピレーションとして使用できます。 enter image description here

1
Usman Mani

Usman Maniはすでにエレガントな解決策を提案しましたが、これを見た人は誰でも…私は同様の質問をしていて、再利用性のためにテーブルを構築することについての非常に有用な記事を見つけました。

https://uxdesign.cc/designing-tables-for-reusability-490a37605

TLDR:すべての情報を続けて表示せず、使いやすさのテストを行い、ユーザーが必要とする2〜3個の最も重要なデータポイントを表の行で見つけて、残りを非表示にしても問題ありません。 font awesomeを使用すると、ユーザーが必要とする場合はより多くのデータがあることがわかります。

0
ksudu94

フォームがあまり長く実行されない限り、各契約行に編集アイコンを提供し、すべてをモーダルオーバーレイで開くのが、より簡単でわかりやすい方法です。

0
Ren

「コピー」と「すべてコピー」の項目を含むコンテキストメニュー(マウスの右クリックで呼び出される)を追加しないのはなぜですか。

ホバー(各IDの上にマウスを置く)をコピーしようとしているお客様IDを知ることは役立ちます。

マウスアウトイベントでバルーンが閉じます。

バルーンにコンテキストメニューを追加するのはプログラム上難しい場合がありますが、一度それを乗り越えると、使いやすさがあなたの努力を補います。

0
Mike