Web上の複数ページのリストで行を強調表示する

Webサイトでは、リストとテーブルが多くのページに分かれており、それらの間を移動できます。 そのようなリストの行でいくつかの操作を実行できる場合があります。 以下に例を示します。

• Webフォーラムのモデレート：大量転送、ブロック、トピックの削除。
• メールクライアント：選択した文字を（未）既読としてマークし、タグを追加して、スパムに転送します。
• 科学データ処理システム：サブセット内の関心のある行を選択し、注目に値する色でマークします。

これらのすべてのケースで、複数のページがある場合にユーザビリティの問題が発生します。 現在のページだけでなく、リストのすべての行を選択することは可能ですか？ そして、すべてなしで？ 反転選択を修正しますか？ 1ページに100行しかないのに、1245ページから最後までのすべての行を選択します。リストには5000行ありますか？



これらすべての問題を解決できる簡単なものを思いつきました。 1つの商用Webアプリケーションに実装され、それ自体が証明されています。 私はより便利な解決策を見たことがないので、一般に公開しています。



まず、いくつかの既存のソリューション。 GMailは次のとおりです（スパムフォルダーを例として使用）。



現在のページを選択すると、GMailがねじれ、「すべてのチェーンを選択」という碑文が表示されます。



ここで、1つのボックスのチェックを外すと、何が選択されますか、現在のページでは2735のメッセージまたは24のみですか？ もうわかりません。どこにも書かれていません。 実際、24が取得されます。つまり、1つを除くすべてを削除することは重要なタスクになります。 チェックを外して再度チェックすると、すべてをそのまま返したかのように見えましたが、実際には現在のページのみが強調表示され、すべての強調表示を提供しなくなりました。 選択を反転する機能はまったく提供されていません。



古いphpBBは異なる方法でねじれています。



現在のページでのみ選択できますが、「選択したものを除くすべてを削除する」アクションがあります。つまり、選択を反転し、1つを除くすべての行にアクションを適用するタスクが解決されます。 ただし、各アクションに追加のボタンが追加され、直感性が失われます。 多数のアクションがある場合、スイッチを「選択した行/選択した行を除くすべての行に対してアクションを実行する」ことができますが、放っておきたい行を選択するのはやや厄介でわかりにくいです。



私の解決策は次のようになります：



ページが最初ではない場合、追加のチェックマーク「前のページの+ Xエントリ」がリストの上に表示されます。 ページが最後ではない場合、リストの下に「後続ページの+ Yエントリ」というチェックマークが表示されます。 「ページを選択」（これらの2つのチェックマークなし）と「すべて選択」という個別のボタンがあります。 リストが1ページを占める場合、「ページの選択」ボタンは消えます。



次のプラスが表示されます。

• GMailとは異なり、他のページの行を含め、どの特定の行が強調表示されているかは常に明確です。
• チェックマークを削除して戻すと、選択範囲が以前の状態に戻ります。
• すべてを選択し、2、3行を選択解除し、このペアを除くすべての行にアクションを適用するのは簡単で直感的です。 また、特定のページのいくつかの行を除くすべての行にのみアクションを適用することも簡単です。 「選択したものを除くすべての行に対して実行」ボタンは不要です。
• 「反転」ボタンは、単にすべてのチェックボックスの状態を切り替え、同時にリスト全体の選択を実際に正しく反転します。
• この行の場所に関係なく、「リストの先頭から指定の行まで」または「これからリストの最後まで」行でアクションを実行できます。 このような範囲を強調表示することは、シフトを使用して簡単で直感的であり、新しいチェックマークの1つをキャプチャします。 もちろん、この範囲も正しく反転されます。
• ページ切り替えと一緒に新しいチェックマークは、このページが最初か最後かをさらに示します。 これは便利で、誤ったアクションの数を減らします。

いつものように、いくつかの短所がありました：

• 追加の実装の複雑さ。 通常のチェックマークが行の一意の識別子を参照できる場合、新しいものをインストールすると、サーバーに他のページのすべての行の識別子を送信するか、サーバーが次のページのエントリを復元できるようになります。 リストをさまざまな方法でソートおよびフィルタリングできる場合は、これも考慮する必要があります。
• リストが作業中に変更される可能性がある場合、問題が発生する可能性があります。 上の例では、新しい手紙が届いたので、「前のページで+25」をチェックし、「削除」をクリックしました。 新しいレターにもアクションを適用する必要がありますか？つまり、実際には+26ですか？ これは、リストのセマンティクスに依存する場合があります。 そうでない場合、サーバーは、ページがロードされたときと同じ形式でリストを復元できるはずです。 セッションで行の順序を保存しますか？ ユーザーが異なるセッションの異なるセッションで同じセッションのリストを開いた場合 一意の識別子を発行し、これらのリストをすべて保存しますか？ 一般的に、いくつかの困難があります。
• 「選択した文字を読む」などの機能をサポートすることは理解できません。 どうやら、これは現在のページ内で引き続き機能しますが、あまり便利ではありません。

作成されたリストが変更できなくなると、変更によって新しいコピーが作成されるため、アプリケーションでは簡単でした。 そのため、リストアクションが実行されると、現在の並べ替えとフィルタリングのパラメーターが転送され、サーバーは行の順序を正確に復元できました。 最後の問題もありませんでした。



誰かが重宝してくれたら嬉しいです。 誰かが似たようなまたはより良いものを見たなら、コメントに書いてください。