Angular Hierarchical Grid 高度なフィルタリング

高度なフィルタリングは、Hierarchical Grid のような任意の Angular テーブルの全列に及ぶフィルタリング条件を持つグループを作成できるダイアログを提供します。

Angular Hierarchical Grid 高度なフィルタリングの例

インタラクション

高度なフィルタリング ダイアログを開くには、グリッドツールバーの高度なフィルタリングボタンをクリックする必要があります。ダイアログはフィルタリング ロジックを生成、表示、編集するために QueryBuilder コンポーネントを使用しています。インタラクション プロセスの詳細については、Query Builder トピックを参照してください。

フィルタリング条件とグループを作成する準備後にデータをフィルタリングするには、[適用] ボタンをクリックします。拡張フィルターを変更後、変更を保存したくない場合は、[キャンセル] ボタンをクリックします。[フィルターのクリア] ボタンをクリックして、高度なフィルターをクリアすることもできます。

使用方法

高度なフィルタリングを有効にするには allowAdvancedFiltering 入力プロパティを true に設定します。

<igx-hierarchical-grid [data]="data" [autoGenerate]="true" [allowAdvancedFiltering]="true">
    <igx-grid-toolbar></igx-grid-toolbar>
</igx-hierarchical-grid>

高度なフィルタリングは、advancedFilteringExpressionsTree 入力プロパティに保存される FilteringExpressionsTree を生成します。このプロパティを使用して、高度なフィルタリングの初期状態を設定できます。

ngAfterViewInit(): void {
    const tree = new FilteringExpressionsTree(FilteringLogic.Or);
    tree.filteringOperands.push({
        fieldName: 'Artist',
        condition: IgxStringFilteringOperand.instance().condition('startsWith'),
        conditionName: IgxStringFilteringOperand.instance().condition('startsWith').name,
        searchVal: 'A'
    });
    const subTree = new FilteringExpressionsTree(FilteringLogic.And);
    subTree.filteringOperands.push({
        fieldName: 'GrammyAwards',
        condition: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo'),
        conditionName: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo').name,
        searchVal: 1
    });
    subTree.filteringOperands.push({
        fieldName: 'Debut',
        condition: IgxNumberFilteringOperand.instance().condition('lessThan'),
        conditionName: IgxNumberFilteringOperand.instance().condition('lessThan').name,
        searchVal: 2000
    });
    tree.filteringOperands.push(subTree);
    this.hierarchicalGrid.advancedFilteringExpressionsTree = tree;
}

IgxHierarchicalGrid の高度なフィルタリングでは、IN / NOT-IN 演算子を使用して、子グリッド データに基づいてルート グリッド データをフィルタリングできます。この演算子により、サブクエリを作成して、より複雑なフィルタリング ロジックを定義できます。この機能の詳細については、クエリ ビルダーの「サブクエリの使用」セクションを参照してください。以下はサブクエリを含むサンプル FilteringExpressionsTree です。

ngAfterViewInit(): void {
    const albumsTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Albums', ['Artist']);
    albumsTree.filteringOperands.push({
        fieldName: 'LaunchDate',
        condition: IgxDateFilteringOperand.instance().condition('after'),
        conditionName: IgxDateFilteringOperand.instance().condition('after').name,
        searchVal: new Date(2017, 1, 1)
    });
    const tree = new FilteringExpressionsTree(FilteringLogic.And);
    tree.filteringOperands.push({
        fieldName: 'Artist',
        condition: IgxStringFilteringOperand.instance().condition('inQuery'),
        conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name,
        searchTree: albumsTree
    });
    this.hierarchicalGrid.advancedFilteringExpressionsTree = tree;
}

リモート データを使用する場合は、IgxHierarchicalGrid の schema プロパティを設定する必要があります。詳細なガイダンスについては、ロードオンデマンドのトピックを参照してください。

Hierarchical Grid ツールバーを表示したくない場合は、openAdvancedFilteringDialog および closeAdvancedFilteringDialog メソッドを使用して、高度なフィルタリング ダイアログをコーディングを使用して開いたり閉じたりできます。

外部の高度なフィルタリング

上記デモで示されるように、高度なフィルタリング ダイアログは、Hierarchical Grid の上にあるオーバーレイでホストされます。ダイアログのセットアップの準備ができたときに、適用または閉じる操作によってダイアログが非表示になります。ダイアログはスタンドアロン コンポーネントとして使用した場合、常に表示になります。以下のデモでは、高度なフィルタリングダイアログが Hierarchical Grid とは別に宣言されます。

デモ

使用方法

Hierarchical Grid の外部で動作するように高度なフィルタリングを構成する方法は簡単です。ダイアログを作成して、その grid プロパティを設定するだけです。

<igx-advanced-filtering-dialog [grid]="hierarchicalGrid">
</igx-advanced-filtering-dialog>

また、ドラッグアンドドロップ App Builder™ が、デザインから Angular コード作成へのストーリー全体をどのように効率化できるかを確認することもできます。

スタイル設定

高度なフィルタリング ダイアログのスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。

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

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

高度なフィルタリング ダイアログは QueryBuilder コンポーネントを使用するため、query-builder-theme を使用してスタイルを設定できます。ヘッダー タイトルのスタイルを設定するには、query-builder-theme を拡張するカスタム テーマを作成し、$header-foreground パラメーターを設定します。

$custom-query-builder: query-builder-theme(
  $background: #1f2836,
  $foreground: #f5f6e6,
  $accent-color: #f5f6e6
);

最後にコンポーネントのテーマをアプリケーションに含めます。

igx-advanced-filtering-dialog {
  @include tokens($custom-query-builder);
}

:host {
  ::ng-deep {
    igx-advanced-filtering-dialog {
      @include tokens($custom-query-builder);
    }
  }
}

デモ

API リファレンス

• Column
• HierarchicalGrid
• IgxHierarchicalGridComponent スタイル

その他のリソース

• Hierarchical Grid 概要

• Excel スタイル フィルタリング

• ページング

• フィルタリング

• 仮想化とパフォーマンス

• ソート

• 集計

• 列移動

• 列固定

• 列サイズ変更

• 選択

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

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