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

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

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

インタラクション

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

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

使用方法

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

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

高度なフィルタリングは、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.grid.advancedFilteringExpressionsTree = tree;
}

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

Note

Grid で quickFilter/excelStyleFilter と高度なフィルタリングユーザーインターフェイスの両方を有効にできます。両フィルタリングユーザーインターフェイスは、互いに依存せずに機能します。Grid の最終的なフィルター結果は、2 つのフィルターの結果の共通部分です。

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

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

デモ

使用方法

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

<igx-advanced-filtering-dialog [grid]="grid1">
</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';

Excel スタイルのフィルタリングダイアログは、filtering-row-background パラメーターを使用して、グリッドのテーマから背景色を取得します。背景を変更するには、カスタムテーマを作成する必要があります。

$custom-grid: grid-theme(
  $filtering-row-background: #ffcd0f
);

ボタン、チップ、ドロップダウン、入力など、高度なフィルタリングダイアログ内に他のコンポーネントがあるため、それぞれに個別のテーマを作成する必要があります。

$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,
  ...
);

Note

上記のようにカラーの値をハードコーディングする代わりに、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;
        }
    }
}

Note

カスタムテーマが高度なフィルタリングダイアログにネストされたコンポーネントのみに影響するように、コンポーネントのほとんどのミックスインを advanced-filtering-dialog 内にスコープします。そうでない場合、アプリケーション内の他のボタン、チップ、入力、ドロップダウンも影響を受けます。

Note

コンポーネントが 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;
      }
    }
  }
}

デモ

Note

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

API リファレンス

その他のリソース

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

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