Angular Grid 列選択

列選択機能は、シングルク リックで列全体を選択する簡単な方法を提供します。特定の列の重要性を強調するために、ヘッダー セルとその下のすべてにフォーカスします。この機能は豊富な API を備えて選択状態の操作、選択した部分からのデータ抽出、データ分析操作、可視化が可能になります。

Angular 列選択の例

以下のサンプルは、Grid の列選択動作の 3 つのタイプを示します。使用可能な各選択モードを有効にするには、以下の [列選択] ドロップダウンを使用します。

*Contact TitleCity、および Address 列の選択が無効になっています。

このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

基本的な使用方法

列選択機能は、GridSelectionMode 値を受け取る columnSelection 入力によって有効にすることができます。

インタラクション

デフォルトの選択モードは none です。single または multiple に設定されると、すべての列は selectable になります。列を選択するには、列をクリックして selected としてマークします。列が選択不可な場合、ホバー時に選択スタイルはヘッダーに適用されません。

Note

複数列ヘッダーselectable 入力に反映されません。その子の 1 つ以上で選択動作が有効な場合、IgxColumnGroupComponentselectable です。さらに、すべての selectable 子孫が selected である場合、コンポーネントは selected としてマークされます。

*Country Information 列グループでは、City 列および Postal code 列のみを選択できます。


キーボードの組み合わせ

Note

キーボードの組み合わせは、グリッドの columnSelection 入力が multiple に設定されている場合にのみ使用できます。

列の選択機能のキーボード ナビゲーションには 2 つのオプションがあります。

  • 複数列選択 - Ctrl キーを押しながら、すべての選択可能なヘッダー セルをクリック
  • 範囲列の選択 - Shift キーを押しながら + クリック、間にあるすべての選択可能な列を選択します。

API 操作

API は、非表示列に関していくつかの追加機能を提供し、対応する setter を設定することにより、すべての非表示列を selected としてマークできます。

Note

上記は IgxColumnGroupComponent にも適用されますが、selected プロパティを変更する場合、その子孫の状態を変更します。

API 操作の詳細については、API リファレンス セクションを参照してください。

スタイル設定

スタイル設定オプションに移動する前に、core ジュールとすべてのコンポーネント mixins をインポートする必要があります。

@import '~igniteui-angular/lib/core/styles/themes/index';
Note

行選択列選択は個別に操作できないことに注意してください。同じ変数に依存します。

選択ホバーのスタイル設定を変更します。
最も簡単な方法は、カスタム テーマを定義する方法です。

$custom-grid-theme: igx-grid-theme(
    $row-selected-background: #011627,
    $row-selected-text-color: #ECAA53,
    $row-selected-hover-background: #011627,
    $header-selected-text-color: #ECAA53,
    $header-selected-background: #011627
);

igx-grid-theme はいくつかのパラメーターを受け入れますが、選択したすべての列の外観を変更するのは以下の 5 つです。

  • $row-selected-background- 選択した部分の背景を設定します。
  • $row-selected-text-color - 選択した部分のテキスト色を設定します。
  • $row-selected-hover-background - ホバーされたセルまたは複数のセルの色を設定します。
  • $header-selected-text-color - 選択した列ヘッダーのテキスト色を設定します。
  • $header-selected-background - 選択した列ヘッダーの背景色を設定します。

CSS 変数の使用

最後にカスタム igx-grid テーマを含めます。

@include igx-css-vars($custom-grid-theme)

基本テーマのオーバーライド

Internet Explorer 11 のコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチが必要です。

Note

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、::ng-deep の前に :host セレクターを含めるようにしてください。

:host {
    ::ng-deep {
        @include igx-grid($custom-column-selection-theme);
    }
}

デモ


API リファレンス

以下は、列選択 UI のその他の API です。

IgxGridComponent プロパティ:

IgxColumnComponent プロパティ:

IgxColumnGrpupComponent プロパティ:

IgxGridComponent イベント:

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。