Web Components Grid 高度なフィルタリング

Web Components Grid の Ignite UI for Web Components 高度なフィルタリングを使用すると、IgcGridComponent のすべての列にわたるフィルタリング条件を使用してさまざまなグループを作成できるダイアログが表示されるため、データを操作できます。

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

インタラクション

高度なフィルタリングダイアログを開くには、グリッドツールバーの [高度なフィルタリング] ボタンをクリックする必要があります。高度なフィルターが適用されていない場合、AND または OR でリンクされたフィルター条件のグループの作成から開始する必要があります。その後、フィルタリング条件またはサブグループを追加できます。

フィルター条件を追加するには、filterable 列のいずれか、dataType 列に基づくオペランド、およびオペランドが単項でない場合の値を選択する必要があります。条件が確定すると、条件情報を含むチップが表示されます。チップをホバーまたはクリックすると、チップを変更したり、その直後に別の条件やグループを追加したりできます。

複数のフィルター条件チップを選択すると、グループを作成したりフィルターを削除したりするためのオプションを含むコンテキストメニューが表示されます。選択した条件でグループを作成することを選択した場合、一番上に選択した条件が配置された場所に新しく作成されたグループが表示されます。

グループを選択するために、リンク条件 (AND または OR) に基づいて色付けされた垂直線をクリックすることもできます。単一のグループが選択されている場合、フィルタリングロジックを変更、グループ解除、または削除するオプションを含むコンテキストメニューが表示されます。

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

使用方法

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

<igc-grid id="grid" auto-generate="true" allow-advanced-filtering="true">
    <igc-grid-toolbar></igc-grid-toolbar>
<igc-grid>

constructor() {
    let grid = document.getElementById("grid") as IgcGridComponent;
    grid.data = this.data
}

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

connectedCallback(): void {
    const tree = new IgcFilteringExpressionsTree(FilteringLogic.And);
    tree.filteringOperands.push({
        fieldName: 'ProductName',
        condition: IgcStringFilteringOperand.instance().condition('contains'),
        searchVal: 'cha',
        ignoreCase: true
    });
    const subTree = new IgcFilteringExpressionsTree(FilteringLogic.Or);
    subTree.filteringOperands.push({
        fieldName: 'ProductName',
        condition: IgcStringFilteringOperand.instance().condition('doesNotContain'),
        searchVal: 'b',
        ignoreCase: true
    });
    subTree.filteringOperands.push({
        fieldName: 'ProductName',
        condition: IgcStringFilteringOperand.instance().condition('startsWith'),
        searchVal: 'Chan',
        ignoreCase: true
    });
    tree.filteringOperands.push(subTree);
    grid.advancedFilteringExpressionsTree = tree;
}

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

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

スタイル設定

定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。

<igc-grid class="grid"></igc-grid>

次に、そのクラスに関連する CSS プロパティを設定します。

.grid {
    --ig-grid-filtering-row-background: #ffcd0f;
    --ig-grid-filtering-background-or: #d83434;
}

デモ

API リファレンス

その他のリソース

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