Ignite UI를 사용하여 Angular 그리드 인터페이스에서 고급 필터링 마스터하기

Ignite UI를 사용하여 Angular 그리드 인터페이스에서 고급 필터링 마스터하기

Excel 스타일 필터링, 사용자 지정 필터링 피연산자, 사용자 지정 필터링 전략, 고급 필터링, 프로그래밍 방식 필터링 또는 원격 필터링을 활성화하는 방법을 알고 있습니까? 이 문서에서는 코드 조각, 예제 및 사용 사례를 포함하여 방법을 보여줍니다.

9분 소요

필터링은 모든 데이터 그리드의 핵심 기능으로, 사용자가 관련 데이터를 빠르고 효율적으로 찾고 작업할 수 있도록 돕는 데 중요한 역할을 합니다. 데이터 세트의 크기와 복잡성이 증가함에 따라 사용자는 단순한 텍스트 검색 이상의 것이 필요합니다. 여기에서 Ignite UI for Angular 및 그리드 구성 요소가 작동합니다. 기본 작업부터 사용자 정의 가능한 고급 논리에 이르기까지 모든 것을 지원하는 강력한 필터링 API를 제공하여 다양한 필터링 시나리오(예: 고급 필터링, 프로그래밍 방식 필터링 등)를 쉽게 처리합니다.

이 게시물에서는 모든 것이 어떻게 작동하는지 이해하고 복잡한 그리드 인터페이스에 대한 주요 고급 필터링 기술을 탐색하는 데 도움이 되는 내용을 다룰 내용입니다.

  • Excel 스타일 필터링
  • 사용자 지정 필터링 피연산자
  • 사용자 지정 필터링 전략
  • 고급 필터링
  • 프로그래밍 방식 필터링
  • 원격 필터링

Excel 스타일 필터링 작업

Excel 스타일 필터링은 Angular 애플리케이션에 친숙한 UI 패러다임을 도입하여 사용자가 빠른 열 기반 필터를 쉽게 적용할 수 있도록 합니다.

가장 일반적인 사용 사례는 무엇입니까?

  • 단일 열에 대한 빠른 필터링.
  • 열당 여러 필터 조건.
  • 기술적인 지식이 없는 사용자를 위한 명확한 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 애플리케이션에 이상적입니다

고급 필터링을 활성화하는 방법은 무엇입니까?

고급 필터링을 시작하는 데는 두 가지 옵션이 있습니다.

옵션 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

유용한 백엔드 통합 팁

서버가 필터 논리를 해석하고 적용할 수 있는지 확인합니다. 백엔드 기술에 따라 다음을 수행할 수 있습니다.

  • 연산자(예: 포함, 같음)를 SQL 또는 NoSQL에 상응하는 항목에 매핑합니다.
  • FilteringExpressionsTree에서 중첩된 AND/OR 그룹을 구문 분석합니다.
  • 유형 인식 필터링(예: 문자열, 숫자, 날짜)을 적용합니다.

싸다

IgxGrid의 필터링 기능을 최대한 활용하려면 Ignite UI for Angular 설명서를 살펴보고, 그리드 샘플을 확인하여 필터링 기능이 작동하는 것을 확인하고, 고도로 맞춤화된 UX를 위해 형식화된 필터링과 사용자 정의 피연산자를 결합하여 자유롭게 실험해 보세요.

이러한 도구를 사용하면 사용자가 데이터를 보다 효율적이고 더 큰 통찰력을 바탕으로 데이터를 탐색, 분석 및 조치를 취할 수 있도록 지원하는 엔터프라이즈급 데이터 경험을 구축할 수 있습니다.

Angular How To
데모 요청