Agグリッドにおけるフィルタリング条件を用いた先進フィルタリング

著者信用Ahmed Gadir
このポストでは、どのように適用することができますまたはAgグリッド内の条件をフィルタリングもオプションを維持する一方で、グリッドのデフォルトとフィルタ条件でフィルタリングを維持します.これを行うには、カスタムツールパネルコンポーネントを追加することで、エンドユーザーが条件を入力またはフィルタリングしたり、フィルタリング条件を適用したり、グリッドにデータをバインドする前にフィルタリング条件を適用したりできます.
以下のサンプルで実装してください.

How it works

AND-Filtering vs. OR-Filtering

Accessing Row Data via React Context

Custom Filter Panel for OR-filter conditions

Binding OR-Filtered data to AG Grid

動作方法
グリッドを表示するtool panels グリッドと一緒に-デフォルトではcolumns とfilters tool panel . あなたが追加できますown tool panels 任意のカスタム機能.我々は2つ追加しましたcustom tool panels 以下のスクリーンショットに示すように、別々にフィルタリング条件を設定します.
フィルタリングツールパネルは、データに条件を適用またはフィルター処理し、結果をAg Grid Row Dataプロパティにバインドします.そして、フィルタリング・ツール・パネルはそれから適用されて、グリッドにおいて、一致している記録を表示すること、Ag格子行データに条件をフィルター処理する.


とフィルタリング対
Ag Gridのデフォルトのフィルタリングの振る舞いは適用され、フィルタリングされます.これは、行がフィルタリングされるすべての列フィルタ条件を通過しなければならないことを意味します.対照的に、またはフィルタリング条件は、フィルタリングされる任意のフィルタ条件を通過する行を許容する.
これを示すには、次のデータセットをとりましょう.

[
    { athlete: “Robyn Ah Mow-Santos”, country: “United States”, sport: “Volleyball” }, 
    { athlete: “Anderson”, country: “Brazil”, sport: “Volleyball” },
    { athlete: “Lloy Ball”, country: “United States”, sport: “Volleyball” },
    { athlete: “Yu Seung-Min”, country: “South Korea”, sport: “Table Tennis” }
]

ここでは、4つの行があり、それぞれにプロパティーのキー値ペアがあります.athlete , country and sport . 次のフィルタをデータセットに適用する場合、

country="United States" && sport="Volleyball"

結果を得る

[
    { athlete: “Robyn Ah Mow-Santos”, country: “United States”, sport: “Volleyball” }, 
    { athlete: “Lloy Ball”, country: “United States”, sport: “Volleyball” },
]

すべての結果がどのように定義されたフィルタ条件の両方を通過するかに注意してください.
ただし、ORフィルターをデータセットに適用すると次のようになります.

country="United States" || sport="Volleyball"

別の結果が得られます.

[
    { athlete: “Robyn Ah Mow-Santos”, country: “United States”, sport: “Volleyball” }, 
    { athlete: “Anderson”, country: “Brazil”, sport: “Volleyball” },
    { athlete: “Lloy Ball”, country: “United States”, sport: “Volleyball” },
]

結果は、以前のフィルタからの両方の行だけでなく、追加のレコードが含まれています.このレコードがどのように2つの指定されたフィルタ条件のどちらかにマッチするかについて注意してください.

反応コンテキストによる行データへのアクセス
次に、フィルタ条件の2種類(およびOR)がどのようにレコードセットに適用されるかを調べましょう.我々のデモアプリケーションの行データの2つの別々のセットを追跡することによって動作します:

rowData - オリジナル、未フィルタの行データ

orFilteredData - フィルタリング条件にマッチする行

これらは両方ともReact Context 以下のように定義されたアプリケーション内のどこからでもアクセスできます.

// src/DataContext.js

const DataContext = createContext({
  rowData: [],
  orFilteredRowData: [],
  setOrFilteredRowData: () => { }
});

カスタムフィルタパネル
前に示すように、我々のデモアプリケーションは2つのフィルタツールパネルを使用します.

提供agFiltersToolPanel component これにより

OrFilterPanel - エーcustom tool panel component これは許可またはフィルタリング

次のコードセグメントで定義されている2つのツールパネルを参照してください.

<AgGridReact
    // ...
    frameworkComponents={{ orFilterPanel: OrFilterPanel }}
    sideBar={{
        toolPanels: [
            {
                id: 'or-filtering',
                labelDefault: 'OR-filtering',
                labelKey: 'or-filtering',
                iconKey: 'filter',
                toolPanel: 'orFilterPanel',
                toolPanelParams: {
                    columnDefs: columnDefs,
                }
            },
            {
                id: 'and-filtering',
                labelDefault: 'AND-filtering',
                labelKey: 'and-filtering',
                iconKey: 'filter',
                toolPanel: 'agFiltersToolPanel',
            },

        ],
        defaultToolPanel: 'or-filtering',
    }}

今すぐハンドルまたはフィルタ条件のカスタムツールパネルに焦点を当てましょう.初期化OrFilterPanel 状態変数を作成するavailableFilterOptions , すべてのキーがAGグリッドカラムであり、すべての値がDataContext.rowData そのキーのために.

の各キー値のペアavailableFilterOptions はReactSelectMe ドロップダウン要素.この便利なサードパーティ製のパッケージはoption 要素が表示され、列内のすべての個別のセル値を表すオプションの長いリストを効率的にドロップダウンできます.
状態変数の選択されたドロップダウンオプションを追跡しますselectedFilterOptions . この状態変数には、フィルター処理条件が含まれます.下のスクリーンショットでは、左側のパネルの選択は、右の状態変数値で表されます.

選択されたフィルタのオプションが更新されるたびに、フィルタリングされていないデータとフィルタリングのアルゴリズムを適用するdataContext.orFilteredRowData 次のコードに示す行を一致させます.

// src/Components/OrFilterPanel.js

 if (noSelectedFilterOptions) {
    updatedFilteredRowData = dataContext.rowData.map(row => ({ ...row }));
} else {
    updatedFilteredRowData = dataContext.rowData
        .map(row => ({ ...row }))
        .filter(row =>
            Object.entries(row).some(([field, value]) =>
                selectedFilterOptions[field] && selectedFilterOptions[field].some(selectedFilters => selectedFilters === value)
            )
        );
}

// update context
dataContext.setOrFilteredRowData(updatedFilteredRowData);

The orFilteredData そして、私たちのAg GridrowData プロパティと表示.

Agグリッドへの結合またはフィルタリングデータ
このアプローチの主要な側面の1つは、Agグリッド行データが、フィルタリングされていない行の行に直接結合されないことである.代わりに、Ag GridインスタンスはそのRowDataプロパティをDataContext.orFilteredRowData 以下に示すように、

// src/Components/MyGrid.js

<AgGridReact
    rowData={dataContext.orFilteredRowData}
    immutableData={true}
    getRowNodeId={data => data.id}
    ...

これは、またはフィルタリングは、グリッドから外部に適用され、それに透明であることを意味します.これはグリッドが既に存在するか、フィルタリングされる可能性があるデータを受信し、必要に応じて、そのフィルタリングされたデータの上にその組み込みおよびフィルタリング条件を適用できる理由です.
次のフィルタークエリを使用して、GIFの下でフィルターを適用したり、フィルター処理したり、サンプルを操作したりできます.

(country="Keyna || sport="Beach Volleyball") && year=2012

概要
私はこの記事は、デフォルトとフィルタリングの動作に加えて両方を提供するか、またはフィルタリングするためにあなたのAGのグリッドを設定する方法を説明することができます願っています.このアプローチは、ユーザーが容易に大きなデータセットをフィルタリングし、すぐに彼らが探しているデータを見つけることができます.
あなたはAGのグリッドを試してみたい場合は、我々の取得ガイドを開始JS / React / Angular / Vue )
ハッピーコーディング!