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

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

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    インタラクション

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

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

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

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

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

    Ignite UI for Web Components | CTA Banner

    使用方法

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

    <igc-grid id="grid" auto-generate="true" allow-advanced-filtering="true">
    <igc-grid-toolbar></igc-grid-toolbar>
<igc-grid>
html
    constructor() {
    let grid = document.getElementById("grid") as IgcGridComponent;
    grid.data = this.data
}
ts

    高度なフィルタリングは、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;
}
typescript

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

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

    スタイル設定

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

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

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

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

    デモ

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    API リファレンス

    その他のリソース

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