親チェックボックスを個別に、または子とともに選択するにはどうすればよいですか？
私のWebベースのレポートの場合、ユーザーは組織階層から1つ以上のアイテムを選択してレポートに表示できるはずです。すべてのサブノードを含む（詳細レポートの場合）ブランチ全体、または個別の上位レベルノード（要約レポートの場合）の両方を選択できる必要があります。場合によっては、ユーザーが選択した子ノードの一部を選択解除して、選択を微調整することもあります。
ユーザーは自分の組織階層に慣れているので、それをツリーとして表示することは合理的であるように思われます-ソフトウェアの他の多くの場所ではツリーとしても表示されます。階層の深さは制限されておらず、ブランチごとに異なる場合があります。階層は大きくなる可能性があるため、すべての子ノードを1つずつ選択または選択解除するのは、かなり大変な作業です。
単一のノードとブランチ全体の両方を妥当な量のクリックで選択でき、さらにリモートで理解しやすいUIを作成するのに苦労しています。これまでに思いついた最善の方法は、次のように機能するチェックボックスツリーです。
- ノードを最初にクリックすると、そのノードのみが選択され、不確定とマークされます。すべてのサブノードはチェックされないままになります-または現在の状態が何であれ。レポートには、そのレベルのデータのみが表示されます。
- 同じノードをもう一度クリックすると、すべての子ノードも選択され、ノードがチェックされたように見えます。レポートには、要約データと詳細なサブユニットのデータの両方が表示されます。
- 3回目のクリックで、ノードとそのすべての子の両方が選択解除されます（または、親をチェックする前に設定された子の選択を保持する必要がありますか？）
...そしてこれを再びサイクリングします。下の図では、ユニット1aがすべての子ユニットとともに選択され、1b子ユニットなし（概要のみ）および2aいくつかの子が選択されています。
おそらく、ここでの最大の問題は、不確定状態がいくつかのことを示すために使用されていることです。
- 「私の子供たちの一部が選択されています」（2a、そして実際には1と2）
- 「私は選択されていますが、私の子供は選択されていません」（1b）
- 組み合わせ：「私は選択されており、一部の子供も選択されています」（写真には含まれていません）
選択したユニットの親を残す場合、（1、2および2a）チェックマークがまったくない場合、通常の規則に従っていないため、ユーザーは折りたたまれたツリーから現在の選択を見つけることができません。 1bを通常のチェックマークで表示すると、1aと1b折りたたまれている場合は表示されません。実際にどのノードがチェックされるかが明確になるので、後者の方がより良いオプションだと思います。おそらく、親がクリックされたときにブランチを展開して、ユーザーが子ノードが選択されているかどうかを確認する必要があります。選択したユニットの背景色を設定することで、選択を強調することもできます。
これを機能させる方法や、まったく異なる種類のUIのアイデアについての提案はありがたいです。
同じ問題を持つ2つの質問を見つけましたが、実際の答えはありませんでした。
ホバーボタンオプションを試して、各ノードレベルですべての子を選択/選択解除してください。
複数レベルのツリーがある場合は、「クイック選択」（ここには+子ラベルがありますが、他のテキストの方がうまくいく場合があります）オプションを使用して、ユーザーがレベルごとに移動できるようにすることができます。
「+子」ボタンを選択した場合のみ、子ノードが選択されます。そうすれば、必要に応じて親を個別に選択できます。
ここに簡単なプロトタイプがあります：
このようにして、さまざまなレベルをジャンプできるため、ツリーやネストに合わせてスケーリングされます。
既知のコントロールとの複雑な、または非標準の相互作用による2回目および3回目のクリックがあると、ユーザーを混乱させる可能性があります。
代わりに、上記の相互作用を使用して、おそらくすべての子が選択されている場合、「+子」が「-子」に変更されます（または、現時点では考えられないより良いラベル）。
個々の選択とグループ選択の間に違いを作成する必要があります
マイクの提案が気に入っています。以下の2つのオプションのいずれかで同様の提案があります。
オプション1：「すべての子を選択」および「すべての子を選択解除」のオプションを表示します（子が選択されている場合のみ）。以下は、同じサンプルプロトタイプです。
。
これにより、常にすべてを選択するオプションがユーザーに表示されるため、UIの仕組みを非常に簡単に理解できます。
オプション2：以下のプロトタイプに従って、各子グループを新しい列に表示します
これにより、多くの子グループの場合に長い縦スクロールが節約されます。このデザインの欠点は、ユーザーがすべての子を一度に見ることができないことです。ユーザーは、親をクリックして、その中の子グループを表示する必要があります。
angular 5.を使用している場合。次のnpmモジュールを使用できます。高度に構成可能で使いやすいです https://www.npmjs.com/package/dynamic -custom-checkbox