Angular Tree Grid 高度なフィルタリング
高度なフィルタリングは、Tree Grid のような任意の Angular テーブルの全列に及ぶフィルタリング条件を持つグループを作成できるダイアログを提供します。
Angular Tree Grid 高度なフィルタリングの例
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 { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";
import { IgxTreeGridModule } from "igniteui-angular";
import { TreeGridAdvancedFilteringSampleComponent } from "./tree-grid/tree-grid-advanced-filtering-sample/tree-grid-advanced-filtering-sample.component";
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
TreeGridAdvancedFilteringSampleComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxPreventDocumentScrollModule,
IgxTreeGridModule
],
providers: [],
entryComponents: [],
schemas: []
})
export class AppModule {}
ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { IgxTreeGridComponent} from 'igniteui-angular';
import { generateEmployeeFlatData } from '../data/employees-flat';
@Component({
selector: 'app-tree-grid-advanced-filtering-sample',
styleUrls: ['./tree-grid-advanced-filtering-sample.component.scss'],
templateUrl: './tree-grid-advanced-filtering-sample.component.html'
})
export class TreeGridAdvancedFilteringSampleComponent implements OnInit {
@ViewChild('treeGrid1', { static: true }) public treeGrid: IgxTreeGridComponent;
public data: any[];
public ngOnInit(): void {
this.data = generateEmployeeFlatData();
}
}
ts
<div class="grid__wrapper">
<igx-tree-grid [igxPreventDocumentScroll]="true" #treeGrid1 [data]="data" [autoGenerate]="false" primaryKey="ID" foreignKey="ParentID" [allowAdvancedFiltering]="true" height="480px" width="100%" >
<igx-grid-toolbar></igx-grid-toolbar>
<igx-column [field]="'Name'" dataType="string" [sortable]="true"></igx-column>
<igx-column [field]="'Title'" dataType="string" [sortable]="true"></igx-column>
<igx-column [field]="'Age'" dataType="number" [sortable]="true"></igx-column>
<igx-column [field]="'HireDate'" dataType="date" [sortable]="true"></igx-column>
<igx-column [field]="'OnPTO'" dataType="boolean" [sortable]="true"></igx-column>
</igx-tree-grid>
</div>
html
.grid__wrapper {
margin: 15px;
}
scss
このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
インタラクション
高度なフィルタリング ダイアログを開くには、グリッドツールバーの高度なフィルタリングボタンをクリックする必要があります。ダイアログはフィルタリング ロジックを生成、表示、編集するために IgxQueryBuilder
コンポーネントを使用しています。インタラクション プロセスの詳細については、Query Builder トピック
を参照してください。
フィルタリング条件とグループを作成する準備後にデータをフィルタリングするには、[適用] ボタンをクリックします。拡張フィルターを変更後、変更を保存したくない場合は、[キャンセル] ボタンをクリックします。[フィルターのクリア] ボタンをクリックして、高度なフィルターをクリアすることもできます。
使用方法
高度なフィルタリングを有効にするには allowAdvancedFiltering
入力プロパティを true に設定します。
<igx-tree-grid [data]="data" [autoGenerate]="true" [allowAdvancedFiltering]="true">
<igx-grid-toolbar></igx-grid-toolbar>
</igx-tree-grid>
html
高度なフィルタリングは、advancedFilteringExpressionsTree
入力プロパティに保存される FilteringExpressionsTree
を生成します。このプロパティを使用して、高度なフィルタリングの初期状態を設定できます。
ngAfterViewInit(): void {
const tree = new FilteringExpressionsTree(FilteringLogic.And);
tree.filteringOperands.push({
fieldName: 'ID',
condition: IgxStringFilteringOperand.instance().condition('contains'),
searchVal: 'a',
ignoreCase: true
});
const subTree = new FilteringExpressionsTree(FilteringLogic.Or);
subTree.filteringOperands.push({
fieldName: 'ContactTitle',
condition: IgxStringFilteringOperand.instance().condition('doesNotContain'),
searchVal: 'b',
ignoreCase: true
});
subTree.filteringOperands.push({
fieldName: 'CompanyName',
condition: IgxStringFilteringOperand.instance().condition('startsWith'),
searchVal: 'c',
ignoreCase: true
});
tree.filteringOperands.push(subTree);
this.treeGrid.advancedFilteringExpressionsTree = tree;
}
typescript
Tree Grid ツールバーを表示したくない場合は、openAdvancedFilteringDialog
および closeAdvancedFilteringDialog
メソッドを使用して、高度なフィルタリング ダイアログをコーディングを使用して開いたり閉じたりできます。
Tree Grid で quickFilter
/excelStyleFilter
と高度なフィルタリング ユーザー インターフェイスの両方を有効にできます。両フィルタリング ユーザー インターフェイスは、互いに依存せずに機能します。Tree Grid の最終的なフィルター結果は、2 つのフィルターの結果の共通部分です。
外部の高度なフィルタリング
上記デモで示されるように、高度なフィルタリング ダイアログは、Tree Grid の上にあるオーバーレイでホストされます。ダイアログのセットアップの準備ができたときに、適用または閉じる操作によってダイアログが非表示になります。ダイアログはスタンドアロン コンポーネントとして使用した場合、常に表示になります。以下のデモでは、高度なフィルタリングダイアログが Tree Grid とは別に宣言されます。
デモ
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 { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";
import { IgxTreeGridModule } from "igniteui-angular";
import { TreeGridExternalAdvancedFilteringComponent } from "./tree-grid-external-advanced-filtering/tree-grid-external-advanced-filtering.component";
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
TreeGridExternalAdvancedFilteringComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxPreventDocumentScrollModule,
IgxTreeGridModule
],
providers: [],
entryComponents: [],
schemas: []
})
export class AppModule {}
ts
import { Component, OnInit } from '@angular/core';
import { FOODS_DATA } from '../data/foods';
@Component({
selector: 'app-tree-grid-external-advanced-filtering',
templateUrl: './tree-grid-external-advanced-filtering.component.html',
styleUrls: ['./tree-grid-external-advanced-filtering.component.scss']
})
export class TreeGridExternalAdvancedFilteringComponent {
public data: any[];
constructor() {
this.data = FOODS_DATA();
}
}
ts
<div class="grid__wrapper">
<igx-advanced-filtering-dialog [grid]="treegrid1" class="advanced-dialog">
</igx-advanced-filtering-dialog>
<igx-tree-grid [igxPreventDocumentScroll]="true" #treegrid1 [data]="data" [moving]="true" [autoGenerate]="false" height="400px" [allowFiltering]="true"
primaryKey="ID" foreignKey="ParentID">
<igx-column field="ID" header="Product ID" [dataType]="'string'" [sortable]="true">
</igx-column>
<igx-column field="Name" header="Product Name" [dataType]="'string'" [sortable]="true">
</igx-column>
<igx-column field="UnitPrice" header="Unit Price" dataType="number" [sortable]="true">
<ng-template igxCell let-cell="cell" let-val>
<span *ngIf="cell.row.data.UnitPrice === 0">-</span>
<span *ngIf="cell.row.data.UnitPrice !== 0">${{val}}</span>
</ng-template>
</igx-column>
<igx-column field="AddedDate" header="Added Date" [dataType]="'date'" [sortable]="true"
>
</igx-column>
<igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [sortable]="true"
>
<ng-template igxCell let-cell="cell" let-val>
<span *ngIf="cell.row.data.UnitPrice === 0">-</span>
<img *ngIf="cell.row.data.UnitPrice !== 0 && val" src="https://www.infragistics.com/angular-demos-lob/assets/images/grid/active.png"
title="Continued" alt="Continued" />
<img *ngIf="cell.row.data.UnitPrice !== 0 && !val" src="https://www.infragistics.com/angular-demos-lob/assets/images/grid/expired.png"
title="Discontinued" alt="Discontinued" />
</ng-template>
</igx-column>
</igx-tree-grid>
</div>
html
.grid__wrapper {
display: flex;
flex-flow: column;
margin: 15px;
}
.advanced-dialog {
margin-bottom: 2px;
height: 300px;
}
scss
使用方法
Tree Grid の外部で動作するように高度なフィルタリングを構成する方法は簡単です。ダイアログを作成して、その grid
プロパティを設定するだけです。
<igx-advanced-filtering-dialog [grid]="treegrid1">
</igx-advanced-filtering-dialog>
html
また、ドラッグアンドドロップ App Builder™ が、デザインから Angular コード作成へのストーリー全体をどのように効率化できるかを確認することもできます。
スタイル設定
高度なフィルタリング ダイアログのスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する index
ファイルをインポートする必要があります。
@use "igniteui-angular/theming" as *;
scss
Excel スタイルのフィルタリング ダイアログは、filtering-row-background
パラメーターを使用して、グリッドのテーマから背景色を取得します。背景を変更するには、カスタム テーマを作成する必要があります。
$custom-grid: grid-theme(
$filtering-row-background: #ffcd0f
);
scss
ボタン、チップ、ドロップダウン、入力など、高度なフィルタリング ダイアログ内に他のコンポーネントがあるため、それぞれに個別のテーマを作成する必要があります。
$custom-button: button-theme(
$disabled-color: gray,
...
);
$custom-button-group: button-group-theme(
$item-background: #292826,
...
);
$custom-input-group: input-group-theme(
$box-background: #4a4a4a,
...
);
$custom-chip: chip-theme(
$background: #ffcd0f,
...
);
$custom-drop-down: drop-down-theme(
$background-color: #292826,
...
);
scss
上記のようにカラーの値をハードコーディングする代わりに、palette
および color
関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細についてはパレット
のトピックをご覧ください。
この例では、リストされたコンポーネントのパラメーターの一部のみを変更しましたが、button-theme
、button-group-theme
、chip-theme
、drop-down-theme
、input-group-theme
テーマは、それぞれのスタイルを制御するために多数のパラメーターを提供します。
最後の手順は、それぞれのテーマを持つコンポーネント ミックスインを含めることです。また、高度なフィルタリング ダイアログ内の他の要素のスタイルを追加します。
@include css-vars($custom-grid);
igx-advanced-filtering-dialog {
@include css-vars($custom-button);
@include css-vars($custom-button-group);
@include css-vars($custom-input-group);
@include css-vars($custom-chip);
@include css-vars($custom-drop-down);
.igx-filter-empty__title {
color: #ffcd0f
}
.igx-advanced-filter__header {
color: #ffcd0f
}
.igx-filter-tree__expression-actions igx-icon {
color: #ffcd0f
}
.igx-filter-tree__expression-actions igx-icon:hover {
color: #ffe482
}
.igx-filter-tree__expression-actions igx-icon:focus {
color: #ffe482
}
.igx-filter-contextual-menu {
border: 1px solid #ffcd0f
}
.igx-filter-contextual-menu__close-btn {
position: absolute !important;
background: #292826 !important;
border-color: #ffcd0f !important;
}
.igx-input-group__input::placeholder {
color: gray;
}
}
scss
カスタム テーマが高度なフィルタリング ダイアログにネストされたコンポーネントのみに影響するように、コンポーネントのほとんどのミックスインを advanced-filtering-dialog
内にスコープします。そうでない場合、アプリケーション内の他のボタン、チップ、入力、ドロップダウンも影響を受けます。
コンポーネントが Emulated
ViewEncapsulation を使用している場合、::ng-deep
を使用してこのカプセル化を解除する必要があります。
:host {
::ng-deep {
@include css-vars($custom-drop-down);
@include css-vars($custom-grid);
igx-advanced-filtering-dialog {
@include css-vars($custom-button);
@include css-vars($custom-button-group);
@include css-vars($custom-input-group);
@include css-vars($custom-chip);
.igx-input-group__input::placeholder {
color: gray;
}
.igx-filter-empty__title {
color: #ffcd0f
}
.igx-advanced-filter__header {
color: #ffcd0f
}
.igx-filter-tree__expression-actions igx-icon {
color: #ffcd0f
}
.igx-filter-tree__expression-actions igx-icon:hover {
color: #ffe482
}
.igx-filter-tree__expression-actions igx-icon:focus {
color: #ffe482
}
.igx-filter-contextual-menu {
border: 1px solid #ffcd0f
}
.igx-filter-contextual-menu__close-btn {
position: absolute !important;
background: #292826 !important;
border-color: #ffcd0f !important;
}
}
}
}
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 { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";
import { IgxTreeGridModule } from "igniteui-angular";
import { TreeGridAdvancedFilteringStyleComponent } from "./tree-grid/tree-grid-advanced-filtering-style/tree-grid-advanced-filtering-style.component";
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
TreeGridAdvancedFilteringStyleComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxPreventDocumentScrollModule,
IgxTreeGridModule
],
providers: [],
entryComponents: [],
schemas: []
})
export class AppModule {}
ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { IgxTreeGridComponent} from 'igniteui-angular';
import { generateEmployeeFlatData } from '../data/employees-flat';
@Component({
selector: 'app-tree-grid-advanced-filtering-style',
styleUrls: ['./tree-grid-advanced-filtering-style.component.scss'],
templateUrl: './tree-grid-advanced-filtering-style.component.html'
})
export class TreeGridAdvancedFilteringStyleComponent implements OnInit {
@ViewChild('treeGrid1', { static: true }) public treeGrid: IgxTreeGridComponent;
public data: any[];
public ngOnInit(): void {
this.data = generateEmployeeFlatData();
}
}
ts
<igx-tree-grid [igxPreventDocumentScroll]="true" #treeGrid1 [data]="data" [autoGenerate]="false" primaryKey="ID" foreignKey="ParentID" [allowAdvancedFiltering]="true" height="480px" width="100%" >
<igx-grid-toolbar></igx-grid-toolbar>
<igx-column [field]="'Name'" dataType="string" [sortable]="true"></igx-column>
<igx-column [field]="'Title'" dataType="string" [sortable]="true"></igx-column>
<igx-column [field]="'Age'" dataType="number" [sortable]="true"></igx-column>
<igx-column [field]="'HireDate'" dataType="date" [sortable]="true"></igx-column>
<igx-column [field]="'OnPTO'" dataType="boolean" [sortable]="true"></igx-column>
</igx-tree-grid>
html
@use '../../../variables' as *;
$yellow: #ffcd0f;
$black: #292826;
$muted-yellow: #ffe482;
$custom-grid: grid-theme(
$filtering-row-background: $black
);
$custom-button: button-theme(
$schema: $dark-material-schema,
$background: $black,
$foreground: $yellow,
$hover-foreground: $black,
$hover-background: $yellow,
$focus-foreground: $yellow,
$focus-background: $black,
$border-color: $yellow
);
$custom-raised-button: button-theme(
$schema: $dark-material-schema,
$background: $yellow,
$foreground: $black,
$hover-background: $yellow,
$hover-foreground: $black
);
$custom-button-group: button-group-theme(
$schema: $dark-material-schema,
$item-background: $black,
$item-text-color: $yellow,
$item-border-color: $yellow,
$item-selected-background: $yellow,
$item-hover-background: $yellow,
$item-selected-hover-background: $yellow
);
$custom-input-group: input-group-theme(
$schema: $dark-material-schema,
$idle-text-color: $yellow,
$focused-text-color: $yellow,
$filled-text-color: $yellow,
$idle-bottom-line-color: $muted-yellow,
$focused-secondary-color: $yellow
);
$custom-chip: chip-theme(
$schema: $dark-material-schema,
$background: $yellow,
$text-color: $black
);
$custom-drop-down: drop-down-theme(
$schema: $dark-material-schema,
$background-color: $black,
$item-text-color: $yellow,
$hover-item-background: $yellow,
$hover-item-text-color: $black,
$focused-item-background: $yellow,
$focused-item-text-color: $black,
$selected-item-background: $yellow,
$selected-item-text-color: $black,
$selected-focus-item-background: $yellow,
$selected-focus-item-text-color: $black,
$selected-hover-item-background: $yellow,
$selected-hover-item-text-color: $black
);
:host {
display: block;
margin: 16px;
::ng-deep {
@include css-vars($custom-grid);
igx-advanced-filtering-dialog {
@include css-vars($custom-button);
@include css-vars($custom-button-group);
@include css-vars($custom-input-group);
@include css-vars($custom-chip);
@include css-vars($custom-drop-down);
.igx-excel-filter__apply {
@include css-vars($custom-raised-button);
}
.igx-filter-empty__title {
color: $yellow
}
.igx-advanced-filter__header {
color: $yellow;
background-color: $black;
}
.igx-filter-tree__expression-actions igx-icon {
color: $yellow
}
.igx-filter-tree__expression-actions igx-icon:hover {
color: $muted-yellow
}
.igx-filter-tree__expression-actions igx-icon:focus {
color: $muted-yellow
}
.igx-filter-contextual-menu {
border: 1px solid $yellow
}
.igx-filter-contextual-menu__close-btn {
position: absolute !important;
background: $black !important;
border-color: $yellow !important;
}
}
}
}
scss
このサンプルは、Change Theme
(テーマの変更) から選択したグローバル テーマに影響を受けません。
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。