Web Components Tree Grid の Excel スタイル フィルタリング

    Web Components Tree Grid は、Excel のようなフィルタリング UI を提供する Excel スタイルのフィルタリング機能を公開します。これにより、大規模なデータセットを操作するプロセスが簡素化されます。主なアイデアは、無関係なエントリを排除しながら、最も関連性の高いデータをフィルタリングできるようにすることです。

    Web Components Tree Grid Excel スタイル フィルタリングの例

    EXAMPLE
    DATA
    TS
    HTML
    CSS

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

    使用方法

    IgcTreeGridComponent コンポーネントの Excel スタイル フィルタリングをオンにするには、2 つの入力を設定します。AllowFilteringtrue に設定し、FilterModeExcelStyleFilter に設定してください。

    <igc-tree-grid auto-generate="true" allow-filtering="true" filter-mode="excelStyleFilter" >
    </igc-tree-grid>
    html
    Ignite UI for Web Components | CTA Banner

    インタラクション

    特定の列のフィルター メニューを開くには、ヘッダーの Web Components フィルター アイコンをクリックします。さらに、選択したヘッダーで Ctrl + Shift + L の組み合わせを使用できます。列でフィルタリング機能とソート、ピン固定、移動、選択、非表示が設定された場合、オンになっている機能のボタンが表示されます。

    フィルターが適用されていない場合、リストのすべての項目が選択されます¥。リストの上の入力からフィルターされます。データのフィルターは、リストで項目を選択/非選択して [適用] ボタンをクリックするか、あるいは Enter. を押します。リスト項目に適用したフィルタリングは、equals オペレーターでフィルター式を作成します。各式間のロジック オペレーターは OR です。

    検索ボックスに入力してフィルターを適用すると、検索条件に一致する項目のみが選択されます。ただし、現在フィルターされている項目に項目を追加したい場合は、[現在の選択をフィルターに追加] オプションを選択する必要があります。

    フィルターをクリアしたい場合、[すべて選択] オプションをチェックして [適用] ボタンを押します。

    異なる式でフィルターを適用する場合、テキスト フィルターをクリックし、特定の列で使用できるフィルター演算子のサブメニューを開きます。いずれかを選択してカスタム フィルター ダイアログを開き、フィルターとロジック演算子を使用して式を追加できます。[クリア] ボタンでフィルターをクリアできます。

    メニュー機能の構成

    ソート、ピン固定、および非表示機能は、対応する入力を使用してフィルター メニューから削除できます: sortableselecteddisablePinningdisableHiding

    <igc-tree-grid id="treegrid1" auto-generate="false" height="480px" width="100%" moving="true" allow-filtering="true"
        primary-key="ID" foreign-key="ParentID" filter-mode="ExcelStyleFilter">
        <igc-column field="ID" header="Product ID" data-type="String">
        </igc-column>
        <igc-column field="Name" header="Product Name" sortable="true" data-type="'string'">
        </igc-column>
        <igc-column field="UnitPrice" header="Unit Price" data-type="Number" sortable="false" disable-pinning="true" disable-hiding="true">
        </igc-column>
        <igc-column field="AddedDate" header="Added Date" data-type="Date" sortable="false">
        </igc-column>
        <igc-column field="Discontinued" header="Discontinued" data-type="Boolean" sortable="true">
        </igc-column>
    </igc-tree-grid>
    html

    以下のサンプルでは、「Product Name」 列と 「Discontinued」 列で 3 つの機能がすべて有効化され、「Unit Price」 で 3 つすべてが無効化され、「Added Date」 でピン固定と非表示のみが設定されています。

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    テンプレート

    Excel スタイル フィルター メニューをさらにカスタマイズする場合は、ExcelStyleHeaderIconTemplate プロパティを使用して、メニューのヘッダー アイコンのカスタム テンプレートを定義できます。

    次のコードは、ExcelStyleHeaderIconTemplate を使用して Excel スタイル フィルター メニューをカスタマイズする方法を示しています。

    constructor() {
        var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent;
        grid.excelStyleHeaderIconTemplate = this.webGridFilterAltIconTemplate;
    }
    
    public webGridFilterAltIconTemplate = (ctx: IgcCellTemplateContext) => {
        return html`<img height="15px" width="15px" src="http://static.infragistics.com/xplatform/images/grid/propeller-logo.svg" title="Continued" alt="Continued" />`
    }
    ts

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    スタイル設定

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

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

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

    .grid {
        --ig-grid-filtering-row-background: #ffcd0f;
        --ig-list-item-background: #ffcd0f;
    }
    css

    デモ

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    API リファレンス

    その他のリソース

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