Angular Tree Grid 列選択

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

最速で機能豊富な Angular Data Grid は、ページング、ソート、フィルタリング、グループ化、PDF および Excel へのエクスポートなどの機能を提供します。究極のアプリ構築エクスペリエンスとデータ操作に必要なすべてが揃っています。

無料で試してみる

Angular 列選択の例

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

*Units、Unit Price および Delivered 列の選択が無効になっています。

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { TreeGridColumnSelectionComponent } from "./tree-grid/column-selection/tree-grid-column-selection.component";
import { IgxTreeGridModule } from "igniteui-angular";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	TreeGridColumnSelectionComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxTreeGridModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
import { GridSelectionMode, IgxTreeGridComponent } from 'igniteui-angular';
import { FOODS_DATA } from '../data/foods';

@Component({
    selector: 'app-tree-grid-column-selection',
    templateUrl: './tree-grid-column-selection.component.html',
    styleUrls: ['./tree-grid-column-selection.component.scss']
})
export class TreeGridColumnSelectionComponent implements OnInit, AfterViewInit {
    @ViewChild(IgxTreeGridComponent)
    public tGrid: IgxTreeGridComponent;
    public data;
    public currentColumnSelection: GridSelectionMode = 'single';
    public columnConfig = [
        { field: 'ID', selectable: true },
        { field: 'Name', selectable: true },
        { field: 'UnitPrice', selectable: false },
        { field: 'AddedDate', selectable: true, formatter: this.formatDate },
        { field: 'Discontinued', selectable: false }
    ];

    constructor(private cdr: ChangeDetectorRef){}

    public ngOnInit(): void {
        this.data = FOODS_DATA();
    }

    public ngAfterViewInit(): void {
        this.tGrid.getColumnByName('ID').selected = true;
        this.cdr.detectChanges();
    }

    public formatDate(val: Date) {
        return new Intl.DateTimeFormat('en-US').format(val);
    }

}
tsコピー

<div class="grid-wrapper">
    <igx-tree-grid  [igxPreventDocumentScroll]="true"
                    [data]="data"
                    primaryKey="ID"
                    foreignKey = "ParentID"
                    height="530px"
                    width="100%"
                    [columnSelection]="currentColumnSelection">
        <igx-grid-toolbar>

            <igx-select [(ngModel)]="currentColumnSelection">
                <label igxLabel>Column Selection</label>
                <igx-select-item value="none">None</igx-select-item>
                <igx-select-item value="single">Single</igx-select-item>
                <igx-select-item value="multiple">Mulitple</igx-select-item>
            </igx-select>

        </igx-grid-toolbar>

        <igx-column *ngFor="let c of columnConfig"
                    [field] = "c.field"
                    [header] = "c.field"
                    [selectable] = "c.selectable"
                    [formatter] = "c?.formatter">
        </igx-column>

    </igx-tree-grid>
</div>
htmlコピー

.grid-wrapper{
    padding: 16px;
}scssコピー

Edit in: CodesandboxStackBlitz

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

基本的な使用方法

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

インタラクション

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

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

*Personal Details 列グループでは、ID 列および Title 列のみを選択できます。

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { TreeGridColumnGroupSelectionComponent } from "./tree-grid/column-group-selection/column-group-selection.component";
import { IgxTreeGridModule } from "igniteui-angular";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	TreeGridColumnGroupSelectionComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxTreeGridModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, OnInit, ViewChild } from '@angular/core';
import { IgxTreeGridComponent } from 'igniteui-angular';
import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed';

@Component({
  selector: 'app-column-group-selection',
  templateUrl: './column-group-selection.component.html',
  styleUrls: ['./column-group-selection.component.scss']
})
export class TreeGridColumnGroupSelectionComponent implements OnInit {

   @ViewChild(IgxTreeGridComponent, { read: IgxTreeGridComponent, static: true })
   public treeGrid: IgxTreeGridComponent;
   public data;

   public ngOnInit(): void {
    this.data = generateEmployeeDetailedFlatData();
    this.treeGrid.selectColumns(['ID', 'Title', 'City']);

  }
}
tsコピー

<div class="grid-wrapper">
    <igx-tree-grid [igxPreventDocumentScroll]="true"
        #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" height="530px" width="100%" columnSelection='multiple'>
        <igx-column field="Name" dataType="string"></igx-column>
        <igx-column-group header="General Information">
            <igx-column field="HireDate" dataType="date"></igx-column>
            <igx-column-group header="Personal Details">
                <igx-column field="ID" dataType="number"></igx-column>
                <igx-column field="Title" dataType="string"></igx-column>
                <igx-column field="Age" dataType="number" [selectable]="false"></igx-column>
            </igx-column-group>
        </igx-column-group>
        <igx-column-group header="Address Information">
            <igx-column-group header="Location">
                <igx-column field="Country" dataType="string" [selectable]="false"></igx-column>
                <igx-column field="City" dataType="string"></igx-column>
                <igx-column field="Address" dataType="string"></igx-column>
            </igx-column-group>
            <igx-column-group header="Contact Information">
                <igx-column field="Phone" dataType="string" [selectable]="false"></igx-column>
                <igx-column field="Fax" dataType="string" [selectable]="false"></igx-column>
                <igx-column field="PostalCode" dataType="string"></igx-column>
            </igx-column-group>
        </igx-column-group>
    </igx-tree-grid>
</div>
htmlコピー

.grid-wrapper {
    padding: 16px;
}scssコピー

Edit in: CodesandboxStackBlitz

キーボードの組み合わせ

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

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

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

API 操作

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

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

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

スタイル設定

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

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss

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

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

$custom-grid-theme: 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,
  $expand-icon-color: #ecaa53,
  $expand-icon-hover-color: #b64b80
);
scss

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 css-vars($custom-grid-theme)
scss

デモ

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { TreeGridColumnSelectionStylesComponent } from "./tree-grid/column-selection-styles/tree-grid-column-selection-style.component";
import { IgxTreeGridModule } from "igniteui-angular";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	TreeGridColumnSelectionStylesComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxTreeGridModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
import { IgxTreeGridComponent } from 'igniteui-angular';
import { FOODS_DATA } from '../data/foods';

@Component({
    selector: 'app-tree-grid-column-selection-style',
    templateUrl: './tree-grid-column-selection-style.component.html',
    styleUrls: ['./tree-grid-column-selection-style.component.scss']
})
export class TreeGridColumnSelectionStylesComponent implements OnInit, AfterViewInit {
    @ViewChild(IgxTreeGridComponent)
    public tGrid: IgxTreeGridComponent;
    public data;

    public columnConfig = [
        { field: 'ID', selectable: true },
        { field: 'Name', selectable: true },
        { field: 'UnitPrice', selectable: true },
        { field: 'AddedDate', selectable: false, formatter: this.formatDate },
        { field: 'Discontinued', selectable: true }
    ];

    constructor(private cd: ChangeDetectorRef) {
    }

    public ngOnInit(): void {
        this.data = FOODS_DATA();
    }

    public ngAfterViewInit() {
        this.tGrid.selectColumns(['ID', 'UnitPrice']);
        this.cd.detectChanges();
    }

    public formatDate(val: Date) {
        return new Intl.DateTimeFormat('en-US').format(val);
    }

}
tsコピー

<div class="grid-wrapper">
    <igx-tree-grid  [igxPreventDocumentScroll]="true"
                    [data]="data"
                    primaryKey="ID"
                    foreignKey = "ParentID"
                    height="530px"
                    width="100%"
                    columnSelection="multiple">
        <igx-column *ngFor="let c of columnConfig"
                    [field] = "c.field"
                    [header] = "c.field"
                    [selectable] = "c.selectable"
                    [formatter] = "c?.formatter">
        </igx-column>
    </igx-tree-grid>
</div>
htmlコピー

@use '../../../variables' as *;

.grid-wrapper {
    padding: 16px;
}

$custom-grid-theme: 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,
    $expand-icon-color: #ecaa53,
    $expand-icon-hover-color: rgb(182, 128, 57),
);

:host {
    @include css-vars($custom-grid-theme);
}

scssコピー

Edit in: CodesandboxStackBlitz

このサンプルは、Change Theme (テーマの変更) から選択したグローバル テーマに影響を受けません。

API リファレンス

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

• IgxTreeGridComponent
• IgxColumnComponent
• IgxColumnGroupComponent
• IgxTreeGridComponent スタイル

IgxTreeGridComponent プロパティ:

• columnSelection
• selectedColumns
• selectColumns
• deselectColumns
• selectAllColumns
• deselectAllColumns

IgxColumnComponent プロパティ:

• selectable
• selected

IgxColumnGrpupComponent プロパティ:

• selectable
• selected

IgxTreeGridComponent イベント:

• onColumnsSelectionChange

その他のリソース

• Tree Grid 概要
• 選択
• セル選択
• ページング
• フィルタリング
• ソート
• 集計
• 列移動
• 列のピン固定
• 列のサイズ変更
• 仮想化とパフォーマンス

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)