Ignite UIを使用したAngularグリッド インターフェイスでの高度なフィルタリングの習得

Ignite UIを使用したAngularグリッド インターフェイスでの高度なフィルタリングの習得

Excel スタイルのフィルタリング、カスタム フィルタリング オペランド、カスタム フィルタリング戦略、高度なフィルタリング、プログラムによるフィルタリング、またはリモート フィルタリングを有効にする方法を知っていますか?この記事では、コード スニペット、例、ユース ケースなど、その方法について説明します。

9分読み取り

フィルタリングはあらゆるデータ グリッドの中核機能であり、ユーザーが関連データを迅速かつ効率的に見つけて操作できるようにする上で重要な役割を果たします。データセットのサイズと複雑さが増すにつれて、ユーザーは単純なテキスト検索以上のものを必要としています。ここで、Ignite UI for Angularとグリッドコンポーネントが活躍します。基本的な操作から高度なカスタマイズ可能なロジックまで、さまざまなフィルタリング シナリオ (高度なフィルタリング、プログラムによるフィルタリングなど) を簡単に処理できる堅牢なフィルタリング API を提供します。

この投稿では、その仕組みを理解し、複雑なグリッド インターフェイスの主要な高度なフィルタリング手法を探るのに役立つ内容について説明します。

  • Excel スタイルのフィルター処理
  • カスタムフィルタリングオペランド
  • カスタムフィルタリング戦略
  • 高度なフィルタリング
  • プログラムによるフィルタリング
  • リモートフィルタリング

Excel スタイルのフィルタリングの操作

Excel スタイルのフィルタリングは、Angularアプリケーションに使い慣れた UI パラダイムを導入し、ユーザーが列ベースのフィルターをすばやく簡単に適用できるようにします。

最も一般的な使用例にはどのようなものがありますか?

  • 1 つの列での迅速なフィルタリング。
  • 列ごとに複数のフィルター条件。
  • 技術者以外のユーザー向けの明確な UI。

このフィルタリングモードは実装が簡単で、シンプルかつインタラクティブなフィルタリングインターフェイスを必要とするアプリケーションに役立ちます。

Excel スタイルのフィルタリングを有効にするにはどうすればよいですか?

Set [allowFiltering] to true and [filterMode] to 'excelStyleFilter': 
<igx-grid [data]="data" 
          [allowFiltering]="true" 
          [filterMode]="'excelStyleFilter'"> 
  <igx-column field="id" header="ID"></igx-column> 
  <!-- Additional columns --> 
</igx-grid>

カスタムフィルタリングオペランド

高度なフィルタリング

Contains や Equals などの組み込みオペランドは一般的なシナリオをカバーしますが、アプリケーションでドメイン固有のロジックが必要な場合は、カスタム オペランドを使用してフィルター フレームワークを拡張する柔軟性を提供します。

最も一般的な使用例にはどのようなものがありますか?

  • ドメイン固有のフィルタリングルールを適用します。
  • 柔軟なマッチングロジックを実装します。
  • 構造化または非標準のデータ形式をサポートします。

例: 正規表現一致オペランド 

このカスタムフィルタリングオペランドを使用すると、ユーザーはフィルタリングに正規表現を適用できます。たとえば、正規表現 ^\s*\S+\s+\S+\s+\S+\s+\s+\s*$ は、正確に 4 つの単語を含む製品名をフィルター処理します。

export class ExtendedStringFilteringOperand extends IgxStringFilteringOperand { 
  constructor() { 
    super(); 
    this.operations = [ 
      ...this.operations, // Keep default string operations 
      { 
        name: 'Regex Match', 
        iconName: 'search', 
        isUnary: false, 
        logic: (target: string, searchVal: string) => { 
          try { 
            const regex = new RegExp(searchVal); 
            return regex.test(target); 
          } catch (e) { 
            console.error('Invalid regex pattern:', e); 
            return false; 
          } 
        } 
      } 
    ]; 
  } 
}

Ignite UI for Angularグリッドでの使用

public extendedStringFilteringOperand = ExtendedStringFilteringOperand.instance(); 
<igx-column field="productName" 
            header="Product Name" 
            dataType="string" 
            [filters]="extendedStringFilteringOperand"> 
</igx-column>

試してみる便利なカスタムフィルタリング戦略

Ignite UI Angular と高度なフィルタリング

基本的なフィルター処理は、単純なシナリオに適しています。ただし、アプリケーションで入力をクリーンアップしたり、あいまいロジックをサポートしたり、列ごとに異なるルールを適用したりする必要がある場合は、カスタムフィルター戦略が必要な柔軟性を提供します。

戦略を設定すると、グリッドがフィルター条件に対して各値を評価する方法を正確に制御できます。

最も一般的な使用例にはどのようなものがありますか?

  • 入力またはデータは、アクセントの削除、数値の抽出、テキストの簡略化など、最初に変換する必要があります。
  • マッチングには、単純なオペランドを超えたトークン、部分的なフレーズ、またはあいまいなロジックが含まれます。
  • 列が異なれば、データ型またはビジネスロジックに基づいて独自のフィルター処理動作が必要です。

例: イニシャルマッチング戦略 

この戦略は、各値をそのイニシャル (例: "John Doe" → "jd") に変換し、フィルター条件と照合することでデータをフィルター処理します。

export class InitialsFilteringStrategy extends FilteringStrategy { 
  public override filter(data: [], expressionsTree: IFilteringExpressionsTree): any[] { 
    const result: any[] = []; 
    if (!expressionsTree || !expressionsTree.filteringOperands || 
        expressionsTree.filteringOperands.length === 0 || !data.length) { 
      return data; 
    } 
    data.forEach((rec: any) => { 
      if (this.matchRecord(rec, expressionsTree)) { 
        result.push(rec); 
      } 
    }); 
    return result; 
  } 
  public override findMatchByExpression(rec: any, expr: IFilteringExpression, isDate?: boolean, isTime?: boolean, grid?: GridType): boolean { 
    const initials = this.getFieldValue(rec, expr.fieldName, isDate, isTime, grid) 
          .split(/\s+/) 
          .map(word => word[0]?.toLowerCase()) 
          .join(''); 
    return expr.condition?.logic?.(initials, expr.searchVal, expr.ignoreCase) ?? false; 
  } 
}

注: カスタム フィルター戦略を作成するには、IFilteringStrategy インターフェイスを実装するか、ライブラリによって提供される FilteringStrategy 基本クラスを拡張します。

高度なフィルタリング

複雑なデータ探索のニーズに対して、IgxGrid は高度なフィルタリング UI を提供します。この機能により、ユーザーは、ネストされた論理式 (AND、OR) をサポートするダイアログ インターフェイスを使用して、複数の列にまたがる複数条件クエリを作成できます。

最も一般的な使用例にはどのようなものがありますか?  

  • 複数の列にフィルタリング条件を適用して、正確なデータセットを分離します。
  • 技術者以外のユーザーがコードなしで複雑なクエリを構築する必要があるアプリケーションに最適です。
  • フィルター間の関係を定義するためにネストされた AND/OR ロジックを必要とする高度なシナリオを処理します。
  • 文字列、数値、日付、カスタム型をシームレスにサポートし、多様なデータセットに適しています。
  • ディープフィルタリングとユーザーフレンドリーなインターフェイスの両方が不可欠なデータ量の多い UI に最適です。

この機能は、内部と外部の両方のフィルタリング ダイアログをサポートし、グリッド API とシームレスに統合されるため、フィルタリングが単なる UI の問題ではなく、データ アクセス戦略の中核部分である高度なAngularアプリケーションに最適です

高度なフィルタリングを有効にするにはどうすればよいですか?

高度なフィルタリングを開始するには、2 つのオプションがあります。

オプション 1: 内部高度なフィルタリング 

グリッドで直接高度なフィルタリングを有効にします。

<igx-grid [data]="data" [allowAdvancedFiltering]="true"> 
  <igx-column field="id" header="ID"></igx-column> 
  <!-- Other columns --> 
</igx-grid>

これにより、グリッドの UI メニューに「高度なフィルタリング」オプションが追加されます。

オプション 2: [外部詳細フィルタリング] ダイアログ 

igx-advanced-filtering-dialog コンポーネントを使用して、ダイアログを外部で制御することもできます。

<igx-advanced-filtering-dialog [grid]="grid1"></igx-advanced-filtering-dialog> 
<igx-grid #grid1 [data]="data"> 
  <igx-column field="id" header="ID"></igx-column> 
  <!-- Other columns --> 
</igx-grid>

この設定により、ダイアログの表示時期と表示方法をより詳細に制御できます。

高度なフィルター式をプログラムで構築する

多くのアプリケーションでは、フィルター処理は必ずしもユーザーの直接入力によってトリガーされるとは限りません。保存されたビュー、ユーザー・ロール、ビジネス・ロジック、または外部入力に基づいて、フィルターを動的に適用する必要がある場合があります。

IgxGrid は、プログラムでフィルタリングルールを作成および適用できる柔軟な API でこれをサポートします。

Core Concepts 

  • FilteringExpression: 単一の条件を表します (例: status = 'Active')
  • FilteringExpressionsTree: 論理演算子 (AND、OR) を使用して式をグループ化し、複雑なクエリを形成します。

例: フィルターツリーの作成 

public applyFiltering(department: string): void { 
  const today = new Date(); 
  const threeYearsAgo = new Date(today.getFullYear() - 3, today.getMonth(), today.getDate()); 
  const departmentAvgSalary = this.calculateAverageSalaryPerDepartment(department); 
  // Department filter: Department === specified value 
  const deptExpr: IFilteringExpression = { 
    fieldName: 'Department', 
    searchVal: department, 
    condition: IgxStringFilteringOperand.instance().condition('equals'), 
  }; 
  // Tenure filter: HireDate before 3 years ago 
  const tenureExpr: IFilteringExpression = { 
    fieldName: 'HireDate', 
    searchVal: threeYearsAgo, 
    condition: IgxDateFilteringOperand.instance().condition('before'), 
  }; 
  // Salary filter: GrossSalary within ±5% of department average 
  const salaryMinExpr: IFilteringExpression = { 
    fieldName: 'GrossSalary', 
    searchVal: departmentAvgSalary * 0.95, 
    condition: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo'), 
  }; 
  const salaryMaxExpr: IFilteringExpression = { 
    fieldName: 'GrossSalary', 
    searchVal: departmentAvgSalary * 1.05, 
    condition: IgxNumberFilteringOperand.instance().condition('lessThanOrEqualTo'), 
  }; 
  // Combine salary range conditions with OR 
  const salaryExprTree = new FilteringExpressionsTree(FilteringLogic.Or); 
  salaryExprTree.filteringOperands.push(salaryMinExpr, salaryMaxExpr); 
  // Build main AND tree with all filters 
  const mainExprTree = new FilteringExpressionsTree(FilteringLogic.And); 
  mainExprTree.filteringOperands.push(deptExpr, tenureExpr, salaryExprTree); 
  // Apply filters to the grid 
  this.treeGrid.advancedFilteringExpressionsTree = mainExprTree; 
}

この例では、少なくとも 3 年前に採用された "テクノロジー" 部門の従業員で、総給与が部門の平均の ±5% 以内であることを示すフィルターをプログラムで構築する方法を示します。

利点にはどのようなものがありますか?

  • フィルター動作を完全に制御します。
  • ユーザー設定や保存したフィルターと簡単に統合できます。
  • 高度なフィルタリングUIと互換性があります(プログラムで適用されたフィルタはUIを介して編集できます)。

このアプローチは、コンテキストに基づいてフィルターを自動適用する必要がある場合、特定のユーザーに部門固有のデータを表示する必要がある場合、またはダッシュボードの選択に基づいて事前フィルター処理する必要がある場合に最適です。

リモートフィルタリング

大規模なデータセットを扱う場合、クライアント側のフィルタリングは効率的でスケーラブルではない可能性があります。このような場合、IgxGrid は、フィルター式がクライアントで構築され、処理のためにサーバーに送信されるリモート フィルター処理をサポートします。

このアプローチは、仮想化されたグリッド、ページ化された API、またはバックエンド システムが面倒な作業を実行するシナリオに最適です。

最も一般的な使用例にはどのようなものがありますか?

  • サーバー側のページングを備えた仮想化グリッド。
  • 大規模なデータセットのクエリを必要とするダッシュボード。
  • セキュリティまたはデータプライバシーのために、サーバー側でフィルターが適用されるようにします。

仕組み

  1. ユーザーは IgxGrid のフィルタリング UI を操作します。
  1. グリッドは、アクティブなフィルターを表す FilteringExpressionsTree を構築します。
  1. このフィルターツリーをシリアル化し、API 要求に含めます。
  1. サーバーはフィルターを処理し、一致するデータを返します。

例: API のフィルター クエリの生成 

private buildFilterQuery(): string { 
  const expressionsTree = this.grid.filteringExpressionsTree; 
  if (!expressionsTree || expressionsTree.filteringOperands.length === 0) { 
    return ''; 
  } 
  const filterParts: string[] = []; 
  expressionsTree.filteringOperands.forEach((expr: IFilteringExpression) => { 
    const field = expr.fieldName; 
    const condition = expr.condition.name; 
    const value = encodeURIComponent(expr.searchVal); 
    filterParts.push(`${field} ${condition} ${value}`); 
  }); 
  return filterParts.join(' or '); 
} 
private buildDataUrl(): string { 
  const filterQuery = this.buildFilterQuery(); 
  const baseUrl = 'https://myapi.example.com/employees'; 
  return filterQuery ? `${baseUrl}?$filter=${filterQuery}` : baseUrl; 
}

使用法

const apiUrl = this.buildDataUrl(); 
this.http.get(apiUrl).subscribe((data) => { 
  this.grid.data = data; 
}); 
//Generated URL example 
https://services.odata.org/V4/Northwind/Northwind.svc/Products?$filter=UnitPrice gt 50 and UnitsInStock gt 10

バックエンド統合に役立つヒント

サーバーがフィルター ロジックを解釈して適用できることを確認します。バックエンド テクノロジーによっては、次のことが可能になります。

  • 演算子 (contains、equals など) を SQL または NoSQL の同等物にマップします。
  • 入れ子になった AND/OR グループを FilteringExpressionsTree から解析します。
  • 型認識フィルター処理 (文字列、数値、日付など) を適用します。

まとめ

IgxGrid のフィルタリング機能を最大限に活用するには、Ignite UI for Angularドキュメントを参照し、グリッド サンプルをチェックしてフィルタリング機能の動作を確認し、高度に調整された UX のためにフォーマットされたフィルタリングとカスタム オペランドを組み合わせて自由に実験してください。

これらのツールを使用すると、ユーザーがデータをより効率的かつより優れた洞察を持って探索、分析、および行動できるようにするエンタープライズ グレードのデータ エクスペリエンスを構築できます。

Angular How To
デモを予約