Angular Tree Grid 高度なフィルタリング
高度なフィルタリングは、Tree Grid のような任意の Angular テーブルの全列に及ぶフィルタリング条件を持つグループを作成できるダイアログを提供します。
Angular Tree Grid 高度なフィルタリングの例
インタラクション
高度なフィルタリング ダイアログを開くには、グリッドツールバーの高度なフィルタリングボタンをクリックする必要があります。ダイアログはフィルタリング ロジックを生成、表示、編集するために IgxQueryBuilder
コンポーネントを使用しています。インタラクション プロセスの詳細については、Query Builder トピック
を参照してください。
フィルタリング条件とグループを作成する準備後にデータをフィルタリングするには、[適用] ボタンをクリックします。拡張フィルターを変更後、変更を保存したくない場合は、[キャンセル] ボタンをクリックします。[フィルターのクリア] ボタンをクリックして、高度なフィルターをクリアすることもできます。
使用方法
高度なフィルタリングを有効にするには allowAdvancedFiltering
入力プロパティを true に設定します。
<igx-tree-grid [data]="data" [autoGenerate]="true" [allowAdvancedFiltering]="true">
<igx-grid-toolbar></igx-grid-toolbar>
</igx-tree-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.treeGrid.advancedFilteringExpressionsTree = tree;
}
Tree Grid ツールバーを表示したくない場合は、openAdvancedFilteringDialog
および closeAdvancedFilteringDialog
メソッドを使用して、高度なフィルタリング ダイアログをコーディングを使用して開いたり閉じたりできます。
Note
Tree Grid で quickFilter
/excelStyleFilter
と高度なフィルタリング ユーザー インターフェイスの両方を有効にできます。両フィルタリング ユーザー インターフェイスは、互いに依存せずに機能します。Tree Grid の最終的なフィルター結果は、2 つのフィルターの結果の共通部分です。
外部の高度なフィルタリング
上記デモで示されるように、高度なフィルタリング ダイアログは、Tree Grid の上にあるオーバーレイでホストされます。ダイアログのセットアップの準備ができたときに、適用または閉じる操作によってダイアログが非表示になります。ダイアログはスタンドアロン コンポーネントとして使用した場合、常に表示になります。以下のデモでは、高度なフィルタリングダイアログが Tree Grid とは別に宣言されます。
デモ
使用方法
Tree Grid の外部で動作するように高度なフィルタリングを構成する方法は簡単です。ダイアログを作成して、その grid
プロパティを設定するだけです。
<igx-advanced-filtering-dialog [grid]="treegrid1">
</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';
高度なフィルタリング ダイアログは IgxQueryBuilder
コンポーネントを使用するため、query-builder-theme
を使用してスタイルを設定できます。ヘッダー タイトルのスタイルを設定するには、query-builder-theme
を拡張するカスタム テーマを作成し、$header-foreground
パラメーターを設定します。
$custom-query-builder: query-builder-theme(
$header-foreground: #512da8
);
Note
上記のようにカラーの値をハードコーディングする代わりに、palette
および color
関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細についてはパレット
のトピックをご覧ください。
最後にコンポーネントのテーマをアプリケーションに含めます。
$custom-query-builder: query-builder-theme(
$header-foreground: #512da8,
$color-expression-group-and: #eb0000,
$color-expression-group-or: #0000f3,
$subquery-header-background: var(--ig-gray-300),
$subquery-border-color: var(--ig-warn-500),
$subquery-border-radius: rem(4px)
);
igx-advanced-filtering-dialog {
@include css-vars($custom-query-builder);
}
Note
作成した query-builder-theme を igx-advanced-filtering-dialog
内に含めることで、このカスタム テーマは高度なフィルタリング ダイアログ内のクエリ ビルダーにのみに影響します。そうしない場合、アプリケーション内の他のクエリ ビルダー コンポーネントにも影響します。
Note
コンポーネントが Emulated
ViewEncapsulation を使用している場合、::ng-deep
を使用してこのカプセル化を解除する必要があります。
$custom-query-builder: query-builder-theme(
$header-foreground: #512da8,
$color-expression-group-and: #eb0000,
$color-expression-group-or: #0000f3,
$subquery-header-background: var(--ig-gray-300),
$subquery-border-color: var(--ig-warn-500),
$subquery-border-radius: rem(4px)
);
:host {
::ng-deep {
igx-advanced-filtering-dialog {
@include css-vars($custom-query-builder);
}
}
}
デモ
Note
このサンプルは、Change Theme
(テーマの変更) から選択したグローバル テーマに影響を受けません。